fullcalendar框架

转自<http://blog.csdn.net/francislaw/article/details/7740630>

fullcalendar官网文档链接<http://arshaw.com/fullcalendar/docs/>

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-

 

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对象

this关键字指代为<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，function，json feed，google calendar feed三种类型

   array类型

Eventsource:
{
events: [
{ title: 'Event1',
    start: '2011-04-04' },
{ title: 'Event2',
start: '2011-05-05' } // etc... ],
 color: 'yellow', // anoption!
textColor: 'black' // an option!
}

   function类型

{
    events: function(start, end, callback) {
        // ...
    },
    color: 'yellow',   // an option!
    textColor: 'black' // an option!
}

 JSON feed类型

   

{
    url: '/myfeed.php',
    color: 'yellow',   // an option!
    textColor: 'black' // an option!
}

 Google Calendar feed类型

 

{
    url: 'http://www.google.com/your_feed_url/',
    color: 'yellow',   // an option!
    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传递给服务器的start参数名

endParam同上

lazyFetching

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

loading (callback)function( isLoading, view )

当调用ajax获取event是触发。

updateEvent (method)

在客户端更新event并在页面上重新描绘

clientEvents (method)

获取客户端保存的所有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.