如何更改完整日历视图

Question

我正在使用fullcalendar，目前正在显示每月视图。

我正在使用以下代码初始化完整日历。

$(document).ready(function() {

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            defaultDate: '2014-06-12',
            editable: true,
            events: [
                {
                    title: 'All Day Event',
                    start: '2014-06-01'
                },
                {
                    title: 'Long Event',
                    start: '2014-06-07',
                    end: '2014-06-10'
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: '2014-06-09T16:00:00'
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: '2014-06-16T16:00:00'
                },
                {
                    title: 'Meeting',
                    start: '2014-06-12T10:30:00',
                    end: '2014-06-12T12:30:00'
                },
                {
                    title: 'Lunch',
                    start: '2014-06-12T12:00:00'
                },
                {
                    title: 'Birthday Party',
                    start: '2014-06-13T07:00:00'
                },
                {
                    title: 'Click for Google',
                    url: 'http://google.com/',
                    start: '2014-06-28'
                }
            ]
        });

    });

但我想更改像

这样的视图

请建议如何在fullcalendar中实现此目的？ 感谢。

Answer 1

要设置初始视图，请添加＆＃39; defaultView＆＃39;属性到您的日历初始化代码。可能的视图类型有：month（默认），basicWeek，basicDay，agendaWeek和agendaDay。我认为最接近你的屏幕截图的是议程周刊。查看每种类型here的示例。

初始加载示例：

$('#calendar').fullCalendar({
        defaultView: 'agendaWeek',
        defaultDate: '2014-06-12',
        editable: true,
....the rest of your code here

事件驱动示例： 要根据某些事件（例如按钮点击）更改视图，请调用控件＆＃39; changeView＆＃39;方法并将其传递给您希望查看的视图的名称。

  

$（＆＃39;＃buttonName＆＃39;）。click（function（）{   $（＆＃39;＃calendar＆＃39;）。fullCalendar（＆＃39; changeView＆＃39;，＆＃39; month＆＃39;）; }）;