Custom view does not work in jquery fullcalendar

Question

Custom buttons and custom view does not work. Here is a code:

var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
    headerToolbar: {
        left: 'today,newEvent,dayGridYear,monthNew',
        center: 'title',
        right: 'prevYear,prev,next,nextYear',
    },
    customButtons: {
        myCustomButton: {
            text: 'custom!',
            click: function() {
                alert('clicked the custom button!');
            }
        }
    },
    navLinks: true,
    views: {
        monthNew: {
            type: 'month',
            duration: {months: 3},
            defaults: {fixedWeekCount: false},
            buttonText: '4 day'
        },
        dayGridYear: {
            type: 'timeline',
            buttonText: 'Year',
            dateIncrement: { years: 1 },
            slotDuration: { months: 1 },
            visibleRange: function (currentDate) {
                return {
                    start: currentDate.clone().startOf('year'),
                    end: currentDate.clone().endOf("year")
                };
            }
        }
    }
});
calendar.render();

In header toolbar I just see empty text buttons and click does not do anything.

Fullcalendar version: 5.3.2

Answer 1

There are several issues in the config:

1. "month" isn't a valid view type. dayGrid is the basic view type which shows that type of grid. Using type: 'dayGrid' will fix this.

2. You haven't defined a custom view or button called "newEvent" so that will never show properly in the header. It's unclear what the purpose of this setting is intended to be.

3. You've defined a custom button called "myCustomButton" but you haven't added an entry for it in the header, so it will never show up.

4. The timeline view requires the Scheduler premium add-on. So that will not work until you include the Scheduler JS and CSS files (and ensure you have an appropriate license for your scenario).