CODEWITHSUNDEEP
javascriptjqueryfullcalendar
Ender
Ender

Reputation: 71

How to view 2 weeks and set increment of next button to 1 week

I created a 2-weeks custom view.

timelineTwoWeeks: {
    buttonText: '2 Weeks',
    type: 'timelineWeek',
    duration: { weeks: 2 }
},

But when I click next button, start date of the view moves 2 weeks further, which is not the case I want. So how can I make it move 1 week instead of 2 weeks?

Edit: Graphical explanation just to make things clear

Upvotes: 2

Views: 1664

Answers (1)

smcd
smcd

Reputation: 3265

Fullcalendar appears to default prev,next buttons advancing by the duration displayed in the view. There doesn't seem to be a way to override it through configuration/options, so a workaround could be:

https://jsfiddle.net/a0j9v7gu/

$('#calendar').fullCalendar({
    views: {
        basicTwoWeeks: {
            buttonText: '2 Weeks',
            type: 'basic',
            duration: {
                weeks: 2
            }
        }
    },
    /* Fullcalendar doesn't appear to support advancing calendar with default prev,next buttons
        a different interval than the duration displayed by the view. So, we make our own buttons! */
    customButtons: {
        mynext: {
            text: 'Next',
            click: function() {
                var $cal = $('#calendar');
                /* change to a lesser duration view (week, day).
                    if you don't the 'next' button won't work as expected.
                    comment out following line and see
                */
                $cal.fullCalendar('changeView', 'basicWeek');
                $cal.fullCalendar('incrementDate', moment.duration(1, 'week'));
                /* pop back to two-week view */
                $cal.fullCalendar('changeView', 'basicTwoWeeks');
            },
        },
        myprev: {
            text: 'Prev',
            click: function() {
                $('#calendar').fullCalendar('incrementDate', moment.duration(-1, 'week'));
            }
        }
    },
    header: {
        left: '',
        center: 'title',
        right: 'myprev,mynext'
    },
    defaultView: 'basicTwoWeeks',
    defaultDate: '2016-10-01'
});

Upvotes: 1

Related Questions