日程软件full Calendar具体应用.docx
- 文档编号:3943012
- 上传时间:2022-11-26
- 格式:DOCX
- 页数:12
- 大小:18.57KB
日程软件full Calendar具体应用.docx
《日程软件full Calendar具体应用.docx》由会员分享,可在线阅读,更多相关《日程软件full Calendar具体应用.docx(12页珍藏版)》请在冰豆网上搜索。
日程软件fullCalendar具体应用
2.表头信息
agenda带有具体的时间格子
month,basicWeek,basicDay,agendaWeek,agendaDay是5种不同的视图
空格和,的区别
header:
{left:
'month,basicWeek,basicDay,agendaWeek,agendaDay',
center:
'title',
right:
'prevYear,prev,today,next,nextYear'}
3.是否使用jquery的主题(我用的是start主题)
1.7. 2.custom.css"rel="stylesheet"/> 1.7. 2.custom.min.js"> theme: true 4. buttonText: {prev: '昨天', next: '明天', prevYear: '去年', nextYear: '明年', today: '今天', month: '月', week: 'xx', day: '日'} 5.每周的第一天是哪天 Sunday=0,Monday=1,Tuesday=2,etc. firstDay: 1 6.日期从右向左显示...不知道什么时候会这么用 isRTL: false 7.是否显示周末 weekends: true 8.在月视图里显示周的模式,因为可能每月周数不同,所以月视图高度不一定,注意引号fixed固定显示6周高,高度永远保持不变 liquid不固定xx数,xx高度可变化 variable不固定周数,但高度固定 weekMode: 'fixed' 9.日历高度,包括表头 height: 850 内容高度,不包括表头 contentHeight: 600 10.xx宽与高度的比值 注意: 此属性不能与日历高度同时存在 aspectRatio: 1.35 11.切换视图的时候要执行的操作 view是一个对象,后面将说道具体的属性 viewDisplay: function(view){} 12.窗口大小变化时执行的操作 windowResize: function(view){} 13.把日历绑定到一个id的xxxx $('#id').fullCalendar('render'); 14.销毁id日历 把日历回复到初始化前,删除了所有元素,时间,和初始化数据 $('#id').fullCalendar('destroy'); 15.默认显示的视图,注意引号 defaultView: 'month' 16.view对象的属性 name: 包括month,basicWeek,basicDay,agendaWeek,agendaDay title: 标题内容(例如"September2009"or"Sep7-132009") start: Date类型,该view下的第一天. end: Date类型,该view下的最后一天.由于是一个闭合的值,所以,比如在monthview下,10月这个月份,那么end对应的应该是11月的第一天. visStart: Date类型.在该view下第一个可以访问的day.monthview下,该值是当月的第一天,weekview下,则通常和start一致. visEnd: Date类型,最后一个可访问的day 17.集中设定初始化值 可以设置的属性有dragOpacity,titleFormat,columnFormat,andtimeFormat 被应用的视图有{month: //monthview week: //basicWeek&agendaWeekviews day: //basicDay&agendaDayviews agenda: //agendaDay&agendaWeekviews agendaDay: //agendaDayview agendaWeek: //agendaWeekview basic: //basicWeek&basicDayviews basicWeek: //basicWeekview basicDay: //basicDayview '': //(anemptystring)whennootherpropertiesmatch} 18.取得视图对象 .fullCalendar('getView')->ViewObject varview=$('#calendar').fullCalendar('getView'); alert("Theview'stitleis"+view.title); 19.改变当前视图 .fullCalendar('changeView',viewName) 20.20里以下属性都是在agenda视图里起作用的 在agenda开头的视图里,是否显示最上面all-day那一栏 allDaySlot: true 默认的文字: allDayText: '今天的任务' 左边那一列时间的格式: axisFormat: 'h(: mm)tt' ()表示整点就不显示里面的内容 支持的xx占位符 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.dd: 日期名称,全名 13.M: 月份数字 14.MM: 月份数字,两位 15.MMM: 月份名称,缩写 16.MM: 月份名称,全名 17.yy: 两位的年份 18.yy: 4位的年份 19.t: 上下午加a或者p 20.tt: 上下午加am或pm 21.T: 上下午加A或者P 22.TT: 上下午加AM或PM 23.u: ISO8601格式 24.S: 给日期加上st,nd,rd,th等后缀,表明是第几天 每行的时间间隔 slotMinutes: 10 滚动条滚动到得起始时间 firstHour: 7 每天从几点起开始显示 minTime: 7 minTime: '7: 30' 如果加上了分钟需要设置时间间隔 每天显示到几点结束 maxTime: 24 maxTime: '23: 10' 事件默认的时间执行xx 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(){ vard=$('#calendar').fullCalendar('getDate'); alert("Thecurrentdateofthecalendaris"+d); }); 22.指定默认的时间格式 timeFormat: h(: mm)tt 23.指定默认的列格式 columnFormat: {month: 'ddd',//Mon day: 'ddM/d'} 24.标题xx titleFormat: {month: 'MMyy',//September2009 week: "MMMd[yy]{'—'[MMM]dyy}",//Sep7-132009 day: 'dd,MMMd,yy'//Tuesday,Sep8,2009} 25.月显示的名字 monthNames: ['January','February','March','April','May','June','July', 'August','September','October','November','December'] monthNames: ['一月','二月','三月','四月','五月','六月','七月', '八月','九月','十月','十一月','十二月'] 月名字的简写 monthNamesShort: ['Jan','Feb','Mar','Apr','May','Jun' 'Jul','Aug','Sep','Oct','Nov','Dec'] 26.星期显示的名字 dayNames: ['Sunday','Monday','Tuesday','Wednesday', 'Thursday','Friday','Saturday'] dayNames: ['星期日','星期一','星期二','星期三', '星期四','星期五','星期六'] 星期名字的缩写 dayNamesShort: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'] 27.4个关于鼠标的回调方法 当点击某一天时触发此操作 dayClick: function(date,allDay,jsEvent,view){} dayClick: function(date,allDay,jsEvent,view){ if(allDay){ alert('Clickedontheentireday: '+date); }else{ alert('Clickedontheslot: '+date);}alert('Coordinates: '+jsEvent.pageX+','+jsEvent.pageY); alert('Currentview: '+view.name); //changetheday'sbackgroundcolorjustforfun $(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: '+view.name); //changethebordercolorjustforfun $(this).css('border-color','red');}当鼠标悬停在一个事件上触发此操作 eventMouseover: function(event,jsEvent,view){} 当鼠标从一个事件上移开触发此操作 eventMouseout: function(event,jsEvent,view){} 28.事件对象 fullcalendar用来存储一个日历事件信息的标准对象 一下属性中,只有title和start是必须的 id: String/Integer(optional) title: String allDay: trueorfalse(optional)指定是否是全天事件 start: Date事件开始时间,格式如下 IETFformat(ex: "Wed,18Oct200913: 00: 00EST") ISO8601format(ex: "2009-11-05T13: 15: 30Z") end: Date(optional)事件结束时间 如果事件是一个全天事件,则结束时间包括在内 如果事件不是全天事件,结束时间是0: 00,则结束时间的第二天不包括在内 url: String(optional)当用户点击时,将会访问的网址 className: String/Array(optional)这个事件使用的css类名 editable: trueorfalse(optional)事件是否可编辑 source: Array/String/Function(automaticallypopulated)事件源,自动指定 除了以上属性外,你可以自己指定属性和值 29.事件数组events(asanarray) events: [{title: 'event1', start: '2010-01-01' },{title: 'event2', start: '2010-01-05', end: '2010-01-07' },{title: 'event3', start: '2010-01-0912: 30: 00', allDay: false//willmakethetimeshow}]
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 日程软件full Calendar具体应用 日程 软件 full Calendar 具体 应用
![提示](https://static.bdocx.com/images/bang_tan.gif)