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作为一款功能强大的日历组件，可以为我们的项目提供完善的日历功能和丰富的用户体验。