自定义 fullCalendar js“显示更多”链接行为

Question

我正在将 fullCalendar V6.1.8 ( https://fullcalendar.io/ ) 集成到我的应用程序中。在“dayGrid”视图中，我想自定义“显示更多”按钮的行为（默认情况下打开模式）

function setView() {
    const width = $(window).width();
    if (width < 768) {
        return 'dayGrid';
    } else {
        return 'timeGridWeek';
    }
}

function setDayHeaderFormat() {
    const width = $(window).width();
    if (width < 768) {
        return { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric', omitCommas: true };
    } else {
        return {weekday: 'short', day: 'numeric', month: 'numeric' };
    }
}

function setMoreLinkContent(currentLanguageCode) {
    if (currentLanguageCode == 'de') {
        return 'mehr slots';
    }
    else if (currentLanguageCode == 'en') {
        return 'more slots';
    }
    else {
        return '+ de créneaux';
    }
}

$(document).bind("jFormEvents.init", function (e, online) {


    var calendarDiv = $("div.Content.calendar");
    var recapPage = $("h3.validationPage");

    if ($(calendarDiv).length && !$(recapPage).length) {

        var lang = $("input[name='rdv|language;string']").val() ? $("input[name='rdv|language;string']").val() : 'FR';
        var duration = parseInt($("input[name='campaign|duration;string']").val());

        var guCalendar = new GuFullCalendar.GuCalendar(calendarDiv.get(0), {
            campaignCodeEl: 'input[name="campaign|code;string"]',
            addressCodeEl: 'input[name="address|code;string"]',
            durationEl: 'input[name="campaign|duration;string"]',

            rdvDateEl: 'input[name="rdv|date;string"]',
            rdvHourEl: 'input[name="rdv|hour;string"]',
            rdvDurationEl: 'input[name="rdv|duration;string"]',
            useModal: true,

            mainZoneEl: '#main_zone',

            calendarInfoEl: '.calendar-infos',

            canAddEvent: function(date) {
                var start=date.date + 'T' + '00:00:00';
                var dateMeeting = Date.parse(start);
                var todayAtMidnight = new Date();
                todayAtMidnight.setHours(0,0,0,0);
                var compareDate = dateMeeting - todayAtMidnight.getTime();
                var dateApply = compareDate / (1000 * 60 * 60);

                var todayAt20 = new Date();
                todayAt20.setHours(20,0,0,0);
                var now = new Date();
                
                var nbDaySupp = 1;
                if (now >= todayAt20) {
                    nbDaySupp = 2;
                }
                
                return dateApply >= (24*nbDaySupp);
            },

            locale: lang,

            /*
            headerToolbar: {
                start: 'prev,next today',
                center: 'title',
                end: ''
            },
             */
            headerToolbar: {
                start: 'prev',
                center: 'today',
                end: 'next'
            },
            // Set initial view depending on the screen size
            initialView: setView(),
            height: 'auto',
            dayMaxEvents: 5,
            editable: false,
            eventLimit: true, // allow "more" link when too many events
            timeFormat: '',
            displayEventTime: true,
            //initialDate: today,
            slotDuration: {
                minutes: duration
            }, // The frequency for displaying time slots.
            slotLabelInterval: {
                minutes: (duration < 20 ? 30 : 60)
            }, // The frequency that the time slots should be labelled with text.
            allDaySlot: false, // Determines if the “all-day” slot is displayed at the top of the calendar.
            slotEventOverlap: false, // Determines if timed events in agenda view should visually overlap.
            forceEventDuration: true,
            defaultTimedEventDuration: {
                minutes: duration
            },
            eventTimeFormat: { // like '14:30:00'
                hour: '2-digit',
                minute: '2-digit',
                meridiem: false
            },
            displayEventEnd: true,
            listDayFormat: {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                weekday: 'long'
            },
            listDaySideFormat: false,
            slotMinTime: "08:00:00",
            slotMaxTime: "19:00:00",
            weekends: false,
            navLinks: true,
            listDayAltFormat: false,
            dayHeaderFormat: setDayHeaderFormat(),
            moreLinkContent: setMoreLinkContent(),
            moreLinkClick: function() {
                console.log(this)
                this.setOption('dayMaxEvents', 10);
            },
            //Change view when resizing the window
            windowResize: function() {
                console.log(this)
                this.changeView(setView());
                this.setOption('dayHeaderFormat', setDayHeaderFormat());
            }
        });

        guCalendar.render();
        
    }
});

这是我创建的配置。按照官方文档，我使用了“moreLinkClick”属性，它可以接受回调函数来自定义其行为。这里的问题是关键字“this”引用了窗口对象而不是日历，所以我收到一条错误消息说“setOption”不是函数。 Rq：你可以看到我在“windowResize”属性中使用了相同的方法，并且它工作得很好（“this”引用了日历）

我的主要目标是覆盖默认行为，即打开包含当天所有时间段的模式。所需的行为是显示日历本身中的所有插槽，而不是在模态中

我尝试了箭头功能

moreLinkClick: () => {
                console.log(this)
                this.setOption('dayMaxEvents', 10);
            },

并尝试将其绑定到 Calnedar：

moreLinkClick: function() {
                console.log(this)
                this.setOption('dayMaxEvents', 10);
            }.bind(guCalendar),

但是两者都没有解决问题

Answer 1

您可以只引用日历对象而不是

this

。

如果您返回已打开的视图的名称，这将停止弹出窗口的出现，而日历将导航到该视图（当然在这种情况下意味着没有更改，因为那已经是选定的视图）。

moreLinkClick: function() {
  guCalendar.setOption('dayMaxEvents', 10);
  return "dayGridMonth";
},

演示：https://codepen.io/ADyson82/pen/dyayzVp

参考：https://fullcalendar.io/docs/moreLinkClick