一个人的日程安排往往是十分复杂的，似乎总有那么多的任务、会议、活动要安排，很容易就会弄得乱糟糟的，错过重要的事项。为此，我们需要一款能够帮我们有效管理日程、提醒我们重要事项的工具。

而 FullCalendar 就是一款非常好用的日程管理插件，它能够帮助你：

1.快速创建和管理事件。

2.显示不同时间间隔的日历。

3.提供多个视图来显示日历，如月视图、周视图、日视图等。

4.支持多个时间区域，可以更好地跨时区管理日程。

5.支持本地化，可以根据用户所在区域进行视图和时间格式设置。

6.支持设定重复事件，自动创建多天、多周或每周指定日期的重复事件。

7.支持拖拽操作，可以重新排列事件。

那么，下面就跟着我一起来学习如何使用 FullCalendar 管理日程吧。

一、安装 FullCalendar

FullCalendar 的安装十分简单，你只需要在你的项目中引入相应的 js 和 css 文件即可。不过，在引入之前，你需要确保你已经添加了 jQuery 和 Moment.js 两个库。

这里我们以 cdn 方式引入 FullCalendar：

```html

```

二、使用 FullCalendar

1.初始化 FullCalendar

初始化 FullCalendar 主要是使用 fullCalendar() 方法，它可以接受一个对象来设置一些基本的参数，如日历的默认视图、时间段、标题等。下面是一个简单的示例代码：

```javascript

$('#calendar').fullCalendar({

defaultView: 'month', // 默认视图为月视图

firstDay: 1, // 星期一作为每周第一天

header: { // 日历头部配置

left: 'prev,next today',

center: 'title',

right: 'month,agendaWeek,agendaDay'

}

});

```

上面的代码中，我们使用了 $('#calendar') 选中了一个元素，并使用 fullCalendar() 方法，为它初始化一个 FullCalendar。在初始化时，我们设置了日历的默认视图为月视图，星期一作为每周第一天，并设置了日历的头部，它包括左上角的前一月、后一月、今天的按钮，中间的标题以及右上角的月视图、周视图、日视图等切换按钮。这些参数可以根据自己需要进行更改。

2.创建事件

在 FullCalendar 中创建事件非常容易，你只需要为你的日历添加一个点击事件，然后使用 calender.fullCalendar('renderEvent', event) 方法来渲染事件。这里 'renderEvent' 方法的第一个参数是一个事件对象，我们可以设置它的 title、start、end、url、className 等参数，以及回调函数用来处理事件的点击、拖拽、调整尺寸等操作。下面是一个简单的示例代码：

```javascript

// 定义事件对象

var event = {

title: '电话会议',

start: '2019-03-18T14:00:00',

end: '2019-03-18T15:00:00',

url: '/events/1',

className: ['important']

};

// 设置日历点击事件

$('#calendar').on('click', function() {

// 渲染事件

$('#calendar').fullCalendar('renderEvent', event, true);

});

```

上面的代码中，我们定义了一个 event 对象，其中设置了事件的标题、开始时间、结束时间、URL、样式等参数。然后我们使用 fullCalendar() 方法为日历添加了一个点击事件，当点击日历时，弹出一个对话框，用户确认后使用 'renderEvent' 方法渲染事件。

3.创建事件源和异步加载

在一些情况下，我们可能需要从后端加载事件信息并渲染到日历上，这就要用到 FullCalendar 的事件源和异步加载功能了。FullCalendar 支持多种类型的事件源，如 JSON、Google 日历、iCalendar 等，你只需要指定相应的 URL，FullCalendar 就会自动从这个 URL 加载事件源并渲染到日历上。

以下示例演示如何从服务器加载与更新事件：

```javascript

$('#calendar').fullCalendar({

header: {

left: 'prev,next today',

center: 'title',

right: 'month,basicWeek,basicDay'

},

defaultDate: '2019-03-18',

navLinks: true, // can click day/week names to navigate views

editable: true,

eventLimit: true, // allow "more" link when too many events

events: {

url: '/myfeed.php',

error: function() {

$('#script-warning').show();

}

},

loading: function(bool) {

$('#loading').toggle(bool);

}

});

```

上面的代码中，我们使用 events 属性指定了一个 URL 来加载事件源。同时，我们还开启了对日历的编辑、可以多行显示事件的设置。

4.日历视图定制

FullCalendar 显示日期的格式和排列顺序可以通过 options 如头信息等做出调整。下面示例就是一种自定义的显示格式。

```javascript

$('#calendar').fullCalendar({

header: {

left: 'agendaDay,agendaWeek,month',

center: 'title',

right: 'prev,next today'

},

defaultDate: '2019-03-12',

timeFormat: 'h:mm a',

slotLabelFormat: 'h:mm a',

axisFormat: 'h:mm a',

eventLimit: true, // allow "more" link when too many events

editable: true,

events: [

{

title: 'All Day Event',

start: '2019-03-01'

},

{

title: 'Long Event',

start: '2019-03-07',

end: '2019-03-10'

},

{

title: 'Repeating Event',

start: '2019-03-09T16:00:00'

},

{

title: 'Meet',

start: '2019-03-12T10:30:00',

end: '2019-03-12T12:30:00'

},

{

title: 'Lunch',

start: '2019-03-12T12:00:00'

},

]

});

```

上面的代码中，我们设置了一个简单的 FullCalendar 日历，并定义了一些事件，标题和日期时间格式也有所调整。

总结

本文介绍了 FullCalendar 的使用方法，内容涵盖了它的初始化、创建事件、事件源和异步加载、以及日历视图定制等方面。希望对学习 FullCalendar 的你有所帮助。