#javascript #fullcalendar #fullcalendar-5
#javascript #полный календарь #полный календарь-5
Вопрос:
Я использую полный календарь версии 5.3.0. Что я хочу сделать, у меня есть два источника для календаря.
- Изначально, когда календарь отображается в первый раз, я должен отображать события из обоих источников.
- У меня есть выпадающий список, если он изменяется после загрузки календаря, тогда я должен показывать события только из выпадающего списка. источник.
- Если пользователь изменяет тип представления или нажимает «Предыдущий» / «Следующий», тогда я должен показывать события только из источника по умолчанию. Из вышеупомянутых трех пунктов я закончил с первым и вторым, но я застрял на третьем пункте. Я не могу понять, как снова изменить источник календаря из выпадающего списка на значение по умолчанию при изменении типа представления или при предыдущем / следующем нажатии кнопки. Ниже приведен мой код.
Код для начальной загрузки календаря
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendarInteraction.Draggable;
var containerEl = document.getElementById('external-events');
new Draggable(containerEl, {
itemSelector: '.fc-event'
});
var calendarEl = document.getElementById('calendar');
calendar = new Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid', 'timeGrid'],
timeZone: 'UTC',
defaultView: 'timeGridDay',
navLinks: true,
fixedWeekCount: false,
weekNumbers: true,
editable: true,
droppable: true,
nowIndicator: true,
columnFormat: 'ddd D/M',
weekNumberTitle: 'Week ',
lazyFetching: false,
eventBackgroundColor: '#ffdfc2',
eventBorderColor: 'transparent',
eventTextColor: '#bf6109',
displayEventEnd: true,
showNonCurrentDates: false,
noEventsMessage: InformationMessages('23'),
slotDuration: '00:15:00',
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
eventSources: [fcSources.default, fcSources.dropdown],
timeFormat: timeFormatOnSettings,
slotEventOverlap: false,
eventRender: function (info) {
if (info.view.type === 'timeGridDay') {
var time = info.el.querySelector('.fc-time');
var span = document.createElement("span");
span.className = 'fullcalendar-event-close';
var node = document.createTextNode("X");
span.appendChild(node);
time.appendChild(span);
info.el.querySelector(".fullcalendar-event-close").addEventListener("click", function () {
info.event.remove();
});
}
},
eventDidMount: function (info) {
if (info.view.type === 'dayGridMonth') {
console.log('dayGridMonth');
}
if (info.view.type === 'timeGridWeek') {
console.log('timeGridWeek');
}
if (info.view.type === 'timeGridDay') {
console.log('timeGridDay');
}
}
});
calendar.render();
Выпадающий список из двух источников и по умолчанию
var fcSources = {
dropdown: {
// dropdownsource code
},
default: {
// defaultsource code
}
};
Удаление всех источников при изменении выпадающего списка, а затем добавление только выпадающего источника, а затем повторная выборка событий
$('.js-example-basic-single').change(function () {
var eventSource = [];
eventSource = calendar.getEventSources();
$.each(eventSource, function (key, value) {
value.remove();
});
calendar.addEventSource(fcSources.dropdown);
calendar.refetchEvents();
});
Я пытался изменить исходный код с помощью eventDidMount, но он не запускается, console.log () ничего не регистрирует.
Комментарии:
1. изменение исходного кода с помощью eventDidMount не имеет смысла — это происходит во время загрузки событий из источника, и тогда слишком поздно решать, какой источник использовать! Эти хуки: fullcalendar.io/docs/view-render-hooks запускается при изменении представления. Однако остерегайтесь бесконечных циклов, поскольку добавление источника события может привести к повторному отображению представления, что заставит вас снова выбрать источник события, что приведет к повторному отображению представления и т.д. Пишите свой код тщательно, чтобы он не добавлял / удалял источники событий без необходимости.
2. @ADyson Я использовал перехват viewDidMount вместо eventDidMount следующим образом, но я думаю, что этот перехват у меня не работает, поскольку я ничего не вижу в консоли после изменения вида или нажатия кнопки предыдущий / следующий. ‘viewDidMount: function (arg) {console.log(arg);}’. Есть ли что-нибудь еще, что мне нужно с этим сделать.
3. viewDidMount должен нормально работать таким образом — демо: codepen.io/ADyson82/pen/qBbMJRv . Обратите внимание, что он запускается только при переключении представлений, а не при нажатии next / prev (поскольку для этого не требуется повторный рендеринг представления).
4. Почему вам нужно сбросить исходный код после того, как вы когда-либо использовали prev / next? Это звучит раздражающе для пользователя. Если бы я, как пользователь, использовал выпадающий список для фильтрации событий, я бы ожидал, что это сохранится до следующего изменения выпадающего списка, а не будет сброшено только потому, что я пытаюсь перейти к другой дате в календаре или просмотреть события в списке вместо таблицы. Это привело бы в бешенство. Лично я думаю, что это не очень хорошее требование.
Ответ №1:
Наконец-то я нашел решение. Я сделал это с помощью datesSet. datesSet вызывается каждый раз, когда мы нажимаем на предыдущую / следующую кнопку или если изменяется тип представления. Для получения дополнительной информации, пожалуйста, посетите здесь. Ниже приведен мой код.
datesSet: function (dateInfo) {
var eventSource = [];
eventSource = calendar.getEventSources();
$.each(eventSource, function (key, value) {
value.remove();
});
calendar.addEventSource(fcSources.default);
calendar.refetchEvents();
}