jquery日历插件FullCalendar使用技巧

原文链接：http://blog.csdn.net/u013493957/article/details/44920341

FullCalendar是一款基于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>
<script type="text/JavaScript" src="js/jQuery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="js/fullcalendar.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({});
});

配置日历表头

 代码如下 复制代码

$(‘#calenderDemo‘).fullCalendar({
 header:{
  left: ‘prev,next today‘,
  center: ‘title‘,
  right: ‘month,agendaWeek,agendaDay‘
 }
});

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

配置中文界面

 代码如下 复制代码

$(‘#calenderDemo‘).fullCalendar({
 buttonText: {
  today: ‘今天‘,
  month: ‘月‘,
  week: ‘周‘,
  day: ‘天‘
 },
 allDayText: ‘全天‘,
 monthNames: [‘一月‘,‘二月‘,‘三月‘,‘四月‘,‘五月‘,‘六月‘,‘七月‘,‘八月‘,‘九月‘,‘十月‘,‘十一月‘,‘十二月‘],
 monthNamesShort: [‘1‘,‘2‘,‘3‘,‘4‘,‘5‘,‘6‘,‘7‘,‘8‘,‘9‘,‘10‘,‘11‘,‘12‘],
 dayNames: [‘星期日‘,‘星期一‘,‘星期二‘,‘星期三‘,‘星期四‘,‘星期五‘,‘星期六‘],
 dayNamesShort: [‘周日‘,‘周一‘,‘周二‘,‘周三‘,‘周四‘,‘周五‘,‘周六‘],
});

日程对象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:[]
});

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

 代码如下 复制代码

events: [
 {
  title: ‘All Day Event‘,
  start: new Date()
 },
 {
  title: ‘Long Event‘,
  start: new Date(),
  end: new Date(new Date().getTime()+86400000)
 }
]

可以通过ajax加载json数据：

 代码如下 复制代码

events: {
 url: ‘/myfeed.PHP‘,
 type: ‘POST‘,
 data: {
  custom_param1: ‘something‘,
  custom_param2: ‘somethingelse‘
 },
 error: function() {
  alert(‘there was an error while fetching events!‘);
 },
 color: ‘yellow‘,   // a non-ajax option
 textColor: ‘black‘ // a non-ajax option
}

也可以是一个function：

 代码如下 复制代码

events: function(start, end, callback) {
 // 取得日程数据后回调
 callback(events);
}

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

 代码如下 复制代码

var calendar = $(‘#calenderDemo‘).fullCalendar({
 dayClick: function(date, allDay, jsEvent, view) {
  // 此处可以进行弹窗、后台通信等处理
  // 本例仅在日历中添加一个新日程
  calendar.fullCalendar(‘renderEvent‘,
   {
    title: ‘日程‘ + new Date().getTime(),
    start: date,
    allDay: allDay
   }
  );
 }
});

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

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

 代码如下 复制代码

var calendar = $(‘#calenderDemo‘).fullCalendar({
 eventClick : function(event, jsEvent, view) {
  // 此处可添加修改日程的代码
  var red = Math.round(255 * Math.random());
  var green = Math.round(255 * Math.random());
  var blue = Math.round(255 * Math.random());
  $(this).css(‘background-color‘, ‘rgb(‘ + red + ‘,‘ + green + ‘,‘ + blue + ‘)‘);
 }
});

event参数为当前点击的日程

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

 代码如下 复制代码

var calendar = $(‘#calenderDemo‘).fullCalendar({
 editable : true,
 eventDrop : function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
  // 拖动某个日程到新位置时，日程时间改变，此处可做相关处理
 }
});

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

 代码如下 复制代码

var calendar = $(‘#calenderDemo‘).fullCalendar({
 editable : true,
 eventResize : function(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
  // 改变某个日程大小，日程结束时间改变，此处可做相关处理
 }
});

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

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

 代码如下 复制代码

var calendar = $(‘#calenderDemo‘).fullCalendar({
 selectable : true,
 select : function(startDate, endDate, allDay, jsEvent, view) {
  // 选中一段日期，此处可做相关处理
  // 处理完成后，取消选中状态
  calendar.fullCalendar(‘unselect‘);
 }
});

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

时间： 2024-10-05 19:57:21

jquery日历插件FullCalendar使用技巧的相关文章

10个漂亮的jQuery日历插件下载【转载】

10个漂亮的jQuery日历插件下载 2013-08-07 标签:jQuery日历插件jQuery日历jQuery插件 日期是非常重要的,随时随地.微薄或网站的日期选取器日历必须在那里.您可以使用任何的jQuery日历插件,对于任何不同的网络应用程序,如自由职业者的计费应用程序,事件管理应用程序或任何日期是非常重要的.今天,我们搜集了10个美丽的jQuery日历插件,你可以随时随地使用下载应用. glDatePicker glDatePicker是一种简单的,可定制的,轻巧的日期选择器. jQu

jquery日历插件(2)

链接jQuery日历插件编写 js:jquery.calendar-1.0.0.js名称请不要更改 改进: 1.改进了调用方式,使用更加方便. 2.支持导入皮肤库,具体导入方法可以参考源码中的Calendar.loadCSS()方法. 如果要自定义皮肤,可以参考源码文件方式,在skin包中新增一个皮肤文件夹,然后参考其他皮肤文件夹中的style.css修改,这个如果是自定义皮肤调用的话就是: jQuery对象.showCalendar({skin:'自定义皮肤文件夹名称'}); js文件请放到与

一款基于jQuery日历插件的开发过程

这个插件的设置选项,所有样式都设置成自定义,提供回调函数,方便在外部进行扩展 css设置是可变的  也就是说  日历的样式是定制的: 废话不多说,如有错误,跪求各位大神指正,感谢!! ;(function($){ //创建一个日历插件    $.fn.Calendar = function(o){ //为这个日历插件创建一个构造函数        var Calendar = function(o,obj){            this.fnin(o,obj);        };//为日历

Jquery日历插件e-calendar升级版

jQuery事件日历插件e-calendar,支持针对指定日期自定义日程安排(无条数限制),设置过日程的日期会高亮显示,兼容IE7+主流浏览器. 原版使用方法及演示地址:e-calendar原版 (鼠标移动到天显示当天的日程安排) 升级版介绍: 1.同一天可存在多个事件交集2.点击天在日历下方出现日程列表3.点击日程列表可添加其事件 .4.添加item-grid的显示和隐藏5.Events中数组集合可添加id,type等元素(区分日程类型:任务类型或日程类型) 6.增加年份选择,月份选择7.样式

JQuery日历插件My97DatePicker日期范围限制

转:http://www.xiongge.club/744.html My97DatePicker是一个非常优秀的日历插件,不仅支持多种调用模式,还支持日期范围限制. 常规的调用比较简单,如下所示: 1 <input class="Wdate" id="d1" onclick="WdatePicker()" /> 下面重点说明日期范围限制: 1)静态限制 你可以给通过配置minDate(最小日期),maxDate(最大日期)为静态日期

11个实用jQuery日历插件

今天有幸被召回母校给即将毕业的学弟学妹们讲我这两年的工作史,看了下母校没啥特别的变化,就是寝室都安了空调,学妹们都非常漂亮而已..好了不扯蛋了,说下今天的主题吧.这些天我在深度定制语法高亮功能的同时发现了博客园提供的一些有意思的函数,甚至有几个博客园都没用到,我也不知道怎么才能触发那些功能..打开这个js就可以看到很多好用的东西了,虽然写的不怎么样,但是至少有这些功能. ps: 推荐安装一个代码格式化的插件,否则一坨看着蛋疼.比如第一个就是 log,方便调试. http://read.qidia

jQuery简单备忘录功能的日历插件

e-calendar是一款jQuery简单带备忘录功能的日历插件.通过该jQuery日历插件你可以记录或设置某天某个时刻发生的事情,具有工作备忘录的功能.通过简单的参数设置你就可以定制该日历插件的外观. 效果演示:http://www.htmleaf.com/Demo/201503281589.html 下载地址:http://www.htmleaf.com/jQuery/Calendar-Date-Time-picker/201503281588.html

一款基于jQuery带事件记录的日历插件

之前我们也已经分享过不少jQuery日历插件,有些应用了CSS3的特性,外观就特别漂亮.今天要分享的这款jQuery日历插件不仅有着绚丽的外观,而且带有日期事件记录功能,点击日期即可展开事件记录窗口,你可以设置事件的描述以及提醒的时间,是一款相对实用的jQuery日历插件. 在线预览   源码下载 接下来我们一起来看看实现这款jQuery带事件记录功能的日历插件的实现过程及源码,代码主要由HTML.CSS和jQuery组成. HTML代码: <div id="myId" clas

JavaScript之jQuery-7 jQuery 使用插件(使用插件、日历插件、表单验证插件)

一.jQuery 使用插件 插件的查找与帮助 - jQuery 官方网站的插件库(http://plugins.jquery.com) 提供了大量的插件.并给出去了每个插件的用户评级.版本及bug等 - 库中列出了每个插件的ZIP文件下载.演示.示例代码及教程 使用插件 - step 1:将插件包导入到页面中,并确保它在jQuery源文件之后 <script src="jqeury-1.11.1.js"></script> <script></