fullcalendar: Prev button not working in custom dayGrid view when dateIncrement is shorter than duration

I am using v 4.0.2

This is the code for my custom view : ` document.addEventListener(‘DOMContentLoaded’, function () { var calendarEl = document.getElementById(‘calendar’);

        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ['interaction', 'dayGrid', 'timeGrid'],

            defaultView: 'dayGridTwoWeeks',
            views: {
                dayGridTwoWeeks: {
                    type: 'dayGrid',
                    duration: {weeks: 2},
                    dateIncrement:{weeks:1},
                    visibleRange: function (currentDate) {

                        return {
                            start: moment(currentDate).startOf('week').toDate(),
                            end: moment(currentDate).endOf('week').toDate()
                        };
                    },
                    
                }
            },

            firstDay: 1,
        calendar.render();
    });

` I basically want a two week view with the ability to shift weekwise. While this works very well for advancing a week, the previous button gets broken after one use.

When clicking on the next button, I can go back again. But still only one week, so once I move 4 weeks in the future, I can only return to 3 weeks in the future.

Moreover, the today button does not work when I move one week back.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 4
Comments: 15 (4 by maintainers)

Most upvoted comments

Its a bit of a fudge but you should be able to achieve it with the below code additions. Bootstrap plugin is required for the chevron but you could use special characters. Hope it helps

customButtons: {
    backButton: {
        click: function () {
             calendar.incrementDate({ days: -1 });
        }
   }
},
bootstrapFontAwesome: {
    backButton: 'fa-chevron-left'
},
header: {
    left: 'today backButton,next',
    center: 'title',
    right: 'resourceTimelineThreeDays,resourceTimelineFiveDays,resourceTimelineSevenDays'
}

josh4cs on Sep 4, 2019

Hello,

I have a similar problem using the plugin timeGrid in v4.2.0

I basically want to display a 3 weeks calendar with the ability to shift forward and backward by one week. It works fine when moving forward but moving backward works only the first time. Afterward, if you click on the next buttons, you move 2 weeks forward.

Here an example to demonstrate the problem : https://codepen.io/capablanca4/pen/Ybgwyw

To reproduce the problem first select the 3 weeks view (3 week button), click on the next, and then twice on the previous button.

How to avoid this bug ?

Capablanca4 on Jun 4, 2019