Question

我想使用Bootstrap Popover来包含一个fullCalendar实例，这样当用户执行指定的事件时（在MVE中，点击一个按钮），日历会被显示，直到被解雇为止（在这里，点击按钮再次）。还有其他要求（例如通过AJAX调用拉取事件数据）但我已经让它们工作并且它们与手头的问题无关，因为即使使用空白日历也会出现问题。

我已经成功地出现了popover / calendar组合，但只是第一次点击按钮。一旦弹出窗口被解除并且第二次单击该按钮，弹出窗口就会显示没有日历。显然，每次单击按钮时都需要显示日历，但我无法弄清楚为什么没有发生这种情况。最初似乎问题是popover已经变成了fullCalendar，并且不喜欢更多的电话，但这似乎不对。

MVE can be found here，代码如下。

HTML

<div class="row">
    <div class="col-md-6">
        <button type="button" class="btn btn-info" id="test-button">Calendar Test</button>
    </div>
</div>

JS

$('#test-button').popover({
    container: 'body',
    title: "Booking Schedule", 
    placement:'bottom',
    html: 'yes'
});

$('#test-button').on('click', function() {
    $('.popover-content').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay,listWeek'
        },
        defaultView: 'agendaWeek',
        themeSystem: 'bootstrap3',
        contentHeight: 'auto',
        allDaySlot: false,
        slotDuration: '00:30:00',
        minTime: '08:00:00',
        maxTime: '12:00:00',
        nowIndicator: true,
        timezone: 'Australia/Brisbane',
        navLinks: true, // can click day/week names to navigate views
        eventLimit: true // allow "more" link when too many events
    });
});

库

jQuery 3.2.1
Bootstrap 3.3.7
momentJS 2.20.1
fullCalendar 3.9.0

Bootstrap Popover中的fullCalendar - 内容仅显示一次

0 个答案: