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

[tomvanlier]

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.

[acerix]

Would you be able to post a runnable, stripped-down demonstration of the bug? Would really appreciate it because the time saved reproducing will be time spent fixing.

[tomvanlier]

Would this pen be what you are desiring ?

https://codepen.io/tom-van-lier/pen/RmRroM

[acerix]

Thanks for the demo, confirmed. I can also see the issue without visibleRange:

https://codepen.io/anon/pen/NVRmYE?editors=0010

[tomvanlier]

I tried that too. It did seem to work with the dateincrement set on years, tried days too but was unsuccesful with that.

[Capablanca4]

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 ?

[arshaw]

related to #4568

[antonioacg]

I'm experiencing the same issue. I just like to add that when dateIncrement:{weeks: 2} is equals to duration: {weeks: 2} it works fine.

[youkoal]

Hi
Do someone know if it is fixed?
If yes should I update something else than the "timeline" add-on?
thanks

[Intrflex]

I'm currently suffering from this problem on the latest 4.3.1, when will this be solved? if that can't be answered is their a temporary workaround?

[josh4cs]

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'
}

[danaki]

I've encountered this bug too. My calendar is configured for custom 3-days view and looks like:

var calendar = new FullCalendar.Calendar(calendarEl, {
            firstDay: 3,
            themeSystem: 'bootstrap',
            defaultView: 'resourceTimeGridThreeDays',
            views: {
                resourceTimeGridThreeDays: {
                    type: 'resourceTimeline',
                    dayCount: 3,
                    buttonText: '3 days',
                    slotLabelInterval: "01:00:00",
                    slotDuration: "00:30:00",
                    selectable: true,
                }
            },
            editable: false,
            selectable: false,
            selectOverlap: false,
            select: function(info) {
                $.ajax({
                    url: "{{ path('admin_shiftplan_create') }}",
                    data: {
                        start: info.startStr,
                        finish: info.endStr,
                        workplace_id: info.resource.id
                    },
                    type: 'POST',
                    success: function (response) {
                        calendar.refetchEvents();
                    },
                    error: function (e) {
                        console.log(e);
                    }
                });
            },
            eventSources: [
                {
                    url: "/fc-load-events",
                    method: "POST",
                    extraParams: {
                        filters: JSON.stringify({})
                    },
                    failure: () => {
                        // alert("There was an error while fetching FullCalendar!");
                    },
                },
            ],
            eventRender: function(info) {
                var tooltip = new Tooltip(info.el, {
                    title: info.event.extendedProps.tooltip,
                    placement: 'top',
                    trigger: 'hover',
                    container: 'body'
                });
            },
            resourceAreaWidth: "15%",
            slotLabelFormat: [
                { day: 'numeric', month: 'long', year: 'numeric' },
                {
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: false,
                    omitZeroMinute: false,
                    meridiem: 'false',
                    omitZeroMinute: true,
                }
            ],
            slotDuration: "4:00:00",
            slotLabelInterval: "4:00:00",
            nowIndicator: true,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'resourceTimeGridThreeDays,resourceTimelineWeek'
            },
            plugins: [ 'bootstrap', 'interaction', 'resourceTimeline' ],
            timeZone: 'EET',
        });

Prev button works only to move 1 day back in history. Temporary fix from @josh4cs works.

[FelixEnd]

I had the same problem and @josh4cs fix also worked for me.
Here is a jsfiddle of my calendar view with the fix: https://jsfiddle.net/pLxtjm7s/4/

[arshaw]

this fix has been released in v5.8.0

an updated repro:
https://codepen.io/arshaw/pen/WNpLBPO?editors=0010

[SWSSolutions]

It doesn't work entirely in v5.8.0 (nor in v5.9.0). I have the following requirement: a 4 week timeline, 1 week in the past, 1 current week, 2 upcoming weeks. The buttons (Prev and Next) are working fine when you click them once. When you click on it a second time, it shows a strange behavior. For instance, clicking the Next button actually goes back instead? Maybe iam doing something wrong?

Please see codepen:
https://codepen.io/swssolutions/pen/MWooqpb?editors=0010

[oliverguenther]

It doesn't work entirely in v5.8.0 (nor in v5.9.0). I have the following requirement: a 4 week timeline, 1 week in the past, 1 current week, 2 upcoming weeks. The buttons (Prev and Next) are working fine when you click them once. When you click on it a second time, it shows a strange behavior. For instance, clicking the Next button actually goes back instead? Maybe iam doing something wrong?

Please see codepen: https://codepen.io/swssolutions/pen/MWooqpb?editors=0010

Same thing happening here with a slightly different custom view (2-week view, show the previous week and the current view, advance or retract 1 week at a time).

The first navigation works fine, then breaks apart by always moving backwards.

Here's another pen to show this behavior with our setup: https://codepen.io/swssolutions/pen/MWooqpb?editors=0010

It works whenever duration is specified, but then the visibleRange is no longer called