Question

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

＆＃13;

$(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) {
                }
            });

});

＆＃13;

<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>

＆＃13;

＆＃13; 附：使用时间表日进行更有效的测试。

Answer 1

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

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

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

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

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

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

FullCalendar RenderEvent在V3.9.0中不起作用

1 个答案: