Web日程管理FullCalendar

本是古典何须时尚 2022-06-18 12:38 363阅读 0赞

FullCalendar是一款jQuery日程管理控件，官网下载地址http://fullcalendar.io/download，目前最新版本是3.3.1。

第一步就是在需要调用FullCalendar日历的页面中载入必要的javascript和css文件，包括jQuery库文件，FullCalendar插件以及FullCalendar样式表。如果您还想要拖动日历的功能，就还需要加入jQuery ui插件。

在页面的body里加入div\#calendar，用来放置日历主体。

只要调用$('\#calendar').fullcalendar(options)即可初始化，初始化配置中events、eventSources、select和eventClick是必须设置项。

events和eventSources是数据源配置项，存储数组对象，可以是Arrays/Functions/URLs。

$('#calendar').fullCalendar({  
        events: {  
            url: 'http://<数据源路径>',  
            type: 'post'  
        }  
    });

eventSources和events类似，不过eventSources用于多个数据源的情况，是events数组

$('#calendar').fullCalendar({  
        eventSources: [  
            '/feed1.jsp',  
            '/feed2.jsp'  
        ]  
    });

select是时间段选择事件，当选择某个时间段时触发，用于新建日程。

eventClick是日程点击事件，当某个日程被点击是触发，用户查看或者更新日程。

header:设置日历头部信息

头部信息包括left、center、right三个位置，分别对应头部左边、头部中间和头部右边。  
 头部信息每个位置可以对应以下配置：  
 title: 显示当前月份/周/日信息  
 prev: 用于切换到上一月/周/日视图的按钮  
 next: 用于切换到下一月/周/日视图的按钮  
 prevYear: 用于切换到上一年视图的按钮  
 nextYear: 用于切换到下一年视图的按钮  
 如果不想显示头部信息，可以设置header为false

header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    }

loading: function(isLoading, view)…..日历开始加载的时候, isLoading参数为true触发一次, 日历加载完毕, isLoading参数为false触发一次.

**eventDrop**: function(calEvent, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view)  在一个日程事件被移动, 并成功移动到另外一个日期/时间.  
  
1. dayDelta: 保存了这次拖动导致该日程事件移动了多少天, 向前为正数, 向后为负数.  
2. minuteDelta: 保存了这次拖动导致该日程事件移动了多少分钟, 向前为正数, 向后为负数.  该值只有在agenda view下有效.  
3. allDay: 如果在month view下移动, 或在agenda view下移动到all-day区域, 则allDay为true, 移动到agenda view的其他区域则为false  
4. revertFunc: 调用该方法, 可以将刚才的拖动恢复到原状.  这个方法多用于ajax的提交, 移动之后, 提交数据到后台, 如果后台更新失败, 根据返回消息, 调用这个方法, 可以使页面回复原状.  
5. eventResizeStart, eventResizeStop: function(calEvent, jsEvent, ui, view):  在一个日程事件改变大小之前之后发生(不一定要改变成功.)  calEvent保存了日程事件信息(date, title, 等等)  
6. eventResize: function(calEvent, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view): 在日程事件改变大小并成功后调用, 参数和eventDrop参数用法一致.

/*
     添加日程事件
     start: 被选中区域的开始时间
     end: 被选中区域的结束时间
     jsEvent: jascript对象
     view: 当前视图对象
    */
    select: function (start, end, jsEvent, view) {...}

**eventClick**,**eventMouseover**, **eventMouseout**: function(calEvent, jsEvent, view): 日程事件被点击, 鼠标划过, 鼠标离开的事件.  参数和上面介绍过的同名参数一致.    这里的eventClick事件如果返回false, 可以阻止浏览器跳转到对应日程事件在初始配置时指定的url地址.  这种事件的阻止传播可以参照DHTML文档关于事件的传播和原始响应.

#### 日程事件数据 ####

FullCalendar最重要的部分，设置用于日程事件相关信息。

Event Object，事件对象，用来存储一个日历事件信息的标准对象，只有title和start是必须的

<table style="margin:6px auto; padding:0px; border-left:1px solid rgb(211,211,211); border-top:1px solid rgb(211,211,211); color:rgb(66,66,66); font-family:&quot;Microsoft YaHei&quot;,Tahoma,Helvetica,Arial,sans-serif; font-size:14px; background-color:rgb(253,253,253)"> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:6px; background:rgb(247,247,247); text-align:center; font-weight:bold"> 
   <td style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> 属性</td> 
   <td style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> 描述</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td align="center" style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> id</td> 
   <td style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> 可选，事件唯一标识，重复的事件具有相同的id</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td align="center" style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> title</td> 
   <td style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> 必须，事件在日历上显示的title</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td align="center" style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> allDay</td> 
   <td style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> 可选，true or false，是否是全天事件。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td align="center" style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> start</td> 
   <td style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> 必须，事件的开始时间。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td align="center" style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> end</td> 
   <td style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> 可选，结束时间。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td align="center" style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> url</td> 
   <td style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> 可选，当指定后，事件被点击将打开对应url。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td align="center" style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> className</td> 
   <td style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> 指定事件的样式。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td align="center" style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> editable</td> 
   <td style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> 事件是否可编辑，可编辑是指可以移动, 改变大小等。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td align="center" style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> source</td> 
   <td style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> 指向次event的eventsource对象。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td align="center" style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> color</td> 
   <td style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> 背景和边框颜色。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td align="center" style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> backgroundColor</td> 
   <td style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> 背景颜色。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td align="center" style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> borderColor</td> 
   <td style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> 边框颜色。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td align="center" style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> textColor</td> 
   <td style="margin:0px; padding:2px; line-height:26px; border-bottom:1px solid rgb(211,211,211); border-right:1px solid rgb(211,211,211)"> 文本颜色。</td> 
  </tr> 
 </tbody> 
</table>