CODEWITHSUNDEEP
javascriptfullcalendarfullcalendar-4
puntable
puntable

Reputation: 337

Change view when windowResize triggers

I am trying to update Fullcalender view, when the calender resizes.

I am using windowResize event.

This is how it looks now.

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('kt_calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid', 'list' ],
        defaultView: 'timeGridWeek',
        views: {
            timeGridWeek: {
                buttonText: 'week',
                dayCount: 4,
                duration: { days: 4 },
            },
            test: {
                buttonText: 'week',
                dayCount: 1,
                duration: { days: 1 },
            },
            abc: {
                buttonText: 'week',
                dayCount: 2,
                duration: { days: 2 },
            }
        },
        windowResize: function(view) {
            this.changeView("test");
        }
    });
    calendar.render();
});

windowResize does trigger as it should, but i get this error:

The FullCalendar view "test" does not exist. Make sure your plugins are loaded correctly

Am I not defining the custom views correct or what am i missing?

Upvotes: 1

Views: 173

Answers (1)

ADyson
ADyson

Reputation: 61984

After a bit of testing it appears that if you correctly define your custom view with the type property, as documented at https://fullcalendar.io/docs/v4/custom-view-with-settings, then it doesn't throw the error.

    views: {
        timeGridWeek: {
            buttonText: 'week',
            dayCount: 4,
            duration: { days: 4 },
        },
        test: {
            type: 'timeGrid',
            buttonText: 'week',
            dayCount: 1,
            duration: { days: 1 },
        },
        abc: {
            type: 'timeGrid',
            buttonText: 'week',
            dayCount: 2,
            duration: { days: 2 },
        }

(N.B. It shouldn't be needed for the timeGridWeek one since you've simply overwritten the name of a view which is already available in the timeGrid plugin).

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

Upvotes: 1

Related Questions