最流行的日程编辑控件FullCalendar精华摘要

FullCalendar是一个jQuery日历插件，它使用Ajax来获取每一个月的日历事件并能够配置成使用自己的日历事件来源比如从Google Calendar获取事件。支持拖放日历中的事件，自定义点击和拖放事件。在很多项目中都会用到这个控件。

比如我之前做过的日报管理功能，课程表功能，节目表功能等。

想当年（大概是07年的时候，我们做工作日历功能的时候，还自己开发了一套日周月的视图功能，不过和这个比还是逊色不少的。那个时候jquery可能还刚有人知道）

下面把其中比较重要的方法，属性和事件简单介绍一下：

该控件有
month,basicWeek,basicDay,agendaWeek,agendaDay（agenda带有具体的24小时的时间格子）是5种不同的视图

 

（一）方法

 1.把日历绑定到一个id的东西上
$('#id').fullCalendar('render');

2.取得视图对象

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

3.改变当前视图
.fullCalendar('changeView',viewName)

4.gotoDate:调用方式:$(‘.selector’).fullCalendar(‘gotoDate’, year[, month[, date]])调用方法名为gotoDate,后面三个参数传递年, 月, 日,年是必选, 其他两个可选.   其中的月month参数,是以0开始计算的,也就是说一月对应0.  该方法也可以使用单参数的方式调用,传递一个javascript的Date对象.

 

5.格式化日期: $.fullCalendar.formatDate(date,formatString[, options]),通过指定的格式格式化一个日期,返回一个字符串.   options选项是一个对象,其中设置本地化变量支持的属性值.比如{monthNames : [‘一月’, ‘二月’,……], dayNames: [‘周日’, ‘周一’,…..]}

6.解析日期: $.fullCalendar.parseDate(string):将一个字符串格式成一个javascript的Date对象,这个string可以是ISO8601,IETF, UNIX时间戳三种格式.

 

（二）属性

每行的时间间隔
slotMinutes:10
滚动条滚动到得起始时间
firstHour: 7
每天从几点起开始显示
minTime:7
minTime:'7:30'
如果加上了分钟需要设置时间间隔
每天显示到几点结束
maxTime:24
maxTime:'23:10'

(三).回调方法
当点击某一天时触发此操作
dayClick:function( date, allDay, jsEvent, view ) { }

当点击某一个事件时触发此操作
eventClick:function( event, jsEvent, view ) { }

当鼠标悬停在一个事件上触发此操作
eventMouseover:function( event, jsEvent, view ) { }
当鼠标从一个事件上移开触发此操作
eventMouseout:function( event, jsEvent, view ) { }

 

具体参照：

http://arshaw.com/fullcalendar/