fullcalendar日历控件知识点集合

1、基本语法：首先，fullcalendar和JQUERY一样，以面向对象的方式来组织代码。当然，这里的面向对象仅仅是指可以把整个fullcalendar理解为一个类，这个类里包括有很多的属性、方法、委托(函数回调)作为成员变量。通过为这些成员变量赋值，即可实例化出一个符合自己需求的fullcalendar实例出来，即最终在浏览器里渲染出的日历。换句话说，我们所做的绝大多数工作就是按照fullcalendar的语法约定去配置出一个符合我们需求的fullcalendar实例。除非对于极少的特殊需求，fullcalendar向我们提供的接口不足以满足，才会去修改fullcalendar本身的js文件。作为一种JQUERY插件，可以把fullcalendar理解为向 jquery对象集里添加了一个日历相关的对象，这个对象里相关方法、属性、的调用方式，即为fullcalendar的基本语法。整个语法分为两种：第一种和日历本身无关，仅仅是利用fullcalendar提供的方法来进行字符串和日期间的转换，形式如下：$.fullCalendar.formatDate();第二种则是与和配置fullcalendar实例相关的，这最终会影响到fullcalendar在浏览器里的渲染，形式如下$(‘#someId’) .fullCalendar(content);$(‘#someId’)将得到一个jquery对象，其中someId为你希望渲染日历的元素id。重点是后面一部分.fullCalendar(content);Content有三种形式：①为属性赋值 {key:value,…}$('#calendar').fullCalendar({weekends: false // will hide Saturdays and Sundays});这里即得到一个fullcalendar实例，其中weekends属性为false,即月日历不会显示周末。②方法调用'methodName','para'$('#calendar').fullCalendar('next')这里会调用fullcalendar实例的next方法，其结果是浏览器的日历向后翻一月(日)③为方法回调赋值$('#calendar').fullCalendar({dayClick: function() { alert('a day has been clicked!'); }});这里是为日历控件的dayClick事件赋值为相应的匿名函数，其结果是日历的每日被点击时，会弹出对话框。我想先有这样一种观念更便于后面的理解，需要渲染一个fullcalendar控件时，通常是直接在实例化一个fullcalendar时即完成它的绝大多数属性 和委托的赋值，如此即得到一个会被浏览器渲染成日历的fullcalendar对象（A），当这个对象已经被渲染后，如果需要动态的修改它的相关配置，可以通过$('#calendar').fullCalendar('option','aspectRatio', 1.8); 的形式去修改。如果需要对象A发生某些变化，也可以调用A的某些方法，比如说翻页。2、内容框架整个fullcalendar由两部分组成日历+事件其中日历即为由js脚本在浏览器描绘出的日历控件，这一部分完全由js控制，和服务器无需相关联。事件则是日历功能的扩展，可以把事件理解为一个个会议安排。这些会议安排通常是保存在服务器的，在每次页面加载时，fullcalendar得到会议安排的集合，然后按照其中的日期去把事件描绘到日历对应的地方。3、知识点概要余下详细的知识点均为fullcalendar官方文档的翻译和组合。每一部分均按照属性、方法、函数回调的顺序来组织。通常会有相关知识点的简介，对于比较复杂或者关键的点，会有相关联的代码作为事例。同样，这些事例也出之于fullcalendar官方文档。以下是对这所有知识点的归纳和概览日历部分：视图：日历的不同的展现模式。当前共有5中视图视图的通用配置：这一部分的配置通常可以对5中视图均有效。视图对象：fullcalendar的视图Module获取视图对象以及跳转到指定视图的方法议程相关：即对议程视图模式下，相关细节的配置日期相关：涉及到日历系统里日期的显示格式，日历加载的日期，以及获取相关日期或者日历改变日期的相关方法时间和文本的自定义设置：涉及到自定义或者本地化的相关配置大多在这里完成鼠标的相关事件捕获：比如鼠标单击到某个特殊地方（日历中的某一天等）等触发的方法在这里配置选中元素的配置：这一部分是来配置当鼠标点击某一日历元素时，是否选中该元素以及与此相关的事件事件部分如下：事件Module包含的信息事件的产生：包括事件源的管理和事件的管理事件的描绘：把一个事件描绘到浏览器的整个过程包含在这里拖拽事件：用鼠标拖拽以移动某个时间，这需要其他JQUERY ui插件的支持从日历外拖拽事件到日历内以添加事件：对日历内拖拽事件的扩展4、详细知识点4.1、合法的视图month - see example 月视图basicWeek - see example 周视图（一周内事件和日期的集合）basicDay - see example (一日内事件和日期的集合)agendaWeek - see example (周日程表)agendaDay - see example (日日程表)4.2、视图的通用配置header头部显示的信息，分left , center, right三个部位合法的属性值：title,prev,next,prevYear,nextYear,today, avaibleViewNameheader: {left: 'title',center: 'prevYear,nextYear',right: 'prev,today,next,agendaDay,month'}theme当为true时，可以配合JQUERY-UI，配置日历的皮肤buttonIcons：http://jqueryui.com/themeroller/buttonIcons: {prev: 'circle-triangle-w',next: 'circle-triangle-e'}注意去掉.ui-icon-firstDay：每周开始的日期：0为周日isRTL：是否从右至左组织日历weekends：是否显示周末weekMode：周的显示模式：fixed：每月始终显示6周liquid：周数不定，每周的高度可变，整个日历高度不变variable：周数不定，每周的高度固定，整个日历的高度可变height整个日历的高度（包括header和content）contentHeight内容高度：aspectRatio宽和高的比例$('#calendar').fullCalendar('option','aspectRatio', 1.8); 可以动态设置viewDisplay (callback)函数回调，每次view显示时均会调用function( view ) { }View是view对象windowResize (callback)函数回调，每次窗口大小改变时调用，viewDisplayrender (method)立刻显示viewdestroy (method)释放calendar，包括相关数据defaultView：日历初始化时的视图，默认为month4.3、视图对象viewObjectname可用的5个视图名之一title视图部分的title 2012.9.1start当天view开始的第一天endvisStartVisible Start DayvisEnd在相关方法回调中均会有次对象4.4、获取视图对象.fullCalendar( 'getView' )切换视图.fullCalendar( 'changeView', viewName )4.5、议程相关——控制日程相关的视图的显示信息allDaySlot是否显示全天日程allDayText显示的文字axisFormat日期显示的格式slotMinutes间隔时间defaultEventMinutes默认的事件持续事件firstHour在日程view里可见的起始时间，可通过滚动条滚动到在此时间之前的时间minTime整日日程的起始时间maxTime整日日程的结束时间4.6、日期相关year日历加载时的年份month日历加载时的月份（从0开始）date日历加载时在月份的天数（对周视图和日视图有效）prev (method)日历跳转到前一天next (method)日历跳转到后一天prevYear (method)日历跳转到前一年nextYear (method)日历跳转到后一年today (method)日历跳转到当前日期gotoDate (method)日历跳转到指定日期incrementDate (method)日历向前（向后）跳转一段时间getDate (method)获取日历的当前日期 Date类型4.7、时间和文本的自定义timeFormat每个事件默认显示的时间格式columnFormat每个视图列名显示的格式、{ month: 'ddd', // Monweek: 'ddd M/d', // Mon9/7day: 'dddd M/d' // Monday9/7 }titleFormat每个视图里title显示的格式{ month: 'MMMM yyyy', // September 2009week: "MMM d[ yyyy]{'—'[ MMM] d yyyy}", // Sep 7 - 13 2009day: 'dddd, MMM d, yyyy'// Tuesday, Sep 8, 2009 }buttonText视图里每个button显示的文字{ prev: ' ◄ ', // left trianglenext:' ► ', // right triangleprevYear:' << ', // <<nextYear:' >> ', // >>today: 'today',month: 'month',week: 'week',day: 'day' }monthNames月的全称monthNamesShort月的简称dayNames星期的全称dayNamesShort星期的简称4.8、相关点击事件dayClick (callback)当某天被点击时触发function( date, allDay, jsEvent, view ) { }date：当前点击到的日期allDay ：是否是全天性的jsEvent：底层的JS事件view ：当前的view对象this关键字指代为<td>eventClick (callback)当一个事件给点击时触发function( event, jsEvent, view ) { }event ：当前的event对象jsEvent ：底层的JS事件view ：当前的viewthis：指代的<td>里的<div>元素eventMouseover (callback)鼠标滑动到事件上触发，同eventClick类似eventMouseout (callback)鼠标离开到事件上触发，同eventClick类似4.9、选中相关：当点击或者拖拽到相关位置时，非否选中对应元素selectable是否选中对应元素selectHelper在日程表相关的view里，当选中对应时刻时，是否显示相关信息unselectAuto当点击页面日历以外的位置时，是否自动取消当前的选中unselectCancel指定哪些元素不会清空当前的选中，以JQUERY选择器的方式指定 '#someId'select (callback)被选中时的函数回调function( startDate, endDate, allDay, jsEvent, view )unselect (callback)选中被取消时的回调select (method)选中某个时间.fullCalendar( 'select', startDate, endDate, allDay )unselect (method)取消选中.fullCalendar( 'unselect' )4.10、Event相关EventObject事件对象id可选，事件唯一标识，重复的事件具有相同的title必须，事件在日历上显示的titleallDay可选，是否是整日事件start必须，事件的开始时间end可选，结束时间url可选，当指定后，事件被点击将打开对应urlclassName指定事件的样式editable是否可拖拽source指向次event的eventsource对象color背景和边框颜色backgroundColor背景颜色borderColor边框颜色textColor文本颜色EventSource ObjectEVENTS:在日历界面里，参数event的对象：分array，json feed，function三种类型Eventsource:{events: [{ title: 'Event1',start: '2011-04-04' },{ title: 'Event2',start: '2011-05-05' } // etc... ],color: 'yellow', // anoption!textColor: 'black' // an option!}eventsource可选的配置选项className指定事件的样式editable是否可拖拽source指向次event的eventsource对象color背景和边框颜色backgroundColor背景颜色borderColor边框颜色textColor文本颜色events (asan array)数组形式组织的事件集$('#calendar').fullCalendar({events: [{title : 'event1',start : '2010-01-01'},{&3ff0nbsp; title : 'event2',start : '2010-01-05',end : '2010-01-07'},{title : 'event3',start : '2010-01-09 12:30:00',allDay : false //will make the time show}]});events (asa json feed)JSON源方式获取的events每次当view的时间改变时，均会获取json。其中start和end为对应view的start和end，插入_是默认不访问浏览器缓存。可通过cache:true来默认读取浏览器缓存$('#calendar').fullCalendar({events: '/myfeed.php'});会被转换为如下url请求/myfeed.php?start=1262332800&end=1265011200&_=1263178646events (asa function)作为方法的形式获得event$('#calendar').fullCalendar({events: function(start,end, callback) {$.ajax({url:'myxmlfeed.php',dataType: 'xml',data: {// ourhypothetical feed requires UNIX timestampsstart:Math.round(start.getTime() / 1000),end: Math.round(end.getTime()/ 1000)},success:function(doc) {var events =[];$(doc).find('event').each(function() {events.push({title:$(this).attr('title'),start:$(this).attr('start') // will be parsed});});callback(events);}});}});start和end同之前开始和结束时间（默认为-1970的毫秒）callback为当获取到event后，会调用的改回调函数，把数据放入fullcalendar里的events里。eventSources可以放置多个eventSource（events）$('#calendar').fullCalendar({eventSources: ['/feed1.php','/feed2.php']});allDayDefault当event object里的allDay为指定时，其默认值ignoreTimezone忽略timeZone2008-11-05T08:15:30-05:00startParam传递给服务器的start参数名endParam同上lazyFetching当view改变时，是否从缓存信息获取event。比如从月视图切换到周视图，默认为是loading (callback)function( isLoading, view )当调用ajax获取event是触发。updateEvent (method)在客户端更新event并在页面上重新描绘clientEvents (method)获取客户端保存的所有events对象.fullCalendar( 'clientEvents' [, idOrFilter ]) -> ArrayremoveEvents (method)删除event并重新描绘refetchEvents (method)重新获取events并重新描绘addEventSource (method)添加eventSource，并立刻在页面上描绘.fullCalendar( 'addEventSource', source )removeEventSource (method)同上4.11、事件描绘（对应于整个callendar里的事件）eventColoreventBackgroundColoreventBorderColoreventTextColoreventRender (callback)当描绘事件时触发function( event, element, view ) { }event为改事件，element为用来渲染改事件的div元素eventAfterRender (callback)同上renderEvent (method).fullCalendar( 'renderEvent', event [, stick ] )rerenderEvents (method).fullCalendar( 'rerenderEvents' )同refetchEvents4.12、拖拽事件需要添加JQUERY UIDraggable 插件，并把editable设置为true。相关属性和方法同事件类似editableDetermines whether the events on the calendar can be modified.disableDraggingDisables all event dragging, even when events are editable.disableResizingDisables all event resizing, even when events are editable.dragRevertDurationTime it takes for an event to revert to its original position afteran unsuccessful drag.dragOpacityThe opacity of an event while it is being dragged.eventDragStart (callback)Triggered when event dragging begins.eventDragStop (callback)Triggered when event dragging stops.eventDrop (callback)Triggered when dragging stops and the event has moved to a differentday/time.eventResizeStart (callback)Triggered when event resizing begins.eventResizeStop (callback)Triggered when event resizing stops.eventResize (callback)Triggered when resizing stops and the event has changed in duration.4.13、从日历外拖拽事件到日历中额外需求：①需要jquery-ui相关控件的支持jquery-ui-1.8.17.custom.min.js②日历的dropple属性需设置为true基本思路①在日历胖构建好用来拖拽的元素<div>②设置相应div的drop操作$('#external-events div.external-event').each(function() {// create an Event Object// it doesn't need to have a start or endvar eventObject = {title: $.trim($(this).text()) // use the element's text as the eventtitle};// store the Event Object in the DOM element so we can get to itlater$(this).data('eventObject', eventObject);// make the event draggable using jQuery UI$(this).draggable({zIndex: 999,revert: true, // willcause the event to go back to itsrevertDuration: 0 // original position after the drag});});③在日历中的drop回调中进行构造event并描绘drop: function(date, allDay) { // this function is called whensomething is dropped// retrieve the dropped element's stored Event Objectvar originalEventObject = $(this).data('eventObject');// we need to copy it, so that multiple events don't have areference to the same objectvar copiedEventObject = $.extend({}, originalEventObject);// assign it the date that was reportedcopiedEventObject.start = date;copiedEventObject.allDay = allDay;// render the event on the calendar// the last `true` argument determines if the event"sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);// is the "remove after drop" checkbox checked?if ($('#drop-remove').is(':checked')) {// if so, remove the element from the "Draggable Events"list$(this).remove();}}4.14、日期转换工具formatDate (function)Formats a Date object into a string.formatDates (function)Formats a date range (two Date objects)into a string.parseDate (function)Parses a string into a Date object.parseISO8601 (function)Parses an ISO8601 string into a Dateobject.