jQuery 日历控件 FullCalendar 初识
最近有个日程管理的需求,就学习了一下 FullCalendar 控件的一些基本知识,本文不是详细介绍该控件的 API 的文档,而是记录本人使用过程中的一些学习情况。
先看一下效果图 月/周/日视图 黄色表示今天:
其中有两个事项,rrr 和 test 是名称,7a 和 5a 是开始时间,其中 a 表示上午,同理 p 表示下午,周视图和日视图左侧都有时间轴。
在 html 中建立一个空的 div :
<div id='fullCalendarDemo'>
</div>
接下来就是 js 代码了,详细的解释会写在注释里,可以配合插图看,方便理解,代码中写 //TODO 的地方需要自己编写相关界面代码,一般为弹窗,或者新页面等来对事项进行增删改:
$(document)
.ready(
function() {
$('#fullCalendarDemo')
.fullCalendar({ //初始化日历
header: { //日历最上面表示头部
left: 'prev,next today', //左边是 前一月/周/日,后一月/周/日 以及 回到今天按钮
center: 'prevYear,title,nextYear', //中间是 去年的本月/周/日 当前试图的时间 明年的本月/周/日
right: 'month,agendaWeek,agendaDay' //切换日历显示月/周/日视图
},
monthNames: ["一月", "二月", "三月", "四月", //设置月份名称,中英文均可
"五月", "六月", "七月", "八月", "九月",
"十月", "十一月", "十二月"
],
monthNamesShort: ["一月", "二月", "三月", //设置月份的简称
"四月", "五月", "六月", "七月", "八月",
"九月", "十月", "十一月", "十二月"
],
dayNames: ["周日", "周一", "周二", "周三", //设置星期名称
"周四", "周五", "周六"
],
dayNamesShort: ["周日", "周一", "周二", //设置星期简称
"周三", "周四", "周五", "周六"
],
today: ["今天"], //today 按钮的显示名称
firstDay: 0, //设置每星期的第一天是星期几,0 是星期日
buttonText: { //设置按钮文本
today: '今天',
month: '月',
week: '周',
day: '日',
prev: '上一月',
next: '下一月'
},
height: windowHeigth, //设置日历高度,宽度是自适应的,不好改,windowHeight 是我计算的值
currentTimezone: 'Asia/Beijing', //设置时区
theme: true, //true 时日历主题可随 jQuery ui 的主题变化
selectable: true, //元素是否可以被选中
selectHelper: true, //选中元素时是否显示相关信息
select: function(startDate, endDate, //选中某元素的方法,startDate 事项的起始时间,endDate 事项的结束时间
allDay, jsEvent, view) { // allDay 事项是否为全天事项,jsEvent 控件的内置对象,view 当前视图
var startD = $.fullCalendar
.formatDate(startDate,
'yyyy-MM-dd HH:mm:ss'); //formatDate 是格式化时间的方法
var endD = $.fullCalendar
.formatDate(endDate,
'yyyy-MM-dd HH:mm:ss');
//TODO 添加选中某元素时需要进行操作的方法,比如:添加会议、备注等事项
},
eventClick: function(event) { //点击事项的方法
var startD = $.fullCalendar
.formatDate(event.start,
'yyyy-MM-dd HH:mm:ss');
var endD = $.fullCalendar
.formatDate(event.end,
'yyyy-MM-dd HH:mm:ss');
//TODO 添加点击某事项时需要进行操作的方法,比如:修改会议、备注等事项
},
editable: true, //事项是否可编辑,改变大小、拖拽等
eventResize: function(event, dayDelta, minuteDelta, revertFunc) {
//事项大小改变后的方法,往往修改事项的起止时间,event 改变的事项,dayDelta 变化的天数,minuteDelta 变化的分钟数,revertFunc 回调函数
var startD = $.fullCalendar
.formatDate(event.start,
'yyyy-MM-dd HH:mm:ss');
var endD = $.fullCalendar
.formatDate(event.end,
'yyyy-MM-dd HH:mm:ss'); //TODO 添加改变某事项大小时需要进行操作的方法,比如:修改会议、备注等事项 if (!confirm("is this okay?")) {
revertFunc(); //如果不要改变,则将事项还原
} },
eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc) { //拖拽事项之后的方法,allDay 是否全天事项,其他参数同上
var startD = $.fullCalendar
.formatDate(event.start,
'yyyy-MM-dd HH:mm:ss');
var endD = $.fullCalendar
.formatDate(event.end,
'yyyy-MM-dd HH:mm:ss'); //TODO 添加拖拽某事项之后需要进行操作的方法,比如:修改会议、备注等事项 if (!confirm("is this okay?")) {
revertFunc();
} },
events: function(start, end, callback) {
//获取事项的数据,这里是用的 function ,可以是 array ,也可以是 json
}
});
});
另外,还有几个常用的方法:
$('#fullCalendarDemo').fullCalendar('refetchEvents'); 对事项进行增删改之后可以用来单独刷新日历控件,而不要重新读取数据库
$('#fullCalendarDemo').fullCalendar('updateEvent', event); 单独刷新指定事项
$('#fullCalendarDemo').fullCalendar( 'gotoDate', year [, month, [ date ]] ); 查看指定日期的日程,需要注意的是月份是从0开始的,即1月份为0,2月份为1······
一般日期的存储会用 String 类型,在 parseInt 时有一点需要注意的是 IE 8 的不兼容(其他版本 IE 未测试)。
最后,就说说控件内置的 event Object 对象,只说几个我认为比较需要谈的参数:title、start 必选,考虑到数据存储的问题,id 最好也是必选的,如果是全天事项,即 allDay 为 true,则 end 可以不填, 个人建议当这种情况时,可以设置 end 为当天的 00:00:00。
完整 API 请移步官网文档。
jQuery 日历控件 FullCalendar 初识的更多相关文章
- js非常强大的日历控件fullcalendar.js, 日期时间库: moment.js
日历控件: https://fullcalendar.io/docs/ https://fullcalendar.io/docs/event_data/events_function/ https:/ ...
- JQuery日历控件
日历控件最后一弹——JQuery实现,换汤不换药.原理一模一样,换了种实现工具.关于日历的终于写完了,接下来研究研究nodejs.嗯,近期就这点事了. 同样还是将input的id设置成calendar ...
- 仿微博的JQuery日历控件
实现原理主要是处理table,生成tr td,其中最重要的是如何找出每月第一天是星期几,然后就能对应出这个月的余下天数. 日历控件网上一搜一大把,但是我觉得自己写一遍还是有好处的.代码可以查看本页源代 ...
- 前端jQuery日历控件报错 $("#datepicker").datepicker is not a function
使用日历控件时,前端产生错误: $("#datepicker").datepicker is not a function 问题原因 前端在同一个页面,jQuery引入了两次. 解 ...
- fullcalendar日历控件知识点集合
1.基本的语法: 首先,fullcalendar和JQUERY一样,以面向对象的方式来组织代码.当然,这里的面向对象不过指能够把整个fullcalendar理解为一个类,这个类里包含有非常多的属性.方 ...
- fullcalendar日历控件集合知识
1.基本的语法: 首先,fullcalendar和JQUERY一样,以面向对象的方式来组织代码.当然,这里的面向对象不过指能够把整个fullcalendar理解为一个类,这个类里包含有非常多的属性.方 ...
- Fullcalendar 日历控件的基本使用
1:Fullcalendar 日历控件的基本简介 Fullcalendar是一款十分强大的开源日历免费控件,提供了丰富的属性设置和方法调用. 官网地址:https://fullcalendar.io/ ...
- Jquery自定义扩展方法(二)--HTML日历控件
一.概述 研究了上节的Jquery自定义扩展方法,自己一直想做用jquery写一个小的插件,工作中也用到了用JQuery的日历插件,自己琢磨着去造个轮子--HTML5手机网页日历控件,废话不多说,先看 ...
- jquery插件——日历控件
今天在网上有看到一个jquery插件——日历控件,不过之前也在柯乐义的网站上看到了(http://keleyi.com/ 推荐下) 这个插件看着比较大气,所以干脆也分享下,以后自己也好用一点儿 1.页 ...
随机推荐
- POJ 3261 Milk Patterns 可重复k次的最长重复子串
Milk PatternsTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://poj.org/problem?id=3261 Description ...
- error LNK2019: unresolved external symbol / error LNK2001: 无法解析的外部符号
在 vc++ 2008 和 vc++ 2010 编译时分别出现上面的错误.一般这种错误是由于引用函数未定义造成的,如外部类库未包含,实现代码未编写等. 但最终检查的结果,却是另外一种情况:文件名重名. ...
- C++中new与delete问题学习
一.new char与delete问题 . 问题程序 [cpp] view plaincopy #include <iostream> using namespace std; void ...
- Python学习 之 爬虫
目标:下载贴吧或空间中所有图片 步骤:(1)获取页面代码 (2)获取图片URL,下载图片 代码如下: #!/usr/bin/python import re import urllib def get ...
- windows mysql utf-8中文乱码解决方法
今天写项目,无论如何实质调试,在mysql里始终是中文乱码,找了好多办法一个一个尝试,最终才找到解决办法: 打开wamp-> mysql→my.ini,在如图所示的地方添加相应的代码
- 小白日记5:kali渗透测试之被动信息收集(四)--theHarvester,metagoofil,meltag,个人专属密码字典--CUPP
1.theHarvester theHarvester是一个社会工程学工具,它通过搜索引擎.PGP服务器以及SHODAN数据库收集用户的email,子域名,主机,雇员名,开放端口和banner信息. ...
- Asp.Net 之 WebService部署到服务器后出现" The test form is only available for requests from the local machine "
最近由于任务需要开发了一个WebService, 部署到服务器以后,出现上述问题,网上查找到如下解决方案: 问题原因: 从 NET Framework 1.1 起定义了一个名为 HttpPostLoc ...
- Oracle 经典语法(一)
员工表 emp Name Type Nullable Default Comments -------- ------------ -------- ------- ----- ...
- python(5) - 冒泡排序
data = [10, 4, 33, 21, 54, 3, 8, 11, 5, 22, 2, 1, 17, 13] ''' 思路:有多少个元素就循环多少次,每次循环从第一个元素开始与它后面的元素比较, ...
- linux - 文件查找及压缩
文件查找: 1. which 查找可以执行文件,只搜索$PATH里的目录 $ which ls /bin/ls which只搜索$PATH里的目录,如果搜索当前目录的文件是没有任何结果的 $ ...