[jquery]fullCalendar具体应用.docx

1.与google日历连接，别忘记加入events: $.fullCalendar.gcalFeed(/calendar/feeds//private-660ae86cc26345cff3430480e8eea4bb/basic,className:gcal-event,editable:true,currentTimezone:Asia/Shanghai)2.表头信息agenda带有具体的时间格子month,basicWeek,basicDay,agendaWeek,agendaDay 是5种不同的视图空格和,的区别header:left: month,basicWeek,basicDay,agendaWeek,agendaDay,center: title,right: prevYear,prev,today,next,nextYear3.是否使用 jquery的主题(我用的是start主题)theme:true4.buttonText:prev: 昨天,next: 明天,prevYear: 去年,nextYear: 明年,today: 今天,month: 月,week: 周,day: 日5.每周的第一天是哪天Sunday=0, Monday=1, Tuesday=2, etc.firstDay:16.日期从右向左显示.不知道什么时候会这么用isRTL:false7.是否显示周末weekends:true8.在月视图里显示周的模式，因为可能每月周数不同，所以月视图高度不一定，注意引号fixed 固定显示6周高，高度永远保持不变liquid 不固定周数，周高度可变化variable 不固定周数，但高度固定weekMode:fixed9.日历高度,包括表头height: 850内容高度，不包括表头contentHeight: 60010.单元格宽与高度的比值注意：此属性不能与日历高度同时存在aspectRatio: 1.3511.切换视图的时候要执行的操作view是一个对象，后面将说道具体的属性viewDisplay:function(view)12.窗口大小变化时执行的操作windowResize: function(view)13.把日历绑定到一个id的东西上$(#id).fullCalendar(render);14.销毁id日历把日历回复到初始化前，删除了所有元素，时间，和初始化数据$(#id).fullCalendar(destroy);15.默认显示的视图，注意引号defaultView:month16.view对象的属性name: 包括month,basicWeek,basicDay,agendaWeek,agendaDaytitle: 标题内容(例如September 2009 or Sep 7 - 13 2009)start:Date类型, 该view下的第一天.end:Date类型, 该view下的最后一天. 由于是一个闭合的值, 所以, 比如在month view下, 10月这个月份, 那么end对应的应该是11月的第一天.visStart:Date类型. 在该view下第一个可以访问的day. month view下, 该值是当月的第一天, week view下, 则通常和start一致.visEnd: Date类型, 最后一个可访问的day17.集中设定初始化值可以设置的属性有 dragOpacity, titleFormat, columnFormat, and timeFormat被应用的视图有 month: / month view week: / basicWeek & agendaWeek views day: / basicDay & agendaDay views agenda: / agendaDay & agendaWeek views agendaDay: / agendaDay view agendaWeek: / agendaWeek view basic: / basicWeek & basicDay views basicWeek: / basicWeek view basicDay: / basicDay view : / (an empty string) when no other properties match18.取得视图对象.fullCalendar(getView)-View Objectvar view = $(#calendar).fullCalendar(getView);alert(The views title is + view.title);19.改变当前视图.fullCalendar(changeView,viewName)20.20里以下属性都是在agenda视图里起作用的在agenda开头的视图里，是否显示最上面all-day那一栏allDaySlot:true默认的文字:allDayText:今天的任务左边那一列时间的格式:axisFormat:h(:mm)tt()表示整点就不显示里面的内容 支持的格式化占位符1. s: 秒2. ss: 秒, 两位3. m: 分钟4. mm: 分钟, 两位5. h: 小时, 12小时制6. hh: 小时, 12小时制, 两位7. H: 小时, 24小时制8. HH: 小时, 24小时制, 两位9. d: 日期数字10. dd: 日期数字, 两位11. ddd: 日期名称, 缩写12. dddd: 日期名称, 全名13. M: 月份数字14. MM: 月份数字, 两位15. MMM: 月份名称, 缩写16. MMMM: 月份名称, 全名17. yy: 两位的年份18. yyyy: 4位的年份19. t: 上下午加 a或者p20. tt: 上下午加am或pm21. T: 上下午加A 或者P22. TT: 上下午加AM或PM23. u: ISO8601格式24. S: 给日期加上st, nd, rd, th等后缀, 表明是第几天每行的时间间隔slotMinutes:10滚动条滚动到得起始时间firstHour: 7每天从几点起开始显示minTime:7minTime:7:30如果加上了分钟需要设置时间间隔每天显示到几点结束maxTime:24maxTime:23:10事件默认的时间执行长度defaultEventMinutes:120此时，如果事件对象没有指定执行多长时间，则默认执行两个小时，后面将说到事件对象21.当前日期year: 必须是4位数字，如果不指定，则是当前年month: 当前月，从0开始，如果当前年和月都未指定，则月显示为1月date:日期的一个月，这个属性只和周视图和日视图有关，如果没指定，并且年月也没有指定，则显示一个月的第一天以下8个关于操作日期的方法.fullCalendar(prev) 返回到上一个年月日，与视图的种类有关.fullCalendar(next).fullCalendar(prevYear).fullCalendar(nextYear).fullCalendar(today).fullCalendar( gotoDate, year , month, date ) 注意月从0开始.fullCalendar( incrementDate, years , months, days ).fullCalendar( getDate ) - Date 取得一个日期对象$(#my-button).click(function() var d = $(#calendar).fullCalendar(getDate); alert(The current date of the calendar is + d););22.指定默认的时间格式timeFormat:h(:mm)tt23.指定默认的列格式columnFormat: month: ddd, / Mon week: ddd M/d, / Mon 9/7 day: dddd M/d / Monday 9/724.标题格式化titleFormat: month: MMMM yyyy, / September 2009 week: MMM d yyyy — MMM d yyyy, / Sep 7 - 13 2009 day: dddd, MMM d, yyyy / Tuesday, Sep 8, 200925.月显示的名字monthNames:January, February, March, April, May, June, July,August, September, October, November, DecembermonthNames:一月,二月, 三月, 四月, 五月, 六月, 七月,八月, 九月, 十月, 十一月, 十二月月名字的简写monthNamesShort:Jan, Feb, Mar, Apr, May, JunJul, Aug, Sep, Oct, Nov, Dec26.星期显示的名字dayNames:Sunday, Monday, Tuesday, Wednesday,Thursday, Friday, SaturdaydayNames:星期日, 星期一, 星期二, 星期三,星期四, 星期五, 星期六星期名字的缩写dayNamesShort:Sun, Mon, Tue, Wed, Thu, Fri, Sat27.4个关于鼠标的回调方法当点击某一天时触发此操作dayClick:function( date, allDay, jsEvent, view ) dayClick: function(date, allDay, jsEvent, view) if (allDay) alert(Clicked on the entire day: + date); else alert(Clicked on the slot: + date); alert(Coordinates: + jsEvent.pageX + , + jsEvent.pageY); alert(Current view: + ); / change the days background color just for fun $(this).css(background-color, red); 当点击某一个事件时触发此操作eventClick:function( event, jsEvent, view ) eventClick: function(calEvent, jsEvent, view) alert(Event: + calEvent.title); alert(Coordinates: + jsEvent.pageX + , + jsEvent.pageY); alert(View: + ); / change the border color just for fun $(this).css(border-color, red); 当鼠标悬停在一个事件上触发此操作eventMouseover:function( event, jsEvent, view ) 当鼠标从一个事件上移开触发此操作eventMouseout:function( event, jsEvent, view ) 28.事件对象fullcalendar用来存储一个日历事件信息的标准对象一下属性中，只有title和start是必须的id:String/Integer (optional)title:StringallDay:true or false (optional) 指定是否是全天事件start:Date 事件开始时间，格式如下IETF format (ex: Wed, 18 Oct 2009 13:00:00 EST)ISO8601 format (ex: 2009-11-05T13:15:30Z)end: Date (optional) 事件结束时间如果事件是一个全天事件，则结束时间包括在内如果事件不是全天事件，结束时间是0:00，则结束时间的第二天不包括在内url:String (optional) 当用户点击时，将会访问的网址className: String/Array (optional) 这个事件使用的css 类名editable:true or false (optional) 事件是否可编辑source: Array/String/Function (automatically populated) 事件源，自动指定除了以上属性外，你可以自己指定属性和值29.事件数组 events (as an array)events: title : event1, start : 2010-01-01 , 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 事件Json源 events (as a json feed)events: /myfeed.php 该URL返回一个json或数组的日程事件组, GET参数视startParam和endParam选项而定当用户改变视图时触发此事件，FullCalendar 将通过GET方法传递参数来确定需要哪些日程数据/myfeed.php?start=1262332800&end=1265011200&_=1263178646startParam:start 开始参数的名字endParam:end 结束参数的名字cacheParam:_ 缓存参数的名字lazyFetching:true 只有当需要的时候才取得数据，先从缓存里读取数据_参数是自动加上去的，防止读缓存内容日程事件 events (as a function)events:function( start, end, callback ) events: function(start, end, callback) $.ajax( url: myxmlfeed.php, dataType: xml, data: / our hypothetical feed requires UNIX timestamps start: Math.round(start.getTime() / 1000), end: Math.round(end.getTime() / 1000) , success: function(doc) var events = ; $(doc).find(event).each(function() event.push( title: $(this).attr(title), start: $(this).attr(start) / will be parsed ); ); callback(events); ); 30.事件源eventSources 存储数组对象，可以是Arrays/Functions/URLseventSources: $.fullCalendar.gcalFeed(/feed1), $.fullCalendar.gcalFeed(/feed2) 31.日程默认为全天日程allDayDefault:true32.当读取ajax数据时loading:function( isLoading, view )当开始读取的时候是true,当读取完成是false33.改变日程事件updateEvent:eventClick: function(event, element) event.title = CLICKED!; $(#calendar).fullCalendar(updateEvent, event); 日程对象可以通过回调函数被获得，比如 eventClick 或者 clientEvents的方法34.取得客户端内存中保存的日程对象clientEvents.fullCalendar( clientEvents , idOrFilter ) - Array 返回一个日程对象的数组如果idOrFilter不写，则输出全部保存在客户端的日程对象数组如果为ID ，则返回所有为此ID的对象还可以为一个过滤function 接受一个日程对象，如果返回true，则此值包含在客户端对象组中国35.从日历中删除日程removeEvents 参数同上36.重新取得日程.fullCalendar(refetchEvents) 从所有源并且重新渲染到屏幕上37.增加一个日程源.fullCalendar(addEventSource,source)源可以是Array/URL/Function ，获取的数据可以立刻显示在日历上38.删除一个事件源.fullCalendar(removeEventSource,source)39.日程绑定eventRender.function( event, element, view ) event 是企图被渲染的日程对象element 是一个新建的jQuery被用来渲染的，他已经在恰当的时间被创建eventRender 返回函数可以修改element，返回一个新的dom元素，用来替换被渲染的元素，或者返回false，禁止被渲染40.日程渲染后事件eventAfterRender:function( event, element, view ) 41.渲染事件.fullCalendar(renderEvent,event,stick)通常，一旦日历重新取得日程源，则原有日程将消失，当指定stick为true时，日程将永久的保存到日历上42.重新渲染所有事件rerenderEvents.fullCalendar(rerenderEvents)43.是否可以拖拽和改变大小editable:true44.禁止拖拽和改变大小disableDragging:falsedisableResizing:false45.如果拖拽不成功，多久回复原状dragRevertDuration:500 单位是毫秒46.拖拽不透明度dragOpacity:agenda:.5 /对于a