日程编辑控件FullCalendar重要方法

 

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

（一）方法

 1.把日历绑定到一个id的东西上 也就是初始化fullCalendar插件 
$('#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/