jquery日历插件FullCalendar使用技巧
简介
官方网站:
http://arshaw.com/fullcalendar/
英文文档:
http://arshaw.com/fullcalendar/docs/
使用方法
1. 下载压缩包fullcalendar-1.6.3.zip解压
2. 在html页面中导入资源
代码如下 | 复制代码 |
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> |
几点说明:
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. 调用插件
代码如下 | 复制代码 |
$(function(){ |
配置日历表头
代码如下 | 复制代码 |
$('#calenderDemo').fullCalendar({ |
left、center、right参数对应页面表头三个位置(左、中、右),参数值多个之间可以使用逗号或者空格隔开,可选值范围如下:
title – 当前日期文本
prev – 向前翻按钮
next – 向后翻按钮
prevYear – 前一年按钮
nextYear – 后一年按钮
today – 今天按钮
month – 月视图
basicWeek – 周视图
basicDay – 日视图
agendaWeek – 带小时周视图
agendaDay – 带小时日视图
配置中文界面
代码如下 | 复制代码 |
$('#calenderDemo').fullCalendar({ |
日程对象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对象中添加自定义的属性
显示日程
代码如下 | 复制代码 |
$('#calenderDemo').fullCalendar({ |
添加参数events: array/json string/function
可以为数组:
代码如下 | 复制代码 |
events: [ |
可以通过ajax加载json数据:
代码如下 | 复制代码 |
events: { |
也可以是一个function:
代码如下 | 复制代码 |
events: function(start, end, callback) { |
添加日程
通过点击日历单元格,添加新日程
代码如下 | 复制代码 |
var calendar = $('#calenderDemo').fullCalendar({ |
参数说明
date – 当前日期,在agendaWeek、agendaDay视图点击时包含时间
allDay – 在agendaWeek、agendaDay视图点击时为false,其它情况为true
jsEvent – 原生javascript事件
view – 当前视图对象
修改日程
点击当前显示的日程,修改日程
代码如下 | 复制代码 |
var calendar = $('#calenderDemo').fullCalendar({ |
event参数为当前点击的日程
鼠标拖动改变日程时间范围
使用鼠标在页面上直接拖动改变日程时间范围,需要jquery-ui的拖拽功能,初始化时需配置参数editable为true来启用拖动功能。
代码如下 | 复制代码 |
var calendar = $('#calenderDemo').fullCalendar({ |
参数说明
dayDelta – 保存了这次拖动导致该日程事件移动了多少天, 向前为正数, 向后为负数
minuteDelta – 保存了这次拖动导致该日程事件移动了多少分钟, 向前为正数, 向后为负数,该值只有在agenda view下有效
allDay – 如果在month view下移动, 或在agenda view下移动到all-day区域, 则allDay为true, 移动到agenda view的其他区域则为false
revertFunc – 调用该方法, 可以将刚才的拖动恢复到原状。这个方法多用于ajax的提交, 移动之后, 提交数据到后台, 如果后台更新失败, 根据返回消息, 调用这个方法, 可以使页面回复原状
代码如下 | 复制代码 |
var calendar = $('#calenderDemo').fullCalendar({ |
参数与eventDrop回调类似,以下仅说明不同之处:
dayDelta – 保存了日程结束时间变化了多少天,向前为正数, 向后为负数
minuteDelta -保存了日程结束时间变化了多少分钟, 向前为正数, 向后为负数,该值只有在agenda view下有效,其它情况为0
鼠标划过选择一段日期
类似在资源管理器中选择多个文件的操作,使用鼠标在页面上选择一段日期进行操作,例如添加日程,需要配置selectable参数为true
在一个单元格上,鼠标划过选择事件select和鼠标点击单元格事件dayClick会被同时触发
代码如下 | 复制代码 |
var calendar = $('#calenderDemo').fullCalendar({ |
参数说明
startDate – 开始日期
endDate – 结束日期,当allDay为true时,结束日期包含最后一天
jquery日历插件FullCalendar使用技巧的更多相关文章
- 日历插件FullCalendar应用:(二)数据增删改
接上一篇 日历插件FullCalendar应用:(一)数据展现. 这一篇主要讲使用fullcalendar插件如何做数据的增删改,用到了art.dialog web对话框组件,上一篇用到的webFor ...
- 11个实用jQuery日历插件
1. FullCalendar FullCalendar是很出名的jQuery日历插件,它支持拖拽等功能,整合了Google Calendar,而且可以通过JSON来绑定事件,设计师可以轻松地自定义日 ...
- 给开发者准备的 10 款最好的 jQuery 日历插件[转]
这篇文章介绍的是 10 款最棒而且又很有用的 jQuery 日历插件,允许开发者们把这些漂亮的日历插件结合到自己的网站中.这些日历插件易用性都很强,轻轻松松的就可以把漂亮的日历插件装饰到你的网站了.希 ...
- 10个漂亮的jQuery日历插件下载【转载】
10个漂亮的jQuery日历插件下载 2013-08-07 标签:jQuery日历插件jQuery日历jQuery插件 日期是非常重要的,随时随地.微薄或网站的日期选取器日历必须在那里.您可以使用 ...
- 基于jQuery日历插件制作日历
这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...
- 一款基于jQuery日历插件的开发过程
这个插件的设置选项,所有样式都设置成自定义,提供回调函数,方便在外部进行扩展 css设置是可变的 也就是说 日历的样式是定制的: /******************************** ...
- JQuery日历插件My97DatePicker日期范围限制
My97DatePicker是一个非常优秀的日历插件,不仅支持多种调用模式,还支持日期范围限制. 常规的调用比较简单,如下所示: 1 <input class="Wdate" ...
- 记录-JQuery日历插件My97DatePicker日期范围限制
对于日期控件,有时会有不能选择今天以前的日期这种需求..... My97DatePicker是一个非常优秀的日历插件,不仅支持多种调用模式,还支持日期范围限制. 常规的调用比较简单,如下所示: 1 & ...
- 日历插件FullCalendar应用:(一)数据展现
在博客园逛了很长时间了,它帮助我获得了很多知识,很感谢大家的分享,而自己呢,由于各种纠结一直没提笔写博客,直到我看到了这篇文章http://www.cnblogs.com/zhaopei/p/why_ ...
随机推荐
- 国内物联网平台初探(八):中移物联网开放平台OneNet
平台定位 OneNET是中移物联网有限公司搭建的开放.共赢设备云平台,为各种跨平台物联网应用.行业解决方案,提供简便的云端接入.存储.计算和展现,快速打造物联网产品应用,降低开发成本. IoT Paa ...
- php 判断字符串包含中文(转)
$str = "测试中文"; echo $str; echo "<hr>"; //if (preg_match("/^[".ch ...
- solaris 10 关闭ftp、telnet
安装solaris10,启动后发现找不到ftp.telnet的关闭方法, 管理命令 svcadm(服务状态管理,启动.停止等) # svcs 查看当前所有的服务状态,可以使用|管道符重定向作更个性化的 ...
- javascript设计模式-掺元类
有一种重用代码的方法不需要用到严格的继承.如果想把一个函数用到多个类中,可以通过扩充的方式让这些类共享该函数.其实际做法大大体为:先创建一个包含各种通用方法的类,然后再用它扩充其他的类.这种方式就叫做 ...
- JavaScript 面向对象(随笔)
构造函数创建对象 1构造函数是用new创建对象时调用的函数,与普通唯一的区别是构造函数名应该首字母大写. function Person() { this.age = 50; } let a = ne ...
- JWT和Spring Security集成
通常情况下,把API直接暴露出去是风险很大的, 我们一般需要对API划分出一定的权限级别,然后做一个用户的鉴权,依据鉴权结果给予用户对应的API (一)JWT是什么,为什么要使用它? 互联网服务离不开 ...
- BZOJ 2324 (有上下界的)费用流
思路: 先跑一遍Floyd 更新的时候map[i][j]=map[i][k]+map[k][j] k需要小于i或j 正常建边: 把所有点 拆点-> i,i+n add(x,y,C,E)表示x ...
- E - Dividing Orange
Problem description One day Ms Swan bought an orange in a shop. The orange consisted of n·k segments ...
- html行级元素和块级元素以及css转换
之前有说过html的标签是有语义的,当然也就有一些默认的样式,比如标题有h1···h6,他们的字体由大至小一次递减,字体比一般字体要加粗. 这样也就有了行级元素和块级元素,下面来看看什么是行级元素什么 ...
- Android Drawable之getIntrinsicWidth()和getIntrinsicHeight()
在Android的开发中,凡是需要画图的地方大都离不开类Drawable.Android的官方文档中介绍这个类就是被设计用来表示可以被画的东西.A Drawable is a ge ...