FullCalendar 渲染事件动态

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更改为仅return事件（如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 渲染事件动态

FullCalendar render events dynamic

javascript

arrays

json

fullcalendar

fullcalendar-4