如何更改完整的日历视图

Posted 2023-05-09

【中文标题】如何更改完整的日历视图

【英文标题】：How to change full calendar views

【发布时间】：2014-07-23 06:53:40

【问题描述】：

我正在使用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 中实现这一点？ 谢谢。

【问题讨论】：

能否包含初始化日历的代码？

您好，请查看已编辑的问题。谢谢。

【参考方案1】：

要设置初始视图，请将“defaultView”属性添加到您的日历初始化代码中。可能的视图类型有：月（默认）、基本周、基本日、议程周和议程日。我认为最接近您的屏幕截图的是议程周刊。查看每种类型的示例here。

初始加载示例：

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

事件驱动示例： 要根据某些事件（例如单击按钮）更改视图，请调用控件的“changeView”方法并将您想要查看的视图的名称传递给它。

$('#buttonName').click(function () $('#calendar').fullCalendar('changeView', 'month'); );

【讨论】：

感谢您的回答....实际上，我正在为每一行查找日历左侧的资源视图。任何建议我们如何实现这一目标。我在谷歌上搜索但没有找到任何解决方案。