Fullcalendar中文文档：Views（视图）

King

Fullcalendar提供月/周/日等基本视图，还有列表视图、自定义视图等多种视图，提供了视图间的交互API，丰富了日历的展现形式，使用也非常简单。

Available Views 可用视图

FullCalendar有多种不同的视图，用来显示日期和事件，包括以下9种视图：

month：月视图

basicWeek：基础周视图

basicDay：基础天视图

agendaWeek：议程周视图

agendaDay：议程天视图

listYear：年份列表

listMonth：月份列表

listWeek：周列表

listDay：天列表

高级日程表中还可以包含以下视图：

timelineDay

timelineWeek

timelineMonth

timelineYear

你可以定义header的按钮让用户可以切换视图，可以使用defaultView设置初始的视图。

Custom Views 自定义视图

除了直接使用可用的视图之外还可以自定义视图。

如果您想要使用其中一种现有的视图类型，例如“basic”或“agenda”，但以自定义区间显示，例如4天而不是1周或1天，请执行类似操作：

$('#calendar').fullCalendar({
    header: {
        center: 'month,agendaFourDay' // buttons for switching between views
    },
    views: {
        agendaFourDay: {
            type: 'agenda',
            duration: { days: 4 },
            buttonText: '4 day'
        }
    }
});

知识兔

以上代码中，自定义了一个视图叫agendaFourDay，类型定义为agenda，设置时间范围为4天，视图切换的按钮文字显示“4 day”。查看demo

对于高级开发人员，fullcalendar提供与JavaScript代码的灵活性定制视图API。采用面向对象的编程原则，提供可以继承基类View，实现或重写每一个具体的行为作为一种方法，然后注册新的fullcalendar类。

Generic Views 通用视图

通用视图类似于自定义视图，你可以完全控制显示日期范围，而且定义非常简单。当你需要自定义日期范围显示视图时可以使用通用视图：

$('#calendar').fullCalendar({
    defaultView: 'timeline', // or 'agenda' or 'basic'

    duration: { days: 3 }
    // can also specify:
    // - visibleRange
    // - dayCount
});

知识兔

View-Specific Options 视图特定选项

如果要指定仅适用于特定视图的选项，请在视图选项中以视图名称为依据，指定单独的选项对象。

$('#calendar').fullCalendar({
    header: { center: 'month,agendaWeek' }, // buttons for switching between views

    views: {
        month: { // name of view
            titleFormat: 'YYYY, MM, DD'
            // other view-specific options here
        }
    }
});

知识兔

同样的方式也适用于其他视图。查看demo

View Object 视图对象

View Object包含当前视图（View）的信息，传递给回调函数。由以下属性构成：

name：当前视图的名称，Available Views中的一个，字符串类型

title：头部显示的文字（例如”September 2009″ 或者 ”Sep 7 – 13 2009″）

start：Date对象，月/周视图的第一天或者天视图所表示的那一天

end：Date对象，月/周视图的最后一天的下一天或者天视图所表示的那一天的下一天，例如2009年10月的月视图，end是11月1日

intervalStart：时间间隔的开始的某一时刻，在月视图中，这将是本月的开始。

intervalEnd：时间间隔结束时间，在月视图中，这将是最后一天。

defaultView - 默认视图

当日历初始加载时的默认视图。默认值是month，它可以是可用视图中的任意值。

getView

返回当前视图的View Object。

.fullCalendar( 'getView' )

知识兔

如果你想获取当前视图的Title或者start，end属性时可以使用，例如：

var view = $('#calendar').fullCalendar('getView');
alert("The view's title is " + view.title);

知识兔

changeView

切换到另一个视图。

.fullCalendar( 'changeView', viewName, dateOrRange )

知识兔

viewName必须是Available Views中的视图名字符串。

$('#calendar').fullCalendar('changeView', 'agendaDay');

知识兔

如果要同时切换到新视图导航到新日期，则可以指定日期参数：

$('#calendar').fullCalendar('changeView', 'agendaDay', '2017-06-01');

知识兔

查看demo

如果你使用Generic Views, 你可以同样改变visibleRange：

$('#calendar').fullCalendar('changeView', 'agendaDay', {
    start: '2017-06-01',
    end: '2017-06-08'
});

知识兔

What is List View?

列表视图是一种在平面列表中显示事件的可用视图。只显示事件的几天。

列表视图在特定时间间隔内显示事件。有4个预设列表视图：listDay，listWeek，listMonth和listYear。如果您想要不同的时间间隔，您可以使用“list”类型创建自定义视图。

如果在特定时间间隔内没有事件，则显示noEventsMessage。

ListView

查看demo

listDayFormat

设置列表视图中左侧标题的格式化日期文本，可以是字符串也可以是布尔值，如果为false，则不显示。

listDayAltFormat

设置列表视图中右侧日期格式，可以是字符串也可以是布尔值，如果为false，则不显示。

noEventsMessage

如果在给定的日期范围内没有任何事件，则在列表视图中显示的文本，默认是："No events to display"。

计算机

2022年3月13日