(jQuery,java)日程管理插件
除了羡慕Google的日程管理外,还羡慕xgCalendar,不过无奈的是google没有开源,xgcalendar没有详细的API说明,最后终于看到一个老外写的fullcalendar的插件,同样可以实现日程管理。并且带有详细的API说明
地址:http://arshaw.com/fullcalendar/
效果:
下面说明一下使用方法,即最主要的API
熟悉jQuery插件使用方式的人,一定知道是通过配置的方式让插件工作,首先就声明一下日历控件的配置
var op = { defaultView: 'agendaWeek', header: false, height: bHeight - 36,//为了去除滚动条 titleFormat: { month: "yyyy-MM-dd HH:mm:ss TT S", year: "yyyy-MM-dd u" }, monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'], selectable: true, selectHelper: true, select: function(start, end, allDay){ var start = $.fullCalendar.formatDate(start, 'yyyy-MM-dd HH:mm'); var end = $.fullCalendar.formatDate(end, 'yyyy-MM-dd HH:mm'); }, editable: true, diableResizing: false, events: "getPersonlData.action", eventDrop: function(event, delta){ event.className=["deepRed"]; handlCalendar.quickdropUpdate(event); }, eventResizeStop: function(event){ handlCalendar.quickdropUpdate(event); } }
简单的解释下:
defaultview:是指默认的视图形式,可选的有
month 一页显示一月, 日历样式
basicWeek 一页显示一周, 无特殊样式
basicDay 一页显示一天, 无特殊样式
agendaWeek 一页显示一周, 显示详细的24小时安排(也就是议事日程)
agendaDay 一页显示一天, 显示详细的24小时安排
header:是指是否启用该控件自带的header,我们为了定制方便,就设为false
height: 手动设定高度是为了让页面不出现外框的滚动条,因为我用的是iframe嵌套的方式~~
selectable:是设定是否启动选中特性
select:是监听选中控件的函数
events:是初始化日历的时候从后台返回的数据
其他的都比较容易理解了。
配置好后,现在开始初始化日历,很简单,一句话搞定;选择器是日历的容器
var calendar = $('#calendarBody').fullCalendar(op);
基本的日历就生成了,那现在需要做的是从后台返回数据,其接受的数据格式为json
{id:'',title:'',start:'',end:'',allDay:true,url:''}