Customize fullCalendar js 'show more' link behaviour

Question

I'm integrating fullCalendar V6.1.8 ( https://fullcalendar.io/ ) into my app. in the 'dayGrid' view i want to customize the behaviour of 'show more' button ( which opens a modal by default)

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

this the configuration i created. Following the official documentation i used the 'moreLinkClick' property which can accept a callback function to customize its behaviour. The problem here is that the key word 'this' references the window object and not the calendar, so i got an error saying 'setOption' is not a function. Rq: you can see i used the same approach in the 'windowResize' property and it work perfectly ('this' references the calendar)

My main goal is to override the default behaviour which opens a modal with all time slots for the current day. The desired behaviour is to display all the slots in the calendar itself not in a modal

i tried arrow function

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

and tried binding this to the Calnedar:

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

but both didn't fix the issue

Answer 1

You can just reference the calendar object instead of this.

And if you return the name of the view you're already on, this will stop the popup appearing and instead the calendar will navigate to that view (which of course in this case means no change because that's already the selected view).

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

Demo: https://codepen.io/ADyson82/pen/dyayzVp

Refernce: https://fullcalendar.io/docs/moreLinkClick