fullcalendar日历控件知识点集合.docVIP

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 获取视图对象以及跳转到指定视图的方法 议程相关：即对议程视图模式下，相关细节的配置 日期相关：涉及到日历系统里日期的显示格式，日历加载的日期，以及获取相关日期或者日历改变日期的相关方法 时间和文本的自定义设置：涉及到自定义或者本地化的相关配置大多在这里完成 鼠标的相关事件捕获：比如鼠标单击到某个特殊地方（