FullCalendar介紹和開發實踐

一、概述

FullCalendar是一個基於jQuery的全功能日曆組件，可提供幾乎所有的日曆功能，諸如月視圖、周視圖、日視圖、事件點擊、拖拽、放大縮小等等。

在本文中，將從樣式的自定義、數據的處理、API的使用和事件的處理等四個方面來介紹FullCalendar。

二、樣式的自定義

FullCalendar的樣式幾乎滿足了大多數開發者的需求，但是有時我們需要根據項目的需求進行一些自定義。FullCalendar預留了多個CSS類名，可以在自定義樣式的時候方便的使用：

.fc-toolbar //日曆頂部工具條
.fc-header-toolbar //日曆頭部工具條
.fc-header-left //日曆頭部左側元素
.fc-header-center //日曆頭部中間元素
.fc-header-right //日曆頭部右側元素
.fc-header-title //日曆頭部標題
.fc-row //日曆行元素
.fc-widget-header //顯示事件元素的頭部
.fc-widget-content //顯示事件元素的正文
.fc-today //表示當天日期的單元格
.fc-past //過去的日期單元格
.fc-future //未來的日期單元格
.fc-day-header //日期頭部
.fc-day-number //日期數字
.fc-sun //周日單元格
.fc-mon //周一單元格
.fc-tue //周二單元格
.fc-wed //周三單元格
.fc-thu //周四單元格
.fc-fri //周五單元格
.fc-sat //周六單元格
.fc-event //事件元素
.fc-event-time //事件時間
.fc-event-title //事件標題
.fc-event-bg //事件背景色

三、數據的處理

FullCalendar中的數據可以通過不同的方式來獲取，如ajax請求、本地JSON文件、函數等。在使用FullCalendar時，需要通過events屬性來設置數據源，該屬性對應的值可以是靜態數組、函數返回值、URL等。以下是一個示例：

$('#calendar').fullCalendar({
	events: [
		{
			title  : 'event1',
			start  : '2018-05-01'
		},
		{
			title  : 'event2',
			start  : '2018-05-05',
			end    : '2018-05-07'
		},
		{
			title  : 'event3',
			start  : '2018-05-09T12:30:00',
			allDay : false
		}
	]
});

在此例中，FullCalendar將會在日曆上渲染三個事件。每個事件都有一個標題（title）和開始時間（start），同時也可以包括結束時間（end）、重複（repeat）、全天（allDay）等時間信息。

四、API的使用

FullCalendar提供了豐富的API，許多常見的操作都可以在API中找到對應的方法。以下是一些常用的API：

$('#calendar').fullCalendar({
	defaultView: 'week', //設置默認視圖
	header: {
		left: 'prev,next today',
		center: 'title',
		right: 'month,agendaWeek,agendaDay' //頂部工具條
	},
	editable: true, //可編輯
	eventLimit: true, //當天事件過多時顯示更多
	events: [
		//省略部分代碼
	],
	eventClick: function(event) { //事件點擊事件
		alert('Event: ' + event.title);
	},
	dayClick: function(date, jsEvent, view) { //日期單元格點擊事件
		alert('Clicked on: ' + date.format());
	},
	selectable: true, //開啟選擇時間段
	selectHelper: true, //選中後自動加載事件
	select: function(start, end) { //選擇事件
		var title = prompt('Event Title:');
		var eventData;
		if (title) {
			eventData = {
				title: title,
				start: start,
				end: end
			};
			$('#calendar').fullCalendar('renderEvent', eventData, true); //將新建事件添加到日曆中
		}
	},
	editable: true, //拖拽事件
	droppable: true, //將事件拖入日曆中
	eventDrop: function(event, delta, revertFunc) {
		alert(event.title + " was dropped on " + event.start.format());
		if (!confirm("Are you sure about this change?")) { //確認拖拽
			revertFunc();
		}
	},
	eventResize: function(event, delta, revertFunc) { //拉伸事件
		alert(event.title + " end is now " + event.end.format());
		if (!confirm("is this okay?")) {
			revertFunc();
		}
	}
});

五、事件的處理

FullCalendar提供了多種事件處理函數，可以使開發者更方便的掌控日曆的行為。以下是一些常用的事件處理函數：

$('#calendar').fullCalendar({
	defaultView: 'month',
	events: [
		//省略部分代碼
	],
	eventRender: function(event, element, view) { //渲染事件的時候觸發
		element.qtip({
			content: event.description
		});
	},
	eventAfterRender: function(event, element, view) { //事件渲染完畢的回調函數
		if (event.approval_status == 'pending') {
			element.css('background-color', 'yellow');
		}
	},
	eventDestroy: function(event, element, view) { //當事件從日曆中移除時觸發
		element.find('.fc-title').text('This event has been removed!');
	}
});

總結

本文從樣式的自定義、數據的處理、API的使用和事件的處理等四個方面介紹了FullCalendar的開發實踐。FullCalendar作為一款功能強大的日曆組件，可以為我們的項目提供完善的日曆功能和豐富的用戶體驗。