(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:''}
其中title,start,allDay是必须的,其他都是可选的
posted @ 2011-03-23 20:59 FED@Web 阅读(...) 评论(...) 编辑 收藏