jQuery技术

jquery日历插件FullCalendar使用技巧(2)

字号+ 作者:H5之家 来源:H5之家 2015-09-20 08:26 我要评论( )

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

参数说明
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时,结束日期包含最后一天

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 7个有用的jQuery小技巧

    7个有用的jQuery小技巧

    2016-02-26 13:02

  • jQuery制作select双向选择列表

    jQuery制作select双向选择列表

    2016-02-26 11:00

  • 全面详细的jQuery常见开发技巧手册

    全面详细的jQuery常见开发技巧手册

    2016-02-26 10:02

  • 强大的jQuery移动插件Top 10

    强大的jQuery移动插件Top 10

    2016-02-25 09:05

网友点评
"