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控制，和server无需相关联。

事件则是日历功能的扩展，能够把事件理解为一个个会议安排。这些会议安排一般是保存在server的，在每次页面载入时，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-

firstDay：每周開始的日期：0为周日

isRTL：是否从右至左组织日历

weekends：是否显示周末

weekMode：周的显示模式：

fixed：每月始终显示6周

liquid：周数不定，每周的高度可变，整个日历高度不变

variable：周数不定，每周的高度固定，整个日历的高度可变

height整个日历的高度（包含header和content）

contentHeight内容高度：

aspectRatio宽和高的比例

$('#calendar').fullCalendar('option','aspectRatio', 1.8); 能够动态设置

viewDisplay (callback)函数回调，每次view显示时均会调用

function( view ) { }

View是view对象

windowResize (callback)函数回调，每次窗体大小改变时调用，

viewDisplay

render (method)立马显示view

destroy (method)释放calendar，包含相关数据

defaultView：日历初始化时的视图，默觉得month

4.3、视图对象viewObject

name	可用的5个视图名之中的一个
title	视图部分的title 2012.9.1
start	当天view開始的第一天
end
visStart	Visible Start Day
visEnd

在相关方法回调中均会有次对象

4.4、获取视图对象

.fullCalendar( 'getView' )

切换视图

.fullCalendar( 'changeView', viewName )

4.5、议程相关——控制日程相关的视图的显示信息

allDaySlot是否显示全天日程

allDayText显示的文字

axisFormat日期显示的格式

slotMinutes间隔时间

defaultEventMinutes默认的事件持续事件

firstHour在日程view里可见的起始时间，可通过滚动栏滚动到在此时间之前的时间

minTime整日日程的起始时间

maxTime整日日程的结束时间

4.6、日期相关

year日历载入时的年份

month日历载入时的月份（从0開始）

date日历载入时在月份的天数（对周视图和日视图有效）

prev (method)日历跳转到前一天

next (method)日历跳转到后一天

prevYear (method)日历跳转到前一年

nextYear (method)日历跳转到后一年

today (method)日历跳转到当前日期

gotoDate (method)日历跳转到指定日期

incrementDate (method)日历向前（向后）跳转一段时间

getDate (method)获取日历的当前日期 Date类型

4.7、时间和文本的自己定义

timeFormat每一个事件默认显示的时间格式

columnFormat每一个视图列名显示的格式、

{ month: 'ddd', // Mon

week: 'ddd M/d', // Mon9/7

day: 'dddd M/d' // Monday9/7 }

titleFormat每一个视图里title显示的格式

{ month: 'MMMM yyyy', // September 2009

week: "MMM d[ yyyy]{'—'[ MMM] d yyyy}", // Sep 7 - 13 2009

day: 'dddd, MMM d, yyyy'// Tuesday, Sep 8, 2009 }

buttonText视图里每一个button显示的文字

{ prev: ' ◄ ', // left triangle

next:' ► ', // right triangle

prevYear:'&nbsp;&lt;&lt;&nbsp;', // <<

nextYear:'&nbsp;&gt;&gt;&nbsp;', // >>

today: 'today',

month: 'month',

week: 'week',

day: 'day' }

monthNames月的全称

monthNamesShort月的简称

dayNames星期的全称

dayNamesShort星期的简称

4.8、相关点击事件

dayClick (callback)当某天被点击时触发

function( date, allDay, jsEvent, view ) { }

date：当前点击到的日期

allDay ：是否是全天性的

jsEvent：底层的JS事件

view ：当前的view对象

thiskeyword指代为<td>

eventClick (callback)当一个事件给点击时触发

function( event, jsEvent, view ) { }

event ：当前的event对象

jsEvent ：底层的JS事件

view ：当前的view

this：指代的<td>里的<div>元素

eventMouseover (callback)鼠标滑动到事件上触发，同eventClick类似

eventMouseout (callback)鼠标离开到事件上触发，同eventClick类似

4.9、选中相关：当点击或者拖拽到相关位置时，非否选中相应元素

selectable是否选中相应元素

selectHelper

在日程表相关的view里，当选中相应时刻时，是否显示相关信息

unselectAuto

当点击页面日历以外的位置时，是否自己主动取消当前的选中

unselectCancel

指定哪些元素不会清空当前的选中，以JQUERY选择器的方式指定 '#someId'

select (callback)被选中时的函数回调

function( startDate, endDate, allDay, jsEvent, view )

unselect (callback)选中被取消时的回调

select (method)选中某个时间

.fullCalendar( 'select', startDate, endDate, allDay )

unselect (method)取消选中

.fullCalendar( 'unselect' )

4.10、Event相关

EventObject事件对象

id	可选，事件唯一标识，反复的事件具有同样的
title	必须，事件在日历上显示的title
allDay	可选，是否是整日事件
start	必须，事件的開始时间
end	可选，结束时间
url	可选，当指定后，事件被点击将打开相应url
className	指定事件的样式
editable	是否可拖拽
source	指向次event的eventsource对象
color	背景和边框颜色
backgroundColor	背景颜色
borderColor	边框颜色
textColor	文本颜色

EventSource Object

EVENTS:在日历界面里，參数event的对象：分array，json feed，function三种类型

Eventsource:

{

events: [

{ title: 'Event1',

start: '2011-04-04' },

{ title: 'Event2',

start: '2011-05-05' } // etc... ],

color: 'yellow', // anoption!

textColor: 'black' // an option!

}

eventsource可选的配置选项

className	指定事件的样式
editable	是否可拖拽
source	指向次event的eventsource对象
color	背景和边框颜色
backgroundColor	背景颜色
borderColor	边框颜色
textColor	文本颜色

events (asan array)数组形式组织的事件集

$('#calendar').fullCalendar({

events: [

{

title  : 'event1',

start  : '2010-01-01'

},

{

title : 'event2',

start  : '2010-01-05',

end    : '2010-01-07'

},

{

title  : 'event3',

start  : '2010-01-09 12:30:00',

allDay : false //will make the time show

}

]

});

events (asa json feed)JSON源方式获取的events

每次当view的时间改变时，均会获取json。当中start和end为相应view的start和end，插入_是默认不訪问浏览器缓存。可通过cache:true来默认读取浏览器缓存

$('#calendar').fullCalendar({

events: '/myfeed.php'

});

会被转换为例如以下url请求

/myfeed.php?start=1262332800&end=1265011200&_=1263178646

events (asa function)

作为方法的形式获得event

$('#calendar').fullCalendar({

events: function(start,end, callback) {

$.ajax({

url:'myxmlfeed.php',

dataType: 'xml',

data: {

// ourhypothetical feed requires UNIX timestamps

start:Math.round(start.getTime() / 1000),

end: Math.round(end.getTime()/ 1000)

},

success:function(doc) {

var events =[];

$(doc).find('event').each(function() {

events.push({

title:$(this).attr('title'),

start:$(this).attr('start') // will be parsed

});

});

callback(events);

}

});

}

});

start和end同之前開始和结束时间（默觉得-1970的毫秒）

callback为当获取到event后，会调用的改回调函数，把数据放入fullcalendar里的events里。

eventSources

能够放置多个eventSource（events）

$('#calendar').fullCalendar({

eventSources: [

'/feed1.php',

'/feed2.php'

]

});

allDayDefault

当event object里的allDay为指定时，其默认值

ignoreTimezone忽略timeZone

2008-11-05T08:15:30-05:00

startParam传递给server的start參数名

endParam同上

lazyFetching

当view改变时，是否从缓存信息获取event。比方从月视图切换到周视图，默觉得是

loading (callback)function( isLoading, view )

当调用ajax获取event是触发。

updateEvent (method)

在client更新event并在页面上又一次描绘

clientEvents (method)

获取client保存的全部events对象

.fullCalendar( 'clientEvents' [, idOrFilter ]) -> Array

removeEvents (method)

删除event并又一次描绘

refetchEvents (method)

又一次获取events并又一次描绘

addEventSource (method)

加入eventSource，并立马在页面上描绘

.fullCalendar( 'addEventSource', source )

removeEventSource (method)

同上

4.11、事件描绘（相应于整个callendar里的事件）

eventColor

eventBackgroundColor

eventBorderColor

eventTextColor

eventRender (callback)

当描绘事件时触发

function( event, element, view ) { }

event为改事件，element为用来渲染改事件的div元素

eventAfterRender (callback)

同上

renderEvent (method)

.fullCalendar( 'renderEvent', event [, stick ] )

rerenderEvents (method)

.fullCalendar( 'rerenderEvents' )

同refetchEvents

4.12、拖拽事件

须要加入JQUERY UIDraggable  插件，并把editable设置为true。相关属性和方法同事件类似

editable

Determines whether the events on the calendar can be modified.

disableDragging

Disables all event dragging, even when events are editable.

disableResizing

Disables all event resizing, even when events are editable.

dragRevertDuration

Time it takes for an event to revert to its original position afteran unsuccessful drag.

dragOpacity

The opacity of an event while it is being dragged.

eventDragStart (callback)

Triggered when event dragging begins.

eventDragStop (callback)

Triggered when event dragging stops.

eventDrop (callback)

Triggered when dragging stops and the event has moved to a differentday/time.

eventResizeStart (callback)

Triggered when event resizing begins.

eventResizeStop (callback)

Triggered when event resizing stops.

eventResize (callback)

Triggered when resizing stops and the event has changed in duration.

4.13、从日历外拖拽事件到日历中

额外需求：

①须要jquery-ui相关控件的支持jquery-ui-1.8.17.custom.min.js

②日历的dropple属性需设置为true

基本思路

①在日历胖构建好用来拖拽的元素<div>

②设置对应div的drop操作

$('#external-events div.external-event').each(function() {

// create an Event Object

// it doesn't need to have a start or end

var eventObject = {

title: $.trim($(this).text()) // use the element's text as the eventtitle

};

// store the Event Object in the DOM element so we can get to itlater

$(this).data('eventObject', eventObject);

// make the event draggable using jQuery UI

$(this).draggable({

zIndex: 999,

revert: true,      // willcause the event to go back to its

revertDuration: 0  //  original position after the drag

});

});

③在日历中的drop回调中进行构造event并描绘

drop: function(date, allDay) { // this function is called whensomething is dropped

// retrieve the dropped element's stored Event Object

var originalEventObject = $(this).data('eventObject');

// we need to copy it, so that multiple events don't have areference to the same object

var copiedEventObject = $.extend({}, originalEventObject);

// assign it the date that was reported

copiedEventObject.start = date;

copiedEventObject.allDay = allDay;

// render the event on the calendar

// the last `true` argument determines if the event"sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)

$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

// is the "remove after drop" checkbox checked?

if ($('#drop-remove').is(':checked')) {

// if so, remove the element from the "Draggable Events"list

$(this).remove();

}

}

4.14、日期转换工具

formatDate (function)

Formats a Date object into a string.

formatDates (function)

Formats a date range (two Date objects)into a string.

parseDate (function)

Parses a string into a Date object.

parseISO8601 (function)

Parses an ISO8601 string into a Dateobject.