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时,结束日期包含最后一天
转载于:https://www.cnblogs.com/zhongshiqiang/p/6900161.html
jquery日历插件FullCalendar使用技巧相关推荐
- jQuery日历插件FullCalendar使用方法
转载至此 html代码片段 <head> <meta charset='utf-8' /> <link href='../fullcalendar.css' rel='s ...
- 给开发者准备的 10 款最好的 jQuery 日历插件
1. CLNDR.js CLNDR.js 是一个日历插件,用来创建日历,允许用户随意的按照自己的想法去自定义日历.这个插件不会生成任何的标记,但是可以使用数据来填 充 Underscore.js HT ...
- 11个实用jQuery日历插件
1. FullCalendar FullCalendar是很出名的jQuery日历插件,它支持拖拽等功能,整合了Google Calendar,而且可以通过JSON来绑定事件,设计师可以轻松地自定义日 ...
- jquery日历插件 途牛_11个实用jQuery日历插件
FullCalendar是很出名的jQuery日历插件,它支持拖拽等功能,整合了Google Calendar,而且可以通过JSON来绑定事件,设计师可以轻松地自定义日历样式,工程师则利用它提供的接口 ...
- html中字段是日期控件,jQuery日历插件datepicker用法详解
jQuery是一款不可多得的非常优秀的javascript脚本开发库,而基于其上的很多插件也是非常规范和卓越的,如果错过这番美景真是太可惜了,比如datepicker这个插件. 一般MIS系统的前端, ...
- 基于jQuery日历插件制作日历
这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...
- 这些年,我们无法忘却的jQuery日历插件
2019独角兽企业重金招聘Python工程师标准>>> CLNDR.js CLNDR.js是一个可创建日历的jQuery插件,支持自定义.该插件不会生成任何标记,而是使用Unders ...
- js日历控件html,jQuery日历插件sys-calendar.js
插件描述:jQuery日历插件,自定义点击事件,记录信息,编辑假日安排等方法,使用简单 sys-calendar.js jquery日历插件,自定义点击事件,记录信息,编辑假日安排等方法,使用简单,版 ...
- 前端Vue制作日历插件FullCalendar
前端Vue制作日历插件FullCalendar 官方文档:https://fullcalendar.io/ 效果图 安装 Vue2:npm install --save @fullcalendar/v ...
最新文章
- linux 单引号,双引号,反引号的小总结。
- Reporting Service 钻取
- binary masks_Python中的Masks概念
- ubuntu下安装hbase2.2.6
- During a meeting, there was a woman
- 【库】JavaScript——滚动条( 不是很完善 )
- pandas 数据分析 相关性_Pandas库学习笔记2-Pandas数据特征分析
- 锤子手机T2发布会PPT模板
- 黄金矿工~java小游戏【内含源码】
- Three.js和其它webgl框架
- Mac OS X下的动态链接库
- IPMITOOL工具使用详解(待验证)
- 什么是UML(UML总结)
- FastRule: Efficient Flow Entry Updates for TCAM-based OpenFlow Switches(二)
- [译]基于深度残差学习的图像识别
- Android歌词制作,Android动感歌词制作器(支持翻译和音译歌词)
- 职场IT老鸟的几点小习惯
- ChatGPT会给程序员带来失业潮吗?
- P1093 [NOIP2007 普及组] 奖学金
- ZZULIOJ1001: 植树问题
热门文章
- [转载] 杜拉拉升职记——02 单相思与性骚扰
- 事务隔离机制原理深入分析以及MySQL不同隔离级别分场景下实验对比
- asp.net 2.0防止同一用户同时登陆
- 体验Remix——安卓电脑
- WMI技术介绍和应用——查询快捷方式、映射磁盘和虚拟内存信息
- log库spdlog简介及使用
- Ubuntu下内存泄露检测工具Valgrind的使用
- linux驱动:音频驱动(四)ASoc之machine设备
- mllib逻辑回归 spark_Spark Mllib中逻辑回归
- m1芯片支持php,M1芯片兼容性怎么样 M1芯片软件兼容好吗