FullCalendar RenderEvent Не работает в версии 3.9.0
Я пытаюсь обновить мою версию 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>1 ответ
Ваш код работает нормально и довольно успешно создает событие - попробуйте: выберите период времени (в любом представлении), запомните дату / время, которое вы выбрали, а затем перейдите к представлению "месяц". Вы увидите созданное событие в выбранном вами временном интервале.
Проблема возникает, когда вы пытаетесь просмотреть событие в представлении, которое использует ресурсы. В вашем коде не указан идентификатор ресурса для нового события. Следовательно, fullCalendar не знает, на каком ресурсе показывать событие, и поэтому вообще не может отображать его в любом представлении с учетом ресурсов.
Чтобы это исправить, просто возьмите resourceId, предоставленный в resourceObj параметр select обратный вызов и включите его в ваш новый объект события:
let event = {
start: start,
end: end,
title: "test",
resourceId: resourceObj.id
};
PS вы также должны запустить "unselect" после вызова "renderEvent", иначе выбранный временной интервал останется выделенным в календаре за созданным событием (до тех пор, пока пользователь не щелкнет в другом месте). В некоторых взглядах это более очевидно, чем в других, но выглядит не так. Команда просто:
$("#calendar").fullCalendar('unselect');