《fullcalendar日历控件知识点集合》由会员分享，可在线阅读，更多相关《fullcalendar日历控件知识点集合（11页珍藏版）》请在金锄头文库上搜索。
1、1、基本语法：首先，fullcalendar 和 JQUERY 一样，以面向对象的方式来组织代码。当然，这里的面向对象仅仅是指可以把整个 fullcalendar 理解 为一个类，这个类里包括有很多的属性、方法、委托(函数回调) 作为成员变量。通过为这些成员变量赋值，即可实例化出一个符合自己需求的 fullcalendar 实例出来，即最终在浏览器里渲染出的日历。换句话说，我们所做的绝大多数工作就是按照 fullcalendar 的语法约定去配置 出一个符合我们需求的 fullcalendar 实例。除非对于极少的特殊需求，fullcalendar 向我们提供的接口不足以满足，才会去修改 fu
2、llcalendar 本身的 js 文件。作为一种 JQUERY 插件，可以把 fullcalendar 理解为向 jquery 对象集里添加了一个日历相关的对象，这个对象里相关方法、属性、的调用方式，即为fullcalendar 的基本语法。整个语法分为两种：第一种和日历本身无关，仅仅是利用 fullcalendar 提供的方法来进行字符串和日期间的转换，形式如下：$.fullCalendar.formatDate();第二种则是与和配置 fullcalendar 实例相关的，这最终会影响到 fullcalendar在浏览器里的渲染，形式如下$(#someId) .fullCalendar(
3、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).fullCalenda
4、r(next)这里会调用 fullcalendar 实例的 next 方法，其结果是浏览器的日历向后翻一月(日)为方法回调赋值$(#calendar).fullCalendar( dayClick: function() alert(a day has been clicked!); ); 这里是为日历控件的 dayClick 事件赋值为相应的匿名函数，其结果是日历的每日被点击时，会弹出对话框。我想先有这样一种观念更便于后面的理解，需要渲染一个 fullcalendar 控件时，通常是直接在实例化一个 fullcalendar 时即完成它的绝大 多数属性 和委托的赋值，如此即得到一个会被浏览器
5、渲染成日历的 fullcalendar 对象（A），当这个对象已经被渲染后，如果需要动态的修改它的相关配置，可 以通过$(#calendar).fullCalendar(option,aspectRatio, 1.8); 的形式去修改。如果需要对象 A 发生某些变化，也可以调用 A 的某些方法，比如说翻页。2、内容框架整个 fullcalendar 由两部分组成日历+ 事件其中日历即为由 js 脚本在浏览器描绘出的日历控件，这一部分完全由 js 控制，和服务器无需相关联。事件则是日历功能的扩展，可以把事件理解为一个个会议安排。这些会议安排通常是保存在服务器的，在每次页面加载时，fullcale
6、ndar 得到会议安排的集合，然后按照其中的日期去把事件描绘到日历对应的地方。3、知识点概要余下详细的知识点均为 fullcalendar 官方文档的翻译和组合。每一部分均按照属性、方法、函数回调的顺序来组织。通常会有相关知识点的简介，对于比较复杂或者关键的点，会有相关联的代码作为事例。同样，这些事例也出之于fullcalendar 官方文档。以下是对这所有知识点的归纳和概览日历部分：视图：日历的不同的展现模式。当前共有 5 中视图视图的通用配置：这一部分的配置通常可以对 5 中视图均有效。视图对象：fullcalendar 的视图 Module获取视图对象以及跳转到指定视图的方法议程相关：即
7、对议程视图模式下，相关细节的配置日期相关：涉及到日历系统里日期的显示格式，日历加载的日期，以及获取相关日期或者日历改变日期的相关方法时间和文本的自定义设置：涉及到自定义或者本地化的相关配置大多在这里完成鼠标的相关事件捕获：比如鼠标单击到某个特殊地方（日历中的某一天等）等触发的方法在这里配置选中元素的配置：这一部分是来配置当鼠标点击某一日历元素时，是否选中该元素以及与此相关的事件事件部分如下：事件 Module 包含的信息事件的产生：包括事件源的管理和事件的管理事件的描绘：把一个事件描绘到浏览器的整个过程包含在这里拖拽事件：用鼠标拖拽以移动某个时间，这需要其他 JQUERY ui 插件的支持从日
8、历外拖拽事件到日历内以添加事件：对日历内拖拽事件的扩展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,toda
9、y, avaibleViewNameheader: left: title,center: prevYear,nextYear,right: prev,today,next,agendaDay,monththeme当为 true 时，可以配合 JQUERY-UI，配置日历的皮肤buttonIcons：http:/ prev: circle-triangle-w,next: circle-triangle-e 注意去掉.ui-icon-firstDay：每周开始的日期：0 为周日isRTL：是否从右至左组织日历weekends：是否显示周末weekMode：周的显示模式：fixed：每月始终显示
10、 6 周liquid：周数不定，每周的高度可变，整个日历高度不变variable：周数不定，每周的高度固定，整个日历的高度可变height 整个日历的高度（包括 header 和 content）contentHeight 内容高度：aspectRatio 宽和高的比例$(#calendar).fullCalendar(option,aspectRatio, 1.8); 可以动态设置viewDisplay (callback)函数回调，每次 view 显示时均会调用function( view ) View 是 view 对象windowResize (callback)函数回调，每次窗口大小
11、改变时调用，viewDisplayrender (method)立刻显示 viewdestroy (method)释放 calendar，包括相关数据defaultView：日历初始化时的视图，默认为 month4.3、视图对象 viewObjectname 可用的 5 个视图名之一title 视图部分的 title 2012.9.1start 当天 view 开始的第一天end visStart Visible Start DayvisEnd 在相关方法回调中均会有次对象4.4、获取视图对象.fullCalendar( getView ) 切换视图.fullCalendar( changeV
12、iew, viewName )4.5、议程相关控制日程相关的视图的显示信息allDaySlot 是否显示全天日程allDayText 显示的文字axisFormat 日期显示的格式slotMinutes 间隔时间defaultEventMinutes 默认的事件持续事件firstHour 在日程 view 里可见的起始时间，可通过滚动条滚动到在此时间之前的时间minTime 整日日程的起始时间maxTime 整日日程的结束时间4.6、日期相关year 日历加载时的年份month 日历加载时的月份（从 0 开始）date 日历加载时在月份的天数（对周视图和日视图有效）prev (method)日
13、历跳转到前一天next (method)日历跳转到后一天prevYear (method)日历跳转到前一年nextYear (method)日历跳转到后一年today (method)日历跳转到当前日期gotoDate (method)日历跳转到指定日期incrementDate (method)日历向前（向后）跳转一段时间getDate (method)获取日历的当前日期 Date 类型4.7、时间和文本的自定义timeFormat 每个事件默认显示的时间格式columnFormat 每个视图列名显示的格式、 month: ddd, / Mon week: ddd M/d, / Mon9/7
14、 day: dddd M/d / Monday9/7 titleFormat 每个视图里 title 显示的格式 month: MMMM yyyy, / September 2009 week: MMM d yyyy MMM d yyyy, / Sep 7 - 13 2009 day: dddd, MMM d, yyyy/ Tuesday, Sep 8, 2009 buttonText 视图里每个 button 显示的文字 prev: , / left triangle next: , / right triangle prevYear: today: today, month: month,
15、 week: week, day: day monthNames 月的全称monthNamesShort 月的简称dayNames 星期的全称dayNamesShort 星期的简称4.8、相关点击事件dayClick (callback)当某天被点击时触发function( date, allDay, jsEvent, view ) date：当前点击到的日期 allDay ：是否是全天性的jsEvent：底层的 JS 事件view ：当前的 view 对象this 关键字指代为 eventClick (callback)当一个事件给点击时触发function( event, jsEvent, view ) event ：当前的 event 对象jsEvent ：底层的 JS 事件view ：当前的 viewthis：指代的 里的元素eventMouseover (callback)鼠标滑动到事件上触发，同 eventClick 类似eventMouseout (callback)鼠标离开到事件上触发，同 eventClick 类似4.9、选中相关：当点击或者拖拽到相关位置时，非否选中对应元素selectable 是否选中对应元素selectHelper在日程表相关的 view 里，当选中对应时刻时，是否显示相关信息unselectAuto当点击页面日历以外的位置时，是否
