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 以仅返回事件（作为 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>