时间戳

首页 > 解决方案 > 如何在 fullcalendar V5 中更改 fullcalendar 源

javascript - 如何在 fullcalendar V5 中更改 fullcalendar 源

问题描述

我正在使用完整的日历 v5.3.0。我想做的是，我有两个日历来源。

  1. 最初，当第一次显示日历时，我必须显示来自两个来源的事件。
  2. 如果在加载日历后它发生更改，我有一个下拉列表，那么我必须仅显示来自下拉源的事件。
  3. 如果用户更改视图类型或单击上一个/下一个，那么我必须仅显示来自默认源的事件。从以上三点来看，我已经完成了第一点和第二点，但我卡在了第三点上。我无法弄清楚如何在视图类型更改或上一个/下一个按钮单击时再次将日历源从下拉列表更改为默认值。以下是我的代码。

最初加载日历的代码

     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() 没有记录任何内容。

标签： javascriptfullcalendarfullcalendar-5

解决方案

最后我找到了解决方案。我通过使用 datesSet 做到了这一点。每次单击上一个/下一个按钮或视图类型更改时都会调用 datesSet。欲了解更多信息，请访问此处。以下是我的代码。

datesSet: function (dateInfo) {
                var eventSource = [];
                eventSource = calendar.getEventSources();
                $.each(eventSource, function (key, value) {
                    value.remove();
                });
                calendar.addEventSource(fcSources.default);
                calendar.refetchEvents();
          }

推荐阅读