FullCalendar RenderEvent 在版本 3.9.0 中不起作用

Question

我正在尝试将我的 fullCalendar 版本升级到最新版本 (3.9.0)，但我无法接缝使 renderEvent 功能正常工作。该事件根本不呈现。我也在使用最新版本的调度程序插件 ( 1.9.3 )
我尝试像以前一样使用 $('#calendar').fullCalendar('renderEvent', event, true) 添加事件，但现在它无法正常工作。
我还尝试了 $('#calendar').fullCalendar('addEventSource', event)，然后是 $('#calendar').fullCalendar('refetchEventSources')，没有任何接缝可以正常工作。
这是我的代码。

$(document).ready(function() {
//Calendar option
const LOCALE_DEFAULT = 'fr';
const TIMEZONE_DEFAULT = 'local';
const IGNORE_TIMEZONE_DEFAULT = false;
const HEIGHT_DEFAULT = 'auto';
const DROPPABLE_DEFAULT = true;
const ALL_DAY_DEFAULT_DEFAULT = false;
const ALL_DAY_DEFAULT = false;
const ALL_DAY_SLOT_DEFAULT = false;
const TIME_EVENT_DURATION_DEFAULT = '03:00:00';
const SELECTABLE_DEFAULT = true;
const SLOT_EVENT_OVERLAPP_DEFAULT = false;
const SELECT_HELPER_DEFAULT = false;
const EVENT_RESOURCE_EDITABLE_DEFAULT = false;
const PUBLISHED = true;
const SCHEDULER_LICENCE = 'CC-Attribution-NonCommercial-NoDerivatives';
let events =  [{"id":2,"title":"test","start":"2018-03-18T15:30:00.000Z","end":"2018-03-18T19:30:00-04:00","creationDate":"2018-03-18 14:55:25","resourceFullName":"testRessource","resourceId":3,"type":"shift"}];
let resources = [{
 fullname: "resource 1",
  id: 1
},
{
 fullname: "resource 3",
  id:3
}]

            $("#calendar").fullCalendar({
                locale: LOCALE_DEFAULT,
                timezone: TIMEZONE_DEFAULT,
                ignoreTimezone: IGNORE_TIMEZONE_DEFAULT,
                slotDuration: '00:30:00',
                height: HEIGHT_DEFAULT,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'timelineDay, weekCustom' + /*, timelineWeek */', month, agendaDay'
                },
                buttonText: {
                    today: "today",
                    timelineDay: "timelineDay",
                    timelineWeek: "timelineWeek",
                    month: "month",
                    agendaDay: "agenda"
                },
                views: {
                    weekCustom: {
                        type: 'timeline',
                        timeFormat: 'H(:mm)',
                        buttonText: 'Semaine',
                        displayEventEnd: true,
                        duration: {week: 1},
                        slotDuration: {days: 1}
                    }
                },
                defaultView: "weekCustom",
                lang: 'fr'/*$filter('translate')('language')*/,
                scrollTime: "08:00:00",
                resourceAreaWidth: "220px",
                events: events,
                editable: true,
                droppable: DROPPABLE_DEFAULT,
                allDayDefault: ALL_DAY_DEFAULT_DEFAULT,
                allDay: ALL_DAY_DEFAULT,
                allDaySlot: ALL_DAY_SLOT_DEFAULT,
                defaultTimedEventDuration: TIME_EVENT_DURATION_DEFAULT,
                resourceLabelText: "resources",
                schedulerLicenseKey: SCHEDULER_LICENCE,
                selectable: SELECTABLE_DEFAULT,
                slotEventOverlap: SLOT_EVENT_OVERLAPP_DEFAULT,
                selectHelper: SELECT_HELPER_DEFAULT,
                eventResourceEditable: EVENT_RESOURCE_EDITABLE_DEFAULT,
                resources:  resources,
                select: function (start, end, jsEvent, view, resourceObj) {
                let event = {
                  start: start,
                  end: end,
                  title: "test"
                  };
                  //$("#calendar").fullCalendar('addEventSource', [event]);
                  //$("#calendar").fullCalendar('refetchEventSources',  [event]);
                  //true for stick events
                  $("#calendar").fullCalendar('renderEvent', event, true);
                },
                eventClick: function (event, jsEvent, view) {
                },
                eventDrop: function (event, delta, revertFunc) {
                },
                eventResize: function (event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
                },
                viewRender: function (view) {
                },
                loading: function (bool, view) {
                }
            });

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.3/scheduler.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.3/scheduler.min.js"></script>

<div id="calendar">
</div>

P.S。使用时间线日期进行更有效的测试。

Answer 1

您的代码工作正常，并且非常愉快地创建了事件 - 尝试一下：select 一个时间段（在任何视图中），记住您选择的 date/time，然后转到您的 "month"观点。您将在 select 编辑的时间段中看到创建的事件。

当您尝试在使用资源的视图中查看事件时出现问题。您的代码没有为新事件指定 resourceId。因此，fullCalendar 不知道在哪个资源上显示事件，因此根本无法在任何 resource-aware 视图中显示它。

要解决此问题，只需获取 select 回调的 resourceObj 参数中提供的 resourceId，并将其包含在您的新事件对象中：

let event = {
  start: start,
  end: end,
  title: "test",
  resourceId: resourceObj.id
};

P.S。您还应该运行 "unselect" 在调用 "renderEvent" 之后，否则所选的时间段将在创建的事件后面的日历上保持突出显示（直到或除非用户单击其他地方）。在某些视图中，这比其他视图更明显，但看起来不正确。命令很简单：

$("#calendar").fullCalendar('unselect');

FullCalendar RenderEvent 在版本 3.9.0 中不起作用

FullCalendar RenderEvent Not working in version 3.9.0

javascript

jquery

fullcalendar

fullcalendar-scheduler

fullcalendar-3