fullcalendar日历控件知识点集合
1、基本语法：
首先，fullcalendar和JQUERY一样，以面向对象的方式来组织代码。当然，这里的
面向对象仅仅是指可以把整个fullcalendar理解为一个类，这个类里包括有很多的属性、方
法、委托(函数回调)作为成员变量。通过为这些成员变量赋值，即可实例化出一个符合自己
需求的fullcalendar实例出来，即最终在浏览器里渲染出的日历。换句话说，我们所做的绝
大多数工作就是按照fullcalendar的语法约定去配置出一个符合我们需求的fullcalendar实
例。除非对于极少的特殊需求，fullcalendar向我们提供的接口不足以满足，才会去修改
fullcalendar本身的js文件。
作为一种JQUERY插件，可以把fullcalendar理解为向jquery对象集里添加了一个日
历相关的对象，这个对象里相关方法、属性、的调用方式，即为fullcalendar的基本语法。
整个语法分为两种：
第一种和日历本身无关，仅仅是利用fullcalendar提供的方法来进行字符串和日期间的
转换，形式如下：
$.Date();
第二种则是与和配置fullcalendar实例相关的，这最终会影响到fullcalendar在浏览器
里的渲染，形式如下$(‘#someId’).fullCalendar(content);
$(‘#someId’)将得到一个jquery对象，其中someId为你希望渲染日历的元素id。重点
是后面一部分.fullCalendar(content);
Content有三种形式：
①为属性赋值{key:value,…}
$('#calendar').fullCalendar({
weekends:fal//willhideSaturdaysandSundays
});
这里即得到一个fullcalendar实例，其中weekends属性为fal,即月日历不会显示周末。
②方法调用'methodName','para'
$('#calendar').fullCalendar('next')
这里会调用fullcalendar实例的next方法，其结果是浏览器的日历向后翻一月(日)
③为方法回调赋值
$('#calendar').fullCalendar({
dayClick:function(){alert('adayhasbeenclicked!');}
});
这里是为日历控件的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包含的信息
事件的产生：包括事件源的管理和事件的管理
事件的描绘：把一个事件描绘到浏览器的整个过程包含在这里
拖拽事件：用鼠标拖拽以移动某个时间，这需要其他JQUERYui插件的支持
从日历外拖拽事件到日历内以添加事件：对日历内拖拽事件的扩展
4、详细知识点
4.1、合法的视图
month-eexample月视图
basicWeek-eexample周视图（一周内事件和日期的集合）
basicDay-eexample(一日内事件和日期的集合)
agendaWeek-eexample(周日程表)
agendaDay-eexample(日日程表)
4.2、视图的通用配置
header
头部显示的信息，分left,center,right三个部位
合法的属性值：title,prev,next,prevYear,nextYear,today,avaibleViewName
header:{
left:'title',
center:'prevYear,nextYear',
right:'prev,today,next,agendaDay,month'
}
theme
当为true时，可以配合JQUERY-UI，配置日历的皮肤
buttonIcons：/themeroller/
buttonIcons:{
prev:'circle-triangle-w',
next:'circle-triangle-e'
}
注意去掉.ui-icon-
firstDay：每周开始的日期：0为周日
isRTL：是否从右至左组织日历
weekends：是否显示周末
weekMode：周的显示模式：
fixed：每月始终显示6周
liquid：周数不定，每周的高度可变，整个日历高度不变
variable：周数不定，每周的高度固定，整个日历的高度可变
height整个日历的高度（包括header和content）
contentHeight内容高度：
aspectRatio宽和高的比例
$('#calendar').fullCalendar('option','aspectRatio',1.8);可以动态设置
viewDisplay(callback)函数回调，每次view显示时均会调用
function(view){}
View是view对象
windowResize(callback)函数回调，每次窗口大小改变时调用，
viewDisplay
render(method)立刻显示view
destroy(method)释放calendar，包括相关数据
defaultView：日历初始化时的视图，默认为month
4.3、视图对象viewObject
name可用的5个视图名之一
title视图部分的title2012.9.1
start当天view开始的第一天
end
visStartVisibleStartDay
visEnd
在相关方法回调中均会有次对象
4.4、获取视图对象
.fullCalendar('getView')
切换视图
.fullCalendar('changeView',viewName)
4.5、议程相关——控制日程相关的视图的显示信息
allDaySlot是否显示全天日程
allDayText显示的文字
axisFormat日期显示的格式
slotMinutes间隔时间
defaultEventMinutes默认的事件持续事件
firstHour在日程view里可见的起始时间，可通过滚动条滚动到在此时间之前的时间
minTime整日日程的起始时间
maxTime整日日程的结束时间
4.6、日期相关
year日历加载时的年份
month日历加载时的月份（从0开始）
date日历加载时在月份的天数（对周视图和日视图有效）
prev(method)日历跳转到前一天
next(method)日历跳转到后一天
prevYear(method)日历跳转到前一年
nextYear(method)日历跳转到后一年
today(method)日历跳转到当前日期
gotoDate(method)日历跳转到指定日期
incrementDate(method)日历向前（向后）跳转一段时间
getDate(method)获取日历的当前日期Date类型
4.7、时间和文本的自定义
timeFormat每个事件默认显示的时间格式
columnFormat每个视图列名显示的格式、
{month:'ddd',//Mon
week:'dddM/d',//Mon9/7
day:'ddddM/d'//Monday9/7}
titleFormat每个视图里title显示的格式
{month:'MMMMyyyy',//September2009
week:"MMMd[yyyy]{'—'[MMM]dyyyy}",//Sep7-132009
day:'dddd,MMMd,yyyy'//Tuesday,Sep8,2009}
buttonText视图里每个button显示的文字
{prev:' ◄ ',//lefttriangle
next:' ► ',//righttriangle
prevYear:' << ',//<<
nextYear:' >> ',//>>
today:'today',
month:'month',
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：当前的view
this：指代的
eventMouover(callback)鼠标滑动到事件上触发，同eventClick类似
eventMouout(callback)鼠标离开到事件上触发，同eventClick类似
4.9、选中相关：当点击或者拖拽到相关位置时，非否
选中对应元素
lectable是否选中对应元素
lectHelper
在日程表相关的view里，当选中对应时刻时，是否显示相关信息
unlectAuto
当点击页面日历以外的位置时，是否自动取消当前的选中
unlectCancel
指定哪些元素不会清空当前的选中，以JQUERY选择器的方式指定'#someId'
lect(callback)被选中时的函数回调
function(startDate,endDate,allDay,jsEvent,view)
unlect(callback)选中被取消时的回调
lect(method)选中某个时间
.fullCalendar('lect',startDate,endDate,allDay)
unlect(method)取消选中
.fullCalendar('unlect')
4.10、Event相关
EventObject事件对象
id可选，事件唯一标识，重复的事件具有相同的
title必须，事件在日历上显示的title
allDay可选，是否是整日事件
start必须，事件的开始时间
end可选，结束时间
url可选，当指定后，事件被点击将打开对应url
className指定事件的样式
editable是否可拖拽
source指向次event的eventsource对象
color背景和边框颜色
backgroundColor背景颜色
borderColor边框颜色
textColor文本颜色
EventSourceObject
EVENTS:在日历界面里，参数event的对象：分array，jsonfeed，function三种类型
Eventsource:
{
events:[
{title:'Event1',
start:'2011-04-04'},
{title:'Event2',
start:'2011-05-05'}//etc...],
color:'yellow',//anoption!
textColor:'black'//anoption!
}
eventsource可选的配置选项
className指定事件的样式
editable是否可拖拽
source指向次event的eventsource对象
color背景和边框颜色
backgroundColor背景颜色
borderColor边框颜色
textColor文本颜色
events(asanarray)数组形式组织的事件集
$('#calendar').fullCalendar({
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:fal//willmakethetimeshow
}
]
});
events(asajsonfeed)JSON源方式获取的events
每次当view的时间改变时，均会获取json。其中start和end为对应view的start和end，
插入_是默认不访问浏览器缓存。可通过cache:true来默认读取浏览器缓存
$('#calendar').fullCalendar({
events:'/'
});
会被转换为如下url请求
/?start=1262332800&end=1265011200&_=1263178646
events(asafunction)
作为方法的形式获得event
$('#calendar').fullCalendar({
events:function(start,end,callback){
$.ajax({
url:'',
dataType:'xml',
data:{
//ourhypotheticalfeedrequiresUNIXtimestamps
start:(e()/1000),
end:(e()/1000)
},
success:function(doc){
varevents=[];
$(doc).find('event').each(function(){
({
title:$(this).attr('title'),
start:$(this).attr('start')//willbepard
});
});
callback(events);
}
});
}
});
start和end同之前开始和结束时间（默认为-1970的毫秒）
callback为当获取到event后，会调用的改回调函数，把数据放入fullcalendar里的events
里。
eventSources
可以放置多个eventSource（events）
$('#calendar').fullCalendar({
eventSources:[
'/',
'/'
]
});
allDayDefault
当eventobject里的allDay为指定时，其默认值
ignoreTimezone忽略timeZone
2008-11-05T08:15:30-05:00
startParam传递给服务器的start参数名
endParam同上
lazyFetching
当view改变时，是否从缓存信息获取event。比如从月视图切换到周视图，默认为是
loading(callback)function(isLoading,view)
当调用ajax获取event是触发。
updateEvent(method)
在客户端更新event并在页面上重新描绘
clientEvents(method)
获取客户端保存的所有events对象
.fullCalendar('clientEvents'[,idOrFilter])->Array
removeEvents(method)
删除event并重新描绘
refetchEvents(method)
重新获取events并重新描绘
addEventSource(method)
添加eventSource，并立刻在页面上描绘
.fullCalendar('addEventSource',source)
removeEventSource(method)
同上
4.11、事件描绘（对应于整个callendar里的事件）
eventColor
eventBackgroundColor
eventBorderColor
eventTextColor
eventRender(callback)
当描绘事件时触发
function(event,element,view){}
event为改事件，element为用来渲染改事件的div元素
eventAfterRender(callback)
同上
renderEvent(method)
.fullCalendar('renderEvent',event[,stick])
rerenderEvents(method)
.fullCalendar('rerenderEvents')
同refetchEvents
4.12、拖拽事件
需要添加JQUERYUIDraggable插件，并把editable设置为true。相关属性和方法同事件
类似
editable
Determineswhethertheeventsonthecalendarcanbemodified.
disableDragging
Disablesalleventdragging,evenwheneventsareeditable.
disableResizing
Disablesalleventresizing,evenwheneventsareeditable.
dragRevertDuration
Timeittakesforaneventtoreverttoitsoriginalpositionafteranunsuccessfuldrag.
dragOpacity
Theopacityofaneventwhileitisbeingdragged.
eventDragStart(callback)
Triggeredwheneventdraggingbegins.
eventDragStop(callback)
Triggeredwheneventdraggingstops.
eventDrop(callback)
Triggeredwhendraggingstopsandtheeventhasmovedtoadifferentday/time.
eventResizeStart(callback)
Triggeredwheneventresizingbegins.
eventResizeStop(callback)
Triggeredwheneventresizingstops.
eventResize(callback)
Triggeredwhenresizingstopsandtheeventhaschangedinduration.
4.13、从日历外拖拽事件到日历中
额外需求：
①需要jquery-ui相关控件的支持
②日历的dropple属性需设置为true
基本思路
①在日历胖构建好用来拖拽的元素
②设置相应div的drop操作
$('#al-event').each(function(){
//createanEventObject
//itdoesn'tneedtohaveastartorend
vareventObject={
title:$.trim($(this).text())//utheelement'stextastheeventtitle
};
//storetheEventObjectintheDOMelementsowecangettoitlater
$(this).data('eventObject',eventObject);
//maketheeventdraggableusingjQueryUI
$(this).draggable({
zIndex:999,
revert:true,//willcautheeventtogobacktoits
revertDuration:0//originalpositionafterthedrag
});
});
③在日历中的drop回调中进行构造event并描绘
drop:function(date,allDay){//thisfunctioniscalledwhensomethingisdropped
//retrievethedroppedelement'sstoredEventObject
varoriginalEventObject=$(this).data('eventObject');
//weneedtocopyit,sothatmultipleeventsdon'thaveareferencetothesameobject
varcopiedEventObject=$.extend({},originalEventObject);
//assignitthedatethatwasreported
=date;
=allDay;
//rendertheeventonthecalendar
//thelast`true`argumentdeterminesiftheevent"sticks"
(/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent',copiedEventObject,true);
//isthe"removeafterdrop"checkboxchecked?
if($('#drop-remove').is(':checked')){
//ifso,removetheelementfromthe"DraggableEvents"list
$(this).remove();
}
}
4.14、日期转换工具
formatDate(function)
FormatsaDateobjectintoastring.
formatDates(function)
Formatsadaterange(twoDateobjects)intoastring.
parDate(function)
ParsastringintoaDateobject.
parISO8601(function)
ParsanISO8601stringintoaDateobject.
本文发布于:2022-12-07 14:02:42，感谢您对本站的认可！
本文链接：http://www.wtabcd.cn/fanwen/fan/88/59981.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
