FullCalendar 的学习笔记(一)
前一段时间,一个老项目需要新增一个小功能,日程表~
于是网上找了下,发现FullCalendar这个控件还不错于是就拿来用了下,下面简单介绍下我的学习笔记。
首先就是了解下FullCalendar的API
比较详细的我推荐的是
http://www.cnblogs.com/yuanxianlai/archive/2012/03/31/2427117.html
然后自己先把日历控件加载出来
记得先引用如下
<script type="text/javascript" src='fullcalendar/lib/jquery-1.3.2.min.js'></script>
<script type="text/javascript" src='fullcalendar/lib/jquery.min.js'></script>
<script type="text/javascript" src='fullcalendar/lib/jquery-ui.custom.min.js'></script>
<script type="text/javascript" src='fullcalendar/fullcalendar.min.js'></script>
<script type="text/javascript" src='calendar.js'></script>
<link href="fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css" />
PS:我发布到具体的IIS服务器时,出现了加载jquery-1.3.2.min.js为定义的错误,此时可替换jquery-1.10.2.min.js 即可
$(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear(); $('#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 添加选中某元素时需要进行操作的方法,比如:添加会议、备注等事项
alert("1");
},
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 添加点击某事项时需要进行操作的方法,比如:修改会议、备注等事项
alert("2");
},
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 添加改变某事项大小时需要进行操作的方法,比如:修改会议、备注等事项
alert("3"); 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 添加拖拽某事项之后需要进行操作的方法,比如:修改会议、备注等事项
alert("4"); if (!confirm("is this okay?")) {
revertFunc();
} },
events: //function(start, end, callback) { }//获取事项的数据,这里是用的 function ,可以是 array ,也可以是 json
[{
title: '张丽值班',
start: new Date(y, m, 1)
},
{
title: '小吴值班',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
} ]
});
});
FullCalendar 的学习笔记(一)的更多相关文章
- FullCalendar 的学习笔记(二)
下面是一个.NET webForm的具体列子 注意引用了artDialog 以及异步请求数据的json格式字符串 <html xmlns="http://www.w3.org/1999 ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML学习笔记
HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...
随机推荐
- onblur判断数字
window.onload = function () { document.getElementById('text1').onblur = function () { if (isNaN(docu ...
- web负载均衡整理
参考:http://www.cnblogs.com/lovingprince/archive/2008/11/13/2166350.html http://www.cnblogs.com/loving ...
- C#远程获取/读取网页内容
转载自 :http://blog.csdn.net/gisfarmer/article/details/2836904 using System; using System.Collections.G ...
- Shell脚本中单引号(‘)和双引号(“)的使用区别[转载]
shell可以识别4种不同类型的引字符号: 单引号字符' 双引号字符" 反斜杠字符\ 反引号字符` 1. 单引号 ( '' ) # grep Susan phonebook Susan Go ...
- keil中查看内存数据
1.工具栏中 view->Memory Windows 然后 c:0 表示读取0地址开始的代码区数据 d:0 表示读取0地址开始的数据区数据 x:0表示读取0地址开始的外部数据区
- 高效的jQuery代码编写技巧总结
最近写了很多的js,虽然效果都实现了,但是总感觉自己写的js在性能上还能有很大的提升.本文我计划总结一些网上找的和我本人的一些建议,来提升你的jQuery和javascript代码.好的代码会带来速度 ...
- CSS的权重(转)
CSS写的渐渐多了,他的权重问题就不得不昂首面对,之前一直得过且过的将就用着,直到最近遇到了几个大坑,一直割刺着我对前端的热情,得了得了,蒙不过去了,就发点时间记下来吧,当然还是一片转载的文章,有时候 ...
- Java学习笔记--Java图形用户界面
AWT:抽象窗口组件工具包 Abstract Windows Toolkit(AWT)是最原始的 Java GUI 工具包.AWT 的主要优点是,它在 Java 技术的每个版本上都成为了一种标准配置, ...
- coredata中谓词的使用
Cocoa提供了一个类NSPredicate类,该类主要用于指定过滤器的条件,该对象可以准确的描述所需条件,对每个对象通过谓词进行筛选,判断是否与条件相匹配.谓词表示计算真值或假值的函数.在cocoa ...
- HTML5实战之桌面通知
桌面通知功能能够让浏览器即使是最小化状态也能将消息通知给用户.这和WebIM是最为天然的结合.不过,目前支持Desktop Notification功能的浏览器只有Chrome5+. 关于通知的基础知 ...