针对fullcalendar的学习研究（二）
javascript部分主要的设置日程安排
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
获取时间，使用getFullYear()和getMonth()分别获取年和月。
draggable:表示日程安排是否可以拖动。
Event的JSON格式
events:表示具体的日程安排。由源代码中1058至1080行可知道，格式如下：
{
_id:编号,
start:日程安排开始日期，
end:日程安排结束日期,
title:日程安排名称,
url:查看日程安排连接的路径,
allDay:是否为全天任务,
className:日程安排的每一个单元格的样式,
editable:是否可以编辑,
color:设置单元格的颜色,
backgroudColor:设置单元格背景的颜色,
borderColor:边框颜色,
textColor:文件颜色
}
FullCalendar中默认设置的修改可以支持国际化展示：
由以下代码可知道所有默认行为绑定在defaults对象上。
function setDefaults(d) {
$.extend(true, defaults, d);
}
修改默认行为可以实现国际化
var defaults = {
// display
defaultView: 'month', //设置默认选中的为month视图
aspectRatio: 1.35,
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
weekends: true,
// editing //相关的编辑功能
//editable: false, //启用编辑功能
//disableDragging: false, //拖动启用
//disableResizing: false, //大小改变的启用
allDayDefault: true, //是否为全天任务默认为true
ignoreTimezone: true, //是否忽略时区影响
// event ajax
lazyFetching: true,
startParam: 'start', //绑定开始参数名称
endParam: 'end', //绑定结束时间参数
// time formats //选择月份，日期和每天的按钮标题栏时间格式
titleFormat: {
month: 'MMMM yyyy',
week: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}",
day: 'dddd, MMM d, yyyy'
},
columnFormat: { //选中月份，日期和每天时候单元格中日期的格式
month: 'ddd',
week: 'ddd M/d',
day: 'dddd M/d'
},
timeFormat: { // for event elements
'': 'h(:mm)t' // default
},
// locale
isRTL: false,
firstDay: 0,
monthNames: //针对月份的中文化展示修改 ['January','February','March','April','May','June','July','August','September','October','November','December'],
monthNamesShort: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
dayNames: //针对星期的中文化展示修改 ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
dayNamesShort: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
buttonText: { //针对按钮中显示信息的国际化的改变
prev: ' ◄ ',
next: ' ► ',
prevYear: ' << ',
nextYear: ' >> ',
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},
// jquery-ui theming
theme: false, //是否采用主题
buttonIcons: { //按钮的图标
prev: 'circle-triangle-w',
next: 'circle-triangle-e'
},
//selectable: false, //选择是否启用
unselectAuto: true,
dropAccept: '*'
};
FullCalendar中的各种事件绑定：
源代码如下：
function Calendar(element, options, eventSources) {
var t = this;
// exports
t.options = options;
t.render = render;
t.destroy = destroy;
t.refetchEvents = refetchEvents;
t.reportEvents = reportEvents;
t.reportEventChange = reportEventChange;
t.rerenderEvents = rerenderEvents;
t.changeView = changeView;
t.select = select; //选中单元格的事件
t.unselect = unselect;
t.prev = prev; //上一页事件
t.next = next; //下一页事件
t.prevYear = prevYear;
t.nextYear = nextYear;
t.today = today; //今天按钮时间
t.gotoDate = gotoDate; //
t.incrementDate = incrementDate;
t.formatDate = function(format, date) { return formatDate(format, date, options) };
t.formatDates = function(format, date1, date2) { return formatDates(format, date1, date2, options) };
t.getDate = getDate;
t.getView = getView;
t.option = option;
t.trigger = trigger;
// imports
EventManager.call(t, options, eventSources);
var isFetchNeeded = t.isFetchNeeded;
var fetchEvents = t.fetchEvents;
// locals
var _element = element[0];
var header;
var headerElement;
var content;
var tm; // for making theme classes
var currentView;
var viewInstances = {};
var elementOuterWidth;
var suggestedViewHeight;
var absoluteViewElement;
var resizeUID = 0;
var ignoreWindowResize = 0;
var date = new Date();
var events = []; //当前绑定的events数据
var _dragElement;
采用一个请求页面获取数据加载方式如下：
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
editable: true,
events: "json-events.php",
eventDrop: function(event, delta) {
alert(event.title + ' was moved ' + delta + ' days\n' +
'(should probably update your database)');
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
}
});
});
</script>
开启选中单元格的事件
<script type='text/javascript'>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
}
]
});
});
</script>