Question

我正在与Bootstarp v4.0和FullCalendar.io一起工作，如下所示创建了FullCalendar

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar, events = localStorage.reservedRooms ? JSON.parse(localStorage.reservedRooms) : []
    calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: ['bootstrap', 'interaction', 'dayGrid', 'timeGrid', 'list'],
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
        },
        //defaultDate: '2019-04-12',
        weekNumbers: true,
        navLinks: true, // can click day/week names to navigate views
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        events: events
    });
    calendar.render();
});

我要放置localStorage上的事件的地方

我想从jQuery按钮单击中加载全日历，但是我不能这样做。我还尝试创建单独的HTML文件，并尝试通过以下方式在div中加载该HTML文件： $.get，但从不渲染。我还尝试通过calendar.addEventSource( source )插入事件，但这也不起作用。

单击我的jQuery按钮

$(document).ready(function() {
    $('#checkAvailability').click(function(e) {
        $.get(
            '../Shared Documents/html/meetingRoom/meetingRoomSearchResult.html',
            function(data) {
                $('#dvResult').html(data)
            })
    })
})

请帮助我动态加载日历。

Answer 1

更改ajax仅返回事件（作为json），并在ajax成功时初始化日历

var calendar;
$('#checkAvailability').click(function(e) {
$.get(
    '../Shared Documents/html/meetingRoom/meetingRoomSearchResult.html',
function(events) {
    if(calendar) calendar.destroy();
    var calendarEl = document.getElementById('calendar');
    calendar = new FullCalendar.Calendar(calendarEl, {
          plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid', 'list' ],
          header: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
          },
          //defaultDate: '2019-04-12',
          weekNumbers: true,
          navLinks: true, // can click day/week names to navigate views
          editable: true,
          eventLimit: true, // allow "more" link when too many events
          events: events
        });
        calendar.render();
   });
})

将div添加到您的主页

  <div id='calendar'></div>

FullCalendar渲染事件动态

1 个答案: