Fullcalendar中文文档:Views(视图)

原创文章 作者:月光光 2017年11月01日 12:18helloweba.com 标签:Fullcalendar 

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。

查看demo

listDayFormat

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

listDayAltFormat

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

noEventsMessage

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

声明:本文为原创文章,helloweba.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/450.html

3条评论

  • 67821314

    11122233334444555556666666

  • 怪

    大佬能不能解答一下,急用

  • 怪

    能不能做一个按季度划分的视图呀!就是一年有12个月,每三个月为一个季度,分为四个季度,这个是图怎么自己定义呀?