教你更新fullcalendar的event

本文记录一下关于使用 fullcalendar 插件时，更新某一 date 下的 所有event。

首先介绍一下 FullCalendar 的一些基本概念。

一、Views

插件中有n多显示的视图，也就是 defaultView 的值可以有这么多种，本例中使用 month， 即 defaultView: month

二、Events

如下图显示，Events显示的是某一条记录，或者叫事件状态。它有开始结束日期，有显示什么样的文字，什么样的颜色等属性。

三、Demo

只定义这两个属性就可以生成一个简单的 插件demo，官方demo就有这样的。

链接：https://fullcalendar.io/docs/month-view-demo

代码：

示例：

四、本文重点 -- 修改某一日期下的事件属性

点击某一日期，将下面的所有事件结束日期增加1天.

1. 监听插件的点击日期事件

当用户点击日程表上面某一天的时候触发

function( date, allDay, jsEvent, view ) { }

date是用户点击的那一天的Date对象，用户点击议程周视图和议程天视图的时间槽也一样的。

当用户点击议程周视图和议程天视图的时间槽时，allDay是false，其他全是true。

jsEvent 是原生的 javascript 事件，包含“点击坐标”之类的信息。

view 是当前的 View Object 。

在dayClick回调函数内部，this 是当前点击那天的<td>标签

2. 获取到当前实例全部的events

从 FullCalendar 的缓存的数据中取得日程：

.fullCalendar( 'clientEvents' [, idOrFilter ] )

此方法会从客户端缓存中获取 Event Objects 数组。

如果忽略 idOrFilter 参数的话，会取得全部数据。如果 idOrFilter 是ID的话，会返回该ID的所有日程。idOrFilter 也可以是一个筛选函数，接受 Event Object 参数，返回布尔类型参数。

3. 从全部的events中筛选出当前日期的events

4. 修改这些events的结束日期，并更新到页面上

全部代码（当然考虑到性能问题，可以将获取当天events的代码进行优化）：