Fullcalendar: How to show next two month of next year in timeline view

Question

I'm using Fullcalendar and I need to show all the current year plus the next two month of the next year using a timeline view.

If I use the visibleRange option in this way:

visibleRange: function (currentDate) {
return {
    start: currentDate.year()+'-01-01',
    end: currentDate.year()+1 + '-02-28',
};}

The calendar show the correct period but the navigation button 'next' stop working.

I also tried to use the duration option instead but I don't know how to set the "start" period.... the calendar start always at current date.

I think there is a solution that not require the writing of a full custom view to do so.

Answer 1

The solution to this involves setting the dateIncrement value - this tells the next/prev buttons how far to increase/decrease the visible dates by when you customise the view range like this.

Here's an example. N.B. I've used momentJS's built-in functions, rather than string concatenation, to provide a more robust and neater way of setting the visible range. It's probably also a good idea to set the slotDuration to something that won't produce a massive long calendar. I've used a 1 month duration as an example, but obviously you can configure it to whatever you need.

$('#calendar').fullCalendar({
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
    defaultView: 'timeline',
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'timeline'
    },
    slotDuration: { months: 1 },
    dateIncrement: { years: 1 },
    visibleRange: function (currentDate) {
        return {
            start: currentDate.clone().startOf('year'),
            end: currentDate.clone().startOf('year').add({ years: 1, months: 2}),
        };
    },
    //...etc
});

The dateIncrement setting is documented here: https://fullcalendar.io/docs/current_date/dateIncrement/