Search code examples
javascriptfullcalendarfullcalendar-5

Fullcalendar v5 first day in dayGridMonth not working

I want set current date visible first. But it isn't working. Documentation https://fullcalendar.io/docs/view-object

    var calendarAll = new FullCalendar.Calendar(calendarEl, {
        headerToolbar: {
            left: 'today',
            center: 'prev,title,next',
            right: 'month30,dayGridMonth,timeGridWeek'
        },
        initialView: 'month30',
        views: {
            month30: {
                type: 'dayGridMonth',
                buttonText: 'month30',
                //activeStart: new Date(), //Not working
                visibleRange: function(currentDate) {
                    var startDate = new Date(currentDate.valueOf());
                    var endDate = new Date(currentDate.valueOf());
                    startDate.setDate(startDate.getDate() - 1);
                    endDate.setDate(endDate.getDate() + 29);
                    return { start: startDate, end: endDate };
                }
            }
        },
    });

How can I fix it? Fullcalendar v5, without jquery.

Solution

  • The "month" view provided by fullCalendar does not have this flexibility - it always starts at the beginning of the month, like a traditional paper calendar. IMHO it would be confusing to many users if it appeared differently.

    Other types of view are more flexible - they will respond to the visibleRange setting if you do not specify the time range in the view name, such as if you specify timeGrid rather than timeGridWeek for example.