JS插件fullcalendar教程

短命女 2022-03-22 05:46 626阅读 0赞

一.下载fullcalendar

1.fullcalendar官网 2.百度 fullcalendar下载

二.浏览fullcalendar结构 demos里存放着使用的相关文档和例子

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODI3MjQ1NTYz_size_16_color_FFFFFF_t_70][]

三.搭建web工程使用 fullcalendar

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODI3MjQ1NTYz_size_16_color_FFFFFF_t_70 1][]

四.fullcalendar页面和引用的资源

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    application.setAttribute("ctx", path);
    %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>My JSP 'index.jsp' starting page</title>
    	<meta http-equiv="pragma" content="no-cache">
    	<meta http-equiv="cache-control" content="no-cache">
    	<meta http-equiv="expires" content="0">    
    	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    	<meta http-equiv="description" content="This is my page">
    	
    <script src="${ctx}/static/jsplugins/fullcalendar-3.5.1/lib/jquery.min.js"></script>
    <script src="${ctx}/static/jsplugins/fullcalendar-3.5.1/lib/jquery-ui.min.js"></script>
    <link href="${ctx}/static/jsplugins/fullcalendar-3.5.1/fullcalendar.min.css" rel="stylesheet" />
    <script src="${ctx}/static/jsplugins/fullcalendar-3.5.1/lib/moment.min.js"></script>
    <script src="${ctx}/static/jsplugins/fullcalendar-3.5.1/fullcalendar.min.js"></script>
    <script src="${ctx}/static/jsplugins/fullcalendar-3.5.1/locale-all.js"></script>
      </head>
    <script>
    	$(document).ready(function() {
    		$('#calendar').fullCalendar({
    			header: {
    				left: 'prev,next,today',
    				center: 'title',
    				right: 'month,agendaWeek,agendaDay,listMonth'
    			},
    			editable: true,
    			eventLimit: true,
    			navLinks: true,
    			locale: 'zh-cn',
    			businessHours: true,
    			events: function(start, end, timezone, callback){
    				$.ajax({
    					type : "get",
    					url : '${ctx}/static/jsondata/daysData.json',
    					success : function(data) {
    						callback(data);
    					}
    				});
    			},
    			dayClick: function(date, allDay, jsEvent, view) {
    	        	alert($.fullCalendar.formatDate(date, "YYYY-MM-DD"));
    			},
    			eventClick: function(event) {
    				alert(event.title);
    			}
    			
    		});
    		
    	});
    
    </script>
    <style>
    	body {
    		margin: 40px 10px;
    		padding: 0;
    		ont-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    		ont-size: 14px;
    	}
    	#calendar {
    		max-width: 900px;
    		margin: 0 auto;
    	}
    </style>  
      <body>
        <div id='calendar'></div>    
      </body>
    </html>

五.页面效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODI3MjQ1NTYz_size_16_color_FFFFFF_t_70 2][]

六.API讲解额

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODI3MjQ1NTYz_size_16_color_FFFFFF_t_70 3][]

===================感谢这位博主细心总结的中文API

===================[https://blog.csdn.net/qw\_xingzhe/article/details/44920943][https_blog.csdn.net_qw_xingzhe_article_details_44920943]

<table> 
 <tbody> 
  <tr> 
   <td>header</td> 
   <td>设置日历头部信息。<br> 如果设置为false，则不显示头部信息。包括left，center,right左中右三个位置，每个位置都可以对应以下不同的配置：<br> title: 显示当前月份/周/日信息<br> prev: 用于切换到上一月/周/日视图的按钮<br> next: 用于切换到下一月/周/日视图的按钮<br> prevYear：用于切换到上一年视图的按钮<br> nextYear：用于切换到下一年视图的按钮</td> 
   <td>{ <br> left: 'title',<br> center: '',<br> right: 'today prev,next'<br> }</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>theme</td> 
   <td>是否允许使用jquery的ui主题，如果设置为true，则需要加载jquery ui相关css和js文件。&nbsp;<a href="http://www.helloweba.com/demo/fullcalendar/themes.html" rel="nofollow">查看演示</a></td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>buttonIcons</td> 
   <td>设置header中使用的prev, next等变量对应按钮的样式，只有当theme为true时才有效，如果你调用了jQuery ui样式但又不想使用它的图标样式，可以将此属性设置为false</td> 
   <td>{ prev: 'circle-triangle-w', next: 'circle-triangle-e' }</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>firstDay</td> 
   <td>设置一周中显示的第一天是哪天，周日是0，周一是1，类推。</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>isRTL</td> 
   <td>设置为ture时则日历从右往左显示，貌似是针对阿拉伯人设计的。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>weekends</td> 
   <td>是否显示周末，设为false则不显示周六和周日。</td> 
   <td>true</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>hiddenDays</td> 
   <td>隐藏一周中的某一天或某几天，数组形式，如隐藏周二和周五：[2,5]，默认不隐藏，除非weekends设置为false。</td> 
   <td>[]</td> 
  </tr> 
  <tr> 
   <td>weekMode</td> 
   <td>在月视图里显示周的模式，因为每月周数可能不同，所以月视图高度不一定。<br> fixed：固定显示6周高，日历高度保持不变<br> liquid：不固定周数，高度随周数变化<br> variable：不固定周数，但高度固定</td> 
   <td>'fixed'</td> 
  </tr> 
  <tr> 
   <td>weekNumbers</td> 
   <td>是否在日历中显示周次(一年中的第几周)，如果设置为true，则会在月视图的左侧、周视图和日视图的左上角显示周数。</td> 
   <td>false</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>weekNumberCalculation</td> 
   <td>周次的显示格式。</td> 
   <td>"iso"</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>设置日历的高度，包括header日历头部，默认未设置，高度根据aspectRatio值自适应。</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>contentHeight</td> 
   <td>设置日历主体内容的高度，不包括header部分，默认未设置，高度根据aspectRatio值自适应。</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>aspectRatio</td> 
   <td>设置日历单元格宽度与高度的比例。</td> 
   <td>1.35</td> 
  </tr> 
  <tr> 
   <td>handleWindowResize</td> 
   <td>是否随浏览器窗口大小变化而自动变化。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>windowResize</td> 
   <td colspan="2">callback，当浏览器窗口变化时触发function，使用：<br> $('#calendar').fullCalendar({ <br> windowResize: function(view) { <br> alert('The calendar has adjusted to a window resize');<br> }<br> });<br> &nbsp;</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>render</td> 
   <td colspan="2">method，绑定日历到id上。<br> $('#id').fullCalendar('render');</td> 
  </tr> 
  <tr> 
   <td>destroy</td> 
   <td colspan="2">method，销毁id日历，把日历回复到初始化前状态。<br> $('#id').fullCalendar('destroy');</td> 
  </tr> 
 </tbody> 
</table>

视图

FullCalendar提供五种可用视图，包括month（月视图），basicWeek（基本周视图，左侧不显示具体时间），basicDay（基本日视图，左侧不显示具体时间），agendaWeek（周视图），agendaDay（日视图）。

View视图对象的属性：

<table> 
 <tbody> 
  <tr> 
   <td>name</td> 
   <td>包括month,basicWeek,basicDay,agendaWeek,agendaDay</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>标题内容(例如"2013年9月" or "Sep 7 - 13 2013")</td> 
  </tr> 
  <tr> 
   <td>start</td> 
   <td>Date类型, 该view下的第一天</td> 
  </tr> 
  <tr> 
   <td>end</td> 
   <td>Date类型, 该view下的最后一天. 由于是一个闭合的值, 所以, 比如在month view下, 10月这个月份, 那么end对应的应该是11月的第一天</td> 
  </tr> 
  <tr> 
   <td>visStart</td> 
   <td>Date类型. 在该view下第一个可以访问的day. month view下, 该值是当月的第一天, week view下, 则通常和start一致</td> 
  </tr> 
  <tr> 
   <td>visEnd</td> 
   <td>Date类型, 最后一个可访问的day</td> 
  </tr> 
 </tbody> 
</table>

View其他属性和方法

<table> 
 <tbody> 
  <tr> 
   <td>defaultView</td> 
   <td>日历初始化时默认视图</td> 
   <td>'month'</td> 
  </tr> 
  <tr> 
   <td>getView</td> 
   <td colspan="2">method，取得视图对象信息，如获取当前视图的标题内容：<br> var view = $('#calendar').fullCalendar('getView'); alert("The view's title is " + view.title);</td> 
  </tr> 
  <tr> 
   <td>changeView</td> 
   <td colspan="2">method，切换视图<br> .fullCalendar('changeView',viewName)<br> viewName为5种视图中的一种</td> 
  </tr> 
 </tbody> 
</table>

日程选项

以下选项设置适用于agendaWeek和agendaDay视图里。

<table> 
 <tbody> 
  <tr> 
   <td>allDaySlot</td> 
   <td>在agenda视图模式下，是否在日历上方显示all-day(全天)</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>allDayText</td> 
   <td>定义日历上方显示全天信息的文本</td> 
   <td>'all-day'</td> 
  </tr> 
  <tr> 
   <td>axisFormat</td> 
   <td>设置日历agenda视图下左侧的时间显示格式，默认显示如：5:30pm</td> 
   <td>'h(:mm)tt'</td> 
  </tr> 
  <tr> 
   <td>slotMinutes</td> 
   <td>在agenda的视图中, 两个时间之间的间隔(分钟)</td> 
   <td>30</td> 
  </tr> 
  <tr> 
   <td>defaultEventMinutes</td> 
   <td>事件默认的时间执行长度，如果事件对象没有指定执行多长时间，则默认执行两个小时</td> 
   <td>120</td> 
  </tr> 
  <tr> 
   <td>firstHour</td> 
   <td>当切换到agenda时，初始滚动条滚动到的时间位置，默认在6点钟的位置</td> 
   <td>6</td> 
  </tr> 
  <tr> 
   <td>minTime</td> 
   <td>设置显示的时间从几点开始</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>maxTime</td> 
   <td>设置显示的时间从几天结束</td> 
   <td>24</td> 
  </tr> 
  <tr> 
   <td>slotEventOverlap</td> 
   <td>设置视图中的事件显示是否可以重叠覆盖</td> 
   <td>true</td> 
  </tr> 
 </tbody> 
</table>

当前日期设置

<table> 
 <tbody> 
  <tr> 
   <td>year</td> 
   <td>设置日历年份，必须为4位如：2013，如果不设置则默认为当前年份</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>month</td> 
   <td>设置初始化日历的月份，从0开始，如果年份和月份都未指定，则从一月开始。</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>date</td> 
   <td>设置日历初始化时的日期，只有在周视图和日视图中有效</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>prev</td> 
   <td colspan="2">method，进入到上一月（周、天）视图<br> $('#calendar').fullCalendar('prev');</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>next</td> 
   <td colspan="2">method，进入到下一月（周、天）视图<br> $('#calendar').fullCalendar('next');</td> 
  </tr> 
  <tr> 
   <td>prevYear</td> 
   <td colspan="2">method，进入上一年视图</td> 
  </tr> 
  <tr> 
   <td>nextYear</td> 
   <td colspan="2">method，进入下一年视图</td> 
  </tr> 
  <tr> 
   <td>today</td> 
   <td colspan="2">method，进入当天</td> 
  </tr> 
  <tr> 
   <td>gotoDate</td> 
   <td colspan="2">method，指定进入日历中的某一天<br> $('#calendar').fullCalendar( 'gotoDate', year [, month, [ date ]] )</td> 
  </tr> 
  <tr> 
   <td>incrementDate</td> 
   <td colspan="2">method， 以当前时间为轴, 将日历向前, 或向后移动指定长度的时间, 比如: $('#calendar').fullCalendar(‘incrementDate’, -3, 2, -5)就表示将日历年份向前移动3年, 月份向后移动2月, day(天数)向前移动5天。</td> 
  </tr> 
  <tr> 
   <td>getDate</td> 
   <td colspan="2">method，返回当前日历中的日期</td> 
  </tr> 
 </tbody> 
</table>

文本与时间定制

你可以根据项目需求设置日历显示的文本信息，如中文的月份等。

<table> 
 <tbody> 
  <tr> 
   <td>imeFormat</td> 
   <td>设置显示的日程事件的时间格式，如timeFormat: 'H:mm' 则显示24小时制的像10:30</td> 
   <td>{agenda: ‘h:mm{ - h:mm}}</td> 
  </tr> 
  <tr> 
   <td>columnFormat</td> 
   <td>设置显示日历每列表头信息的格式文本，默认：<br> { <br> month: 'ddd', // Mon<br> week: 'ddd M/d', // Mon 9/7<br> day: 'dddd M/d' // Monday 9/7 }</td> 
   <td>见描述</td> 
  </tr> 
  <tr> 
   <td>titleFormat</td> 
   <td>设置用于显示日历头部的文本信息，默认：<br> { <br> month: 'MMMM yyyy', // September 2013<br> week: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}", // Sep 7 - 13 2013<br> day: 'dddd, MMM d, yyyy' // Tuesday, Sep 8, 2013<br> }</td> 
   <td>见描述</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>buttonText</td> 
   <td>设置日历头部各按钮的显示文本信息，默认：<br> { <br> prev: '‹', // ‹<br> next: '›', // ›<br> prevYear: '«', // «<br> nextYear: '»', // »<br> today: 'today',<br> month: 'month',<br> week: 'week',<br> day: 'day'<br> }</td> 
   <td>见描述</td> 
  </tr> 
  <tr> 
   <td>monthNames</td> 
   <td>月份全称，默认：<br> ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']</td> 
   <td>见描述</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>monthNamesShort</td> 
   <td>月份名称简写，默认：['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun' 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']</td> 
   <td>见描述</td> 
  </tr> 
  <tr> 
   <td>dayNames</td> 
   <td>星期全称，默认：['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']</td> 
   <td>见描述</td> 
  </tr> 
  <tr> 
   <td>dayNamesShort</td> 
   <td>星期名称简写，默认：['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']</td> 
   <td>见描述</td> 
  </tr> 
  <tr> 
   <td>weekNumberTitle</td> 
   <td>周次，即一年中的第几周</td> 
   <td>"W"</td> 
  </tr> 
 </tbody> 
</table>

鼠标单击和滑过

以下列出的是当鼠标单击或者滑过日历中的某个元素时，回调的函数callback。

<table> 
 <tbody> 
  <tr> 
   <td>dayClick</td> 
   <td>当单击日历中的某一天时，触发callback，用法：<br> $('#calendar').fullCalendar({ <br> dayClick: function(date, allDay, jsEvent, view) { <br> do something...<br> }<br> });<br> date是点击的day的时间(如果在agenda view, 还包含时间)，在月view下点击一天时，allDay是true，在agenda模式下，点击all-day的窄条时，allDay是true，点击其他的agenda view下的day则为false，jsEvent就是一个普通的javascript事件，包含的是click事件的基础信息。</td> 
  </tr> 
  <tr> 
   <td>eventClick</td> 
   <td>当点击日历中的某一日程（事件）时，触发此操作，用法：<br> $('#calendar').fullCalendar({ <br> dayClick: function(event, jsEvent, view) { <br> do something...<br> }<br> });<br> event是日程（事件）对象，jsEvent是个javascript事件，view是当前视图对象。</td> 
  </tr> 
  <tr> 
   <td>eventMouseover<br> eventMouseout</td> 
   <td>鼠标划过和离开的事件，用法和参数同上</td> 
  </tr> 
 </tbody> 
</table>

选择操作

<table> 
 <tbody> 
  <tr> 
   <td>selectable</td> 
   <td>是否允许用户通过单击或拖动选择日历中的对象，包括天和时间。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>selectHelper</td> 
   <td>当点击或拖动选择时间时，显示默认加载的提示信息，该属性只在周/天视图里可用。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>unselectAuto</td> 
   <td>当点击页面日历以外的位置时，是否自动取消当前的选中状态。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>unselectCancel</td> 
   <td>指定哪些元素不会清空当前的选中，以JQUERY选择器的方式指定 '#someId'。</td> 
   <td>''</td> 
  </tr> 
  <tr> 
   <td>select</td> 
   <td colspan="2">callback，被选中的函数回调，使用方法：<br> function( startDate, endDate, allDay, jsEvent, view )<br> startDate：被选中区域的开始时间<br> endDate：被选中区域的结束时间<br> allDay：是否为全天事件<br> startDate：jascript对象<br> startDate：当前视图对象<br> &nbsp;</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>unselect</td> 
   <td colspan="2">callback，选中被取消时的回调，使用方法：<br> function( view, jsEvent )</td> 
  </tr> 
  <tr> 
   <td>select</td> 
   <td colspan="2">method，选中某个时间，使用方法：<br> $('#calendar').fullCalendar( 'select', startDate, endDate, allDay )</td> 
  </tr> 
  <tr> 
   <td>unselect</td> 
   <td colspan="2">method，取消选中，使用方法：<br> $('#calendar').fullCalendar( 'unselect' )</td> 
  </tr> 
 </tbody> 
</table>

日程事件数据

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

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

<table> 
 <tbody> 
  <tr> 
   <td>id</td> 
   <td>可选，事件唯一标识，重复的事件具有相同的id</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>必须，事件在日历上显示的title</td> 
  </tr> 
  <tr> 
   <td>allDay</td> 
   <td>可选，true or false，是否是全天事件。</td> 
  </tr> 
  <tr> 
   <td>start</td> 
   <td>必须，事件的开始时间。</td> 
  </tr> 
  <tr> 
   <td>end</td> 
   <td>可选，结束时间。</td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>可选，当指定后，事件被点击将打开对应url。</td> 
  </tr> 
  <tr> 
   <td>className</td> 
   <td>指定事件的样式。</td> 
  </tr> 
  <tr> 
   <td>editable</td> 
   <td>事件是否可编辑，可编辑是指可以移动, 改变大小等。</td> 
  </tr> 
  <tr> 
   <td>source</td> 
   <td>指向次event的eventsource对象。</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>背景和边框颜色。</td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>背景颜色。</td> 
  </tr> 
  <tr> 
   <td>borderColor</td> 
   <td>边框颜色。</td> 
  </tr> 
  <tr> 
   <td>textColor</td> 
   <td>文本颜色。</td> 
  </tr> 
 </tbody> 
</table>

事件源对象

事件源即日历中的数据来源，FullCalendar提供了数组、函数调用、以及JSON数据的形式，当然也可以通过Google Calendar feed获取数据接口。helloweba.com后面会有文章专门介绍事件数据的操作，包括数据的查询、写入、更新和删除操作。

以下是Event事件相关的参数属性说明。

<table> 
 <tbody> 
  <tr> 
   <td>eventSources</td> 
   <td>事件源，存储数组对象，可以是Arrays/Functions/URLs。</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>allDayDefault</td> 
   <td>是否为全天日程事件，显示这一天中所做的事情。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>ignoreTimezone</td> 
   <td>是否忽略时区。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>startParam</td> 
   <td>在使用URL方式获取events数据源的时候, 自动插入到URL中的参数, 表示当前需要抓取的日程事件的起始时间。</td> 
   <td>'start'</td> 
  </tr> 
  <tr> 
   <td>endParam</td> 
   <td>和startParam参数意义相同, 表示要抓取的日程事件的终止时间。</td> 
   <td>'end'</td> 
  </tr> 
  <tr> 
   <td>lazyFetching</td> 
   <td>是否从缓存信息获取event。比如从月视图切换到周视图。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>eventDataTransform</td> 
   <td colspan="2">callback，将外部数据源转换成Fullcalendar可以处理的数据</td> 
  </tr> 
  <tr> 
   <td>loading</td> 
   <td colspan="2">callback，日历开始加载的时候，isLoading参数为true触发一次，日历加载完毕，isLoading参数为false触发一次，用法：<br> function(isLoading, view)</td> 
  </tr> 
  <tr> 
   <td>updateEvent</td> 
   <td colspan="2">method，更新日历空间中的一个日程事件，如果是重复的日程事件，则都更新。用法：<br> $('#calendar').fullCalendar( 'updateEvent', event )</td> 
  </tr> 
  <tr> 
   <td>clientEvents</td> 
   <td colspan="2">method，返回FullCalendar已经存储到客户端的CalEvents对象数组， 第二个参数和removeEvents方法的第二个参数意义相同， 只不过在过滤器中， 如果返回true， 则该CalEvent对象将被加入到返回的数组中。</td> 
  </tr> 
  <tr> 
   <td>removeEvents</td> 
   <td colspan="2">method，从日历中删除一个日程事件. 第二个参数可以不填， 可以填id， 可以是一个过滤器(一个函数， 接受CalEvent对象作为参数)。用法：<br> $('#calendar').fullCalendar( 'removeEvents' [, idOrFilter ] )</td> 
  </tr> 
  <tr> 
   <td>refetchEvents</td> 
   <td colspan="2">method，重新抓取所有的日程事件源上的日程事件并渲染它们。</td> 
  </tr> 
  <tr> 
   <td>addEventSource</td> 
   <td colspan="2">method，添加一个日程事件源，添加之后， FullCalendar会马上从该源获取日程事件， 并加载到日历中。第二个参数和定义Calendar时候使用的url参数一致。</td> 
  </tr> 
  <tr> 
   <td>removeEventSource</td> 
   <td colspan="2">method，移除一个日程事件源，该源上获取得到的日程时间也将被马上从日历中移除。</td> 
  </tr> 
 </tbody> 
</table>

事件渲染

<table> 
 <tbody> 
  <tr> 
   <td>eventColor<br> eventBackgroundColor<br> eventBorderColor<br> eventTextColor</td> 
   <td>设置日程事件的背景色和边框色，以及文本颜色。可以使用任意支持css的颜色方式，如 #f00, #ff0000, rgb(255,0,0), or red。</td> 
  </tr> 
  <tr> 
   <td>eventRender</td> 
   <td>callback，当日程事件渲染时触发，用法：<br> function(calEvent, element, view)</td> 
  </tr> 
  <tr> 
   <td>eventAfterRender</td> 
   <td>callback，当日程事件被渲染后触发，用法：<br> function( event, element, view ) { }</td> 
  </tr> 
  <tr> 
   <td>eventDestroy</td> 
   <td>callback，当日程事件移出时触发，用法：<br> function( event, element, view ) { }</td> 
  </tr> 
  <tr> 
   <td>renderEvent</td> 
   <td>method，一旦日历重新取得日程源，则原有日程将消失，当指定stick为true时，日程将永久的保存到日历上。</td> 
  </tr> 
  <tr> 
   <td>rerenderEvents</td> 
   <td>method，重新渲染所有事件。</td> 
  </tr> 
 </tbody> 
</table>

日程事件拖动和缩放

拖动和缩放功能依赖于jQuery ui的draggable和resizable，所以在使用时要提前加载[jQuery ui][]相关插件。

<table> 
 <tbody> 
  <tr> 
   <td>editable</td> 
   <td>是否可编辑，即进行可拖动和缩放操作。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>eventStartEditable</td> 
   <td>是否让事件在开始时就可以拖动。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>dragRevertDuration</td> 
   <td>如果拖拽不成功，多久回复原状，毫秒</td> 
   <td>500</td> 
  </tr> 
  <tr> 
   <td>dragOpacity</td> 
   <td>拖动时候的不透明度。<br> { <br> agenda:.5 //对于agenda试图<br> '':1.0 //其他视图<br> }</td> 
   <td>见描述</td> 
  </tr> 
  <tr> 
   <td>eventDragStart,<br> eventDragStop</td> 
   <td colspan="2">callback，日程事件被拖动之前和之后触发。这里的拖动不一定是一个有效的拖动，只要日程事件的控件被拖着动了，事件就触发。 可以从该对象中获取位移，位置等数据。用法： function( event, jsEvent, ui, view ) { }</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>eventDrop</td> 
   <td colspan="2">callback，当拖拽完成并且时间改变时触发，用法：<br> function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) { }<br> ayDelta 保存日程向前或者向后移动了多少天<br> minuteDelta 这个值只有在agenda视图有效，移动的时间<br> allDay 如果是月视图，或者是agenda视图的全天日程，此值为true,否则为false</td> 
  </tr> 
  <tr> 
   <td>eventResizeStart,&nbsp;<br> eventResizeStop</td> 
   <td colspan="2">callback，在一个日程事件改变大小之前之后发生(不一定要改变成功)，用法：<br> function( event, jsEvent, ui, view ) { }</td> 
  </tr> 
  <tr> 
   <td>eventResize</td> 
   <td colspan="2">callback，在日程事件改变大小并成功后调用, 参数和eventDrop参数用法一致。用法：<br> function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) { }</td> 
  </tr> 
 </tbody> 
</table>

日期工具

<table> 
 <tbody> 
  <tr> 
   <td>formatDate</td> 
   <td>格式化日期，通过指定的格式格式化一个日期，返回一个字符串。options选项是一个对象，其中设置本地化变量支持的属性值. 比如{ monthNames : ['一月'，'二月'，……]，dayNames: ['周日'，'周一'，…..]}，用法：<br> $.fullCalendar.formatDate( date，formatString [,options ] )</td> 
  </tr> 
  <tr> 
   <td>formatDates</td> 
   <td>一次格式化两个日期，和上一个格式化日期类似，只不过，这里在formatString中使用大括号{…}来描述第二个日期的格式化方式。用法：<br> $.fullCalendar.formatDates( date1，date2，formatString [,options ] )</td> 
  </tr> 
  <tr> 
   <td>parseDate</td> 
   <td>解析日期，将一个字符串格式成一个javascript的Date对象，这个string可以是ISO8601，IETF，UNIX时间戳三种格式。用法:<br> $.fullCalendar.parseDate( string )</td> 
  </tr> 
  <tr> 
   <td>parseISO8601</td> 
   <td>将一个ISO8601字符串转换成一个javascript 的Date对象。用法：<br> $.fullCalendar.parseISO8601( string [,ignoreTimezone ] )</td> 
  </tr> 
 </tbody> 
</table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODI3MjQ1NTYz_size_16_color_FFFFFF_t_70]: /images/20220322/e8b8ba05de5d4f58b9c6a3bfe100f21c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODI3MjQ1NTYz_size_16_color_FFFFFF_t_70 1]: /images/20220322/3f82e8c525014ffe8aa75793c5e8a089.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODI3MjQ1NTYz_size_16_color_FFFFFF_t_70 2]: /images/20220322/7e048656a2aa403f9dbf19e1cf4fc54f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODI3MjQ1NTYz_size_16_color_FFFFFF_t_70 3]: /images/20220322/a9bcf2642e9e4c3da1a1d98feceb4d39.png
[https_blog.csdn.net_qw_xingzhe_article_details_44920943]: https://blog.csdn.net/qw_xingzhe/article/details/44920943
[jQuery ui]: http://jqueryui.com/