fullCalendar:中文API -2

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('Clicked on the entire day: ' + date);
 }else{
 alert('Clicked on the slot: ' + date);
 }
 alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
 alert('Current view: ' + view.name);
 // change the day's background color just for fun
 $(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);
 // change the border color just for fun
 $(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:true or false (optional)  指定是否是全天事件
start:Date 事件开始时间,格式如下
IETF format (ex: "Wed, 18 Oct 2009 13:00:00 EST")
ISO8601 format (ex: "2009-11-05T13:15:30Z")
end: Date (optional) 事件结束时间
如果事件是一个全天事件,则结束时间包括在内
如果事件不是全天事件,结束时间是0:00,则结束时间的第二天不包括在内
url:String (optional)  当用户点击时,将会访问的网址
className: String/Array (optional) 这个事件使用的css 类名
editable:true or false (optional) 事件是否可编辑
source: Array/String/Function (automatically populated) 事件源,自动指定
除了以上属性外,你可以自己指定属性和值
29.事件数组 events (as an array)
events: [
 {
 title  : 'event1',
 start  : '2010-01-01'
 },
 {
 title  : 'event2',
 start  : '2010-01-05',
 end  : '2010-01-07'
 },
 {
 title  : 'event3',
 start  : '2010-01-09 12:30:00',
 allDay : false // will make the time show
 }
 ]
事件Json源 events (as a json feed)
events: "/myfeed.php" 该URL返回一个json或数组的日程事件组, GET参数视startParam和endParam选项而定
当用户改变视图时触发此事件,FullCalendar 将通过GET方法传递参数来确定需要哪些日程数据
/myfeed.php?start=1262332800&end=1265011200&_=1263178646
startParam:'start' 开始参数的名字
endParam:'end' 结束参数的名字
cacheParam:'_' 缓存参数的名字
lazyFetching:true 只有当需要的时候才取得数据,先从缓存里读取数据
_参数是自动加上去的,防止读缓存内容
日程事件 events (as a function)
events:function( start, end, callback ) { }
events: function(start, end, callback) {
 $.ajax({
 url: 'myxmlfeed.php',
 dataType: 'xml',
 data: {
 // our hypothetical feed requires UNIX timestamps
 start: Math.round(start.getTime() / 1000),
 end: Math.round(end.getTime() / 1000)
 },
 success: function(doc) {
 var events = [];
 $(doc).find('event').each(function() {
 event.push({
 title: $(this).attr('title'),
 start: $(this).attr('start') // will be parsed
 });
 });
 callback(events);
 }
 });
 }
30.事件源
eventSources 存储数组对象,可以是Arrays/Functions/URLs
eventSources: [
 $.fullCalendar.gcalFeed("http://www.google.com/feed1"),
 $.fullCalendar.gcalFeed("http://www.google.com/feed2")
 ]
31.日程默认为全天日程
allDayDefault:true
32.当读取ajax数据时
loading:function( isLoading, view )
当开始读取的时候是true,当读取完成是false
33.改变日程事件
updateEvent:
eventClick: function(event, element) {
 event.title = "CLICKED!";
 $('#calendar').fullCalendar('updateEvent', event);
 }
日程对象可以通过回调函数被获得,比如 eventClick 或者 clientEvents的方法
34.取得客户端内存中保存的日程对象
clientEvents
.fullCalendar( 'clientEvents' [, idOrFilter ] ) -> Array 返回一个日程对象的数组
如果idOrFilter不写,则输出全部保存在客户端的日程对象数组
如果为ID ,则返回所有为此ID的对象
还可以为一个过滤function 接受一个日程对象,如果返回true,则此值包含在客户端对象组中国
35.从日历中删除日程
removeEvents 参数同上
36.重新取得日程
.fullCalendar('refetchEvents') 从所有源并且重新渲染到屏幕上
37.增加一个日程源
.fullCalendar('addEventSource',source)
源可以是Array/URL/Function ,获取的数据可以立刻显示在日历上
38.删除一个事件源
.fullCalendar('removeEventSource',source)
39.日程绑定
eventRender.function( event, element, view ) { }
event 是企图被渲染的日程对象
element 是一个新建的jQuery<div>被用来渲染的,他已经在恰当的时间被创建
eventRender 返回函数可以修改element,返回一个新的dom元素,用来替换被渲染的元素,或者返回false,禁止被渲染
40.日程渲染后事件
eventAfterRender:function( event, element, view ) { }
41.渲染事件
.fullCalendar('renderEvent',event[,stick])
通常,一旦日历重新取得日程源,则原有日程将消失,当指定stick为true时,日程将永久的保存到日历上
42.重新渲染所有事件
rerenderEvents
.fullCalendar('rerenderEvents')
43.是否可以拖拽和改变大小
editable:true
44.禁止拖拽和改变大小
disableDragging:false
disableResizing:false
45.如果拖拽不成功,多久回复原状
dragRevertDuration:500  单位是毫秒
46.拖拽不透明度
dragOpacity:{
agenda:.5 //对于agenda试图
'':1.0  //其他视图
}
47.需要的js包
<script type='text/javascript' src='js/ui.core.js'/>
<script type='text/javascript' src='js/ui.draggable.js'/>
<script type='text/javascript' src='js/ui.resizable.js'/>
注意顺序,要把jquery.js放到这3个包前面
48.拖拽事件引发的操作
eventDragStart:function(event,jsEvent,ui,view) { }
eventDragStop:function( event, jsEvent, ui, view ) { }
49.当拖拽完成并且时间改变
eventDrop:function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) { }
dayDelta 保存日程向前或者向后移动了多少天
minuteDelta 这个值只有在agenda视图有效,移动的时间
allDay 如果是月视图,或者是agenda视图的全天日程,此值为true,否则为false
eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
 alert(
 event.title + " was moved " +
 dayDelta + " days and " +
 minuteDelta + " minutes."
 );
 if (allDay) {
 alert("Event is now all-day");
 }else{
 alert("Event has a time-of-day");
 }
 if (!confirm("Are you sure about this change?")) {
 revertFunc();
 }
 }
50.改变大小的事件触发的操作
eventResizeStart:function( event, jsEvent, ui, view ) { }
eventResizeStop:function( event, jsEvent, ui, view ) { }
eventResize:function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) { }
详细文档:http://arshaw.com/fullcalendar/docs/
转自:http://www.cnblogs.com/yuanxianlai/archive/2012/03/31/2427117.html

你可能感兴趣的:(日历控件,fullCalendar)