2

i'm trying to upgrade my fullCalendar version to the latest ( 3.9.0 ) but i can't seams to make the renderEvent function work. The event simply does not render. I'm also using the latest version of the scheduler plugin ( 1.9.3 )
I tried adding events using the $('#calendar').fullCalendar('renderEvent', event, true) like I used to, but now it does not seams to work.
I also tried $('#calendar').fullCalendar('addEventSource', event) followed by $('#calendar').fullCalendar('refetchEventSources') nothing seams to be working.
Here is my code.

$(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. use the timeline day for a more efficient test.

4

1 回答 1

1

您的代码运行良好，并且非常愉快地创建了事件 - 尝试一下：选择一个时间段（在任何视图中），记住您选择的日期/时间，然后转到您的“月”视图。您将在您选择的时间段中看到创建的事件。

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

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

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

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

$("#calendar").fullCalendar('unselect');
于 2018-03-20T21:12:31.993 回答