fullcalendar日历控件知识点集合346.docxVIP

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