javascript - FullCalendar - 在 2 个日历之间拖动

Question

我正在尝试使用此示例 - https://fullcalendar.io/docs/other-calendar-dragging - 创建一个显示 2 个 FullCalendar 日历并允许用户将事件从一个日历拖到另一个日历的页面。我能够渲染两个日历，并通过 ajax 从 php 页面为每个日历提取事件。但是，事件仅显示在第一个日历上。如果我注释掉这一行： events: 'ajax/calendar.php?action=get_monthly_patrol_calendar' 来自 calendar1，那么事件将仅显示在 calendar2 上。我真的很感激帮助让事件显示在两个日历上。

仅供参考，这是我的代码：

HTML：

<div id="kt_calendar"></div>
<div id="kt_calendar2" ></div>

JS：

var todayDate = moment().startOf('day');
var show_now_indicator=true;
var YM = todayDate.format('YYYY-MM');
var YEAR = todayDate.format('YYYY');
var MONTH = todayDate.format('MM');
var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
var TODAY = todayDate.format('YYYY-MM-DD');
var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
var NEXT_MONTH = todayDate.clone().add(1, 'month').format('YYYY-MM-DD');

var cal = document.getElementById('kt_calendar');
var calendar = new FullCalendar.Calendar(cal, {
    plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'dayGridPlugin', 'timeGrid', 'list' ],
    themeSystem: 'bootstrap',
    events: 'ajax/calendar.php?action=get_monthly_patrol_calendar',
    showNonCurrentDates:false,
    isRTL: KTUtil.isRTL(),
    contentHeight: 'auto',
    //aspectRatio: 3,  // see: https://fullcalendar.io/docs/aspectRatio
    nowIndicator: show_now_indicator,
    now: TODAY,
    defaultDate: TODAY,
    initialDate: TODAY,
    defaultView: 'dayGridMonth',
    eventOrder: 'order_by',
    eventLimit: false, // true to allow "more" link when too many events
    navLinks: true,
    eventResizableFromStart: false, //Whether the user can resize an event from its starting edge.
    eventDurationEditable: false, //Allow events’ durations to be editable through resizing.
    eventResourceEditable: reschedule,//Determines whether the user can drag events between resources.
    droppable:reschedule,//Determines if external draggable elements or events from other calendars can be dropped onto the calendar.
    eventStartEditable: reschedule,//Allow events’ start times to be editable through dragging.
    editable: reschedule, //Determines whether the events on the calendar can be modified.
    eventDrop: function(info) {
      reschedule_event(info);
    },
    eventClick: function(info) {
      do_event_click(info);
    },
    eventRender: function(info) {
        var element = $(info.el);
    },
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,dayGridWeek,dayGridDay'
    },
    views: {
        dayGridMonth: { buttonText: 'monthly' },
        dayGridWeek: { buttonText: 'weekly' },
        dayGridDay: { buttonText: 'daily' }
    },

});
calendar.render();

var cal2 = document.getElementById('kt_calendar2');
var calendar2 = new FullCalendar.Calendar(cal2, {
    plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'dayGridPlugin', 'timeGrid', 'list' ],
    themeSystem: 'bootstrap',
    events: 'ajax/calendar.php?action=get_monthly_patrol_calendar',
    showNonCurrentDates:false,
    isRTL: KTUtil.isRTL(),
    contentHeight: 'auto',
    //aspectRatio: 3,  // see: https://fullcalendar.io/docs/aspectRatio
    nowIndicator: show_now_indicator,
    now: NEXT_MONTH,
    defaultDate: NEXT_MONTH,
    initialDate: NEXT_MONTH,
    defaultView: 'dayGridMonth',
    eventOrder: 'order_by',
    eventLimit: false, // true to allow "more" link when too many events
    navLinks: true,
    eventResizableFromStart: false, //Whether the user can resize an event from its starting edge.
    eventDurationEditable: false, //Allow events’ durations to be editable through resizing.
    eventResourceEditable: reschedule,//Determines whether the user can drag events between resources.
    droppable:reschedule,//Determines if external draggable elements or events from other calendars can be dropped onto the calendar.
    eventStartEditable: reschedule,//Allow events’ start times to be editable through dragging.
    editable: reschedule, //Determines whether the events on the calendar can be modified.
    eventDrop: function(info) {
      reschedule_event(info);
    },
    eventClick: function(info) {
      do_event_click(info);
    },
    eventRender: function(info) {
        var element = $(info.el);
    },
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,dayGridWeek,dayGridDay'
    },
    views: {
        dayGridMonth: { buttonText: 'monthly' },
        dayGridWeek: { buttonText: 'weekly' },
        dayGridDay: { buttonText: 'daily' }
    },

});
calendar2.render();

标签： javascriptjqueryajaxfullcalendarfullcalendar-5

Answer 1

弄清楚了！第二次调用失败，因为它在第一次调用完成之前正在运行。我在加载第二个日历之前添加了延迟，现在两个月都加载正常：
setTimeout(function() { loadCal2(); }, 3000);