jquery日历插件FullCalendar简介

FullCalendar是一款基于jquery的日历控件

简介

官方网站:
http://arshaw.com/fullcalendar/
英文文档:
http://arshaw.com/fullcalendar/docs/

中文翻译文档(虽然是2009年翻译的,不过文档变动不是很大,可以参考)
http://blog.csdn.net/lgg201/article/details/4818941

开源协议 – MIT
目前最新版本 – 1.6.3
发布日期 – 2013-08-10

使用方法
1. 下载压缩包fullcalendar-1.6.3.zip解压
2. 在html页面中导入资源

几点说明:
FullCalendar需要jquery,如果项目已经引入了jquery,此处不需要重复导入
如果要在日历中使用鼠标拖拽功能,需要导入jquery-ui
压缩包中包含的jquery-ui文件仅包含了jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.draggable.js, jquery.ui.resizable.js的功能;如果项目已经引入了包含以上功能的jquery-ui文件,此处不可重复导入,重复导入会造成jquery-ui的其它功能失效
3. 调用插件

配置日历表头

left、center、right参数对应页面表头三个位置(左、中、右),参数值多个之间可以使用逗号或者空格隔开,可选值范围如下:
title – 当前日期文本
prev – 向前翻按钮
next – 向后翻按钮
prevYear – 前一年按钮
nextYear – 后一年按钮
today – 今天按钮
month – 月视图
basicWeek – 周视图
basicDay – 日视图
agendaWeek – 带小时周视图
agendaDay – 带小时日视图

配置中文界面

日程对象event
日历中显示的日程事件
{
title: ‘some name’,
start: ‘2013-08-08’,
end: ‘2013-08-12’
}
基本参数说明
title – 事件名称,显示在日程中
start – 日程开始时间
end – 日程结束时间
其它参数
id
allDay
url
className
editable
startEditable
durationEditable
source
color
backgroundColor
borderColor
textColor
除此以外,可以根据功能需要在event对象中添加自定义的属性

显示日程

添加参数events: array/json string/function
可以为数组:

可以通过ajax加载json数据:

也可以是一个function:

添加日程
通过点击日历单元格,添加新日程

参数说明
date – 当前日期,在agendaWeek、agendaDay视图点击时包含时间
allDay – 在agendaWeek、agendaDay视图点击时为false,其它情况为true
jsEvent – 原生javascript事件
view – 当前视图对象

修改日程
点击当前显示的日程,修改日程

event参数为当前点击的日程

鼠标拖动改变日程时间范围
使用鼠标在页面上直接拖动改变日程时间范围,需要jquery-ui的拖拽功能,初始化时需配置参数editable为true来启用拖动功能。

参数说明
dayDelta – 保存了这次拖动导致该日程事件移动了多少天, 向前为正数, 向后为负数
minuteDelta – 保存了这次拖动导致该日程事件移动了多少分钟, 向前为正数, 向后为负数,该值只有在agenda view下有效
allDay – 如果在month view下移动, 或在agenda view下移动到all-day区域, 则allDay为true, 移动到agenda view的其他区域则为false
revertFunc – 调用该方法, 可以将刚才的拖动恢复到原状。这个方法多用于ajax的提交, 移动之后, 提交数据到后台, 如果后台更新失败, 根据返回消息, 调用这个方法, 可以使页面回复原状

参数与eventDrop回调类似,以下仅说明不同之处:
dayDelta – 保存了日程结束时间变化了多少天,向前为正数, 向后为负数
minuteDelta -保存了日程结束时间变化了多少分钟, 向前为正数, 向后为负数,该值只有在agenda view下有效,其它情况为0

鼠标划过选择一段日期
类似在资源管理器中选择多个文件的操作,使用鼠标在页面上选择一段日期进行操作,例如添加日程,需要配置selectable参数为true
在一个单元格上,鼠标划过选择事件select和鼠标点击单元格事件dayClick会被同时触发

参数说明
startDate – 开始日期
endDate – 结束日期,当allDay为true时,结束日期包含最后一天

演示demo
demo/calender.html

示例下载demo

1 Comment

  1. 你好,我是通过搜英语之夜找到你的帖子的,我仅仅下载了2008年7月和9月的,您还有余下的可以发给我吗,我的QQ邮箱 912606615@qq.com
    同是英语爱好者,感谢你无私的共享资源,撒花

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.