如何查看2周并将下一个按钮的增量设置为1周

时间:2016-10-31 07:03:46

标签: javascript jquery fullcalendar

我创建了一个为期2周的自定义视图。

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

但是当我点击下一个按钮时,视图的开始日期会进一步移动2周,这不是我想要的情况。那么如何让它在1周而不是2周内移动呢?

修改 Graphical explanation just to make things clear

1 个答案:

答案 0 :(得分:0)

Fullcalendar显示为默认prev,下一个按钮按视图中显示的持续时间前进。似乎没有办法通过配置/选项覆盖它,因此解决方法可能是:

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