fullcalendar日历控件知识点集合

1、基本语法：

       首先，fullcalendar和JQUERY一样，以面向对象的方式来组织代码。当然，这里的面向对象仅仅是指可以把整个fullcalendar理解为一个类，这个类里包括有很多的属性、方法、委托(函数回调)作为成员变量。通过为这些成员变量赋值，即可实例化出一个符合自己需求的fullcalendar实例出来，即最终在浏览器里渲染出的日历。换句话说，我们所做的绝大多数工作就是按照fullcalendar的语法约定去配置出一个符合我们需求的fullcalendar实例。除非对于极少的特殊需求，fullcalendar向我们提供的接口不足以满足，才会去修改fullcalendar本身的js文件。

       作为一种JQUERY插件，可以把fullcalendar理解为向 jquery对象集里添加了一个日历相关的对象，这个对象里相关方法、属性、的调用方式，即为fullcalendar的基本语法。整个语法分为两种：

       第一种和日历本身无关，仅仅是利用fullcalendar提供的方法来进行字符串和日期间的转换，形式如下：

       $.fullCalendar.formatDate();

       第二种则是与和配置fullcalendar实例相关的，这最终会影响到fullcalendar在浏览器里的渲染，形式如下$(‘#someId’) .fullCalendar(content);

       $(‘#someId’)将得到一个jquery对象，其中someId为你希望渲染日历的元素id。重点是后面一部分.fullCalendar(content);

Content有三种形式：

①为属性赋值 {key:value,…}

$('#calendar').fullCalendar({

weekends: false // will hide Saturdays and Sundays

});

这里即得到一个fullcalendar实例，其中weekends属性为false,即月日历不会显示周末。

 

②方法调用'methodName','para'

$('#calendar').fullCalendar('next')

 这里会调用fullcalendar实例的next方法，其结果是浏览器的日历向后翻一月(日)

 

③为方法回调赋值

$('#calendar').fullCalendar({

dayClick: function() { alert('a day has been clicked!'); }

});

这里是为日历控件的dayClick事件赋值为相应的匿名函数，其结果是日历的每日被点击时，会弹出对话框。

 

       我想先有这样一种观念更便于后面的理解，需要渲染一个fullcalendar控件时，通常是直接在实例化一个fullcalendar时即完成它的绝大多数属性 和委托的赋值，如此即得到一个会被浏览器渲染成日历的fullcalendar对象（A），当这个对象已经被渲染后，如果需要动态的修改它的相关配置，可以通过$('#calendar').fullCalendar('option','aspectRatio', 1.8); 的形式去修改。

如果需要对象A发生某些变化，也可以调用A的某些方法，比如说翻页。

 

2、内容框架

整个fullcalendar由两部分组成

日历+事件

其中日历即为由js脚本在浏览器描绘出的日历控件，这一部分完全由js控制，和服务器无需相关联。

事件则是日历功能的扩展，可以把事件理解为一个个会议安排。这些会议安排通常是保存在服务器的，在每次页面加载时，fullcalendar得到会议安排的集合，然后按照其中的日期去把事件描绘到日历对应的地方。

3、知识点概要

余下详细的知识点均为fullcalendar官方文档的翻译和组合。每一部分均按照属性、方法、函数回调的顺序来组织。通常会有相关知识点的简介，对于比较复杂或者关键的点，会有相关联的代码作为事例。同样，这些事例也出之于fullcalendar官方文档。

以下是对这所有知识点的归纳和概览

日历部分：

视图：日历的不同的展现模式。当前共有5中视图

视图的通用配置：这一部分的配置通常可以对5中视图均有效。

视图对象：fullcalendar的视图Module

获取视图对象以及跳转到指定视图的方法

议程相关：即对议程视图模式下，相关细节的配置

日期相关：涉及到日历系统里日期的显示格式，日历加载的日期，以及获取相关日期或者日历改变日期的相关方法

时间和文本的自定义设置：涉及到自定义或者本地化的相关配置大多在这里完成

鼠标的相关事件捕获：比如鼠标单击到某个特殊地方（日历中的某一天等）等触发的方法在这里配置

选中元素的配置：这一部分是来配置当鼠标点击某一日历元素时，是否选中该元素以及与此相关的事件

 

事件部分如下：

事件Module包含的信息

事件的产生：包括事件源的管理和事件的管理

事件的描绘：把一个事件描绘到浏览器的整个过程包含在这里

拖拽事件：用鼠标拖拽以移动某个时间，这需要其他JQUERY ui插件的支持

从日历外拖拽事件到日历内以添加事件：对日历内拖拽事件的扩展

4、详细知识点

4.1、合法的视图

month - see example 月视图

basicWeek - see example 周视图（一周内事件和日期的集合）

basicDay - see example (一日内事件和日期的集合)

agendaWeek - see example (周日程表)

agendaDay - see example (日日程表)

 

4.2、视图的通用配置

header

头部显示的信息，分left , center, right三个部位

合法的属性值：title,prev,next,prevYear,nextYear,today, avaibleViewName

header: {
                    left: 'title',
                    center: 'prevYear,nextYear',
                    right: 'prev,today,next,agendaDay,month'
}

 

theme

当为true时，可以配合JQUERY-UI，配置日历的皮肤

buttonIcons：http://jqueryui.com/themeroller/

buttonIcons: {
                    prev: 'circle-triangle-w',
                    next: 'circle-triangle-e'
}

注意去掉.ui-icon-

 

fir