fullcalendar（FullCalendar 介绍）

FullCalendar 介绍

FullCalendar 是一个开源的日历插件，能够实现日程安排、事件触发等功能。本文将介绍 FullCalendar 的基本用法，并详解其常用的配置项和样式控制。

FullCalendar 基本用法

FullCalendar 需要依赖 jQuery 库和 Moment.js 时间库。在引入这两个库之后，我们可以通过如下代码来初始化 FullCalendar：

    <div id=\"calendar\"></div>
    <script>
        $(document).ready(function() {
            $('#calendar').fullCalendar();
        });
    </script>

这里我们在 HTML 中准备一个 div 容器，并在 jQuery 的 ready 事件中调用 fullCalendar 方法来初始化 FullCalendar。此时我们会得到一个基本的日历模板，但由于我们并没有配置任何事件和信息，因此日历上并没有任何内容。

FullCalendar 配置项

id

id 属性用于指定 FullCalendar 实例的 id，可以通过 $('#calendar').fullCalendar() 中做出相应的改变。例如，我们可以在 HTML 中指定 id 属性，使得 fullCalendar 函数使用指定的容器来渲染日历：

    <div id=\"myCalendar\"></div>
    <script>
        $(document).ready(function() {
            $('#myCalendar').fullCalendar();
        });
    </script>

defaultView

defaultView 用于指定日历的默认视图。默认视图包括 dayView、weekView、monthView、agendaDay、agendaWeek 等，分别对于日、周、月、日程与周程模式。我们可以通过如下代码来指定日历的默认视图：

    <div id=\"calendar\"></div>
    <script>
        $(document).ready(function() {
            $('#calendar').fullCalendar({
                defaultView: 'month' // 默认为月模式
            });
        });
    </script>

events

events 属性用于指定日历上需要显示的事件信息。在 FullCalendar 中，事件使用 JSON 格式来描述，其最基本的格式如下所示：

    {
        title: 'Event Title', // 事件标题
        start: '2019-01-01',  // 事件开始时间
        end: '2019-01-02'     // 事件结束时间
    }

我们可以通过如下代码来指定日历上需要显示的事件信息：

    <div id=\"calendar\"></div>
    <script>
        $(document).ready(function() {
            $('#calendar').fullCalendar({
                events: [
                    {
                        title: 'Event 1',
                        start: '2019-01-01',
                        end: '2019-01-02'
                    },
                    {
                        title: 'Event 2',
                        start: '2019-01-05',
                        end: '2019-01-07'
                    }
                ]
            });
        });
    </script>

这里我们指定了两个事件，分别从 2019-01-01 至 2019-01-02 和 2019-01-05 至 2019-01-07。

FullCalendar 样式控制

FullCalendar 使用 CSS 样式来渲染日历界面，我们可以通过CSS 样式来自定义 FullCalendar 的外观样式。例如，我们可以通过如下代码来自定义日历的样式：

    <div id=\"myCalendar\"></div>
    <style>
        #myCalendar {
            font-size: 14px;
            color: #333;
            border: 1px solid #ddd;
        }
        #myCalendar th, #myCalendar td {
            padding: 10px;
            border: 1px solid #ddd;
        }
        #myCalendar .fc-button {
            background: #f3f3f3;
            border: 1px solid #ddd;
            color: #555;
            padding: 10px;
        }
    </style>
    <script>
        $(document).ready(function() {
            $('#myCalendar').fullCalendar({
                defaultView: 'month',
                events: [
                    {
                        title: 'Event 1',
                        start: '2019-01-01',
                        end: '2019-01-02'
                    },
                    {
                        title: 'Event 2',
                        start: '2019-01-05',
                        end: '2019-01-07'
                    }
                ]
            });
        });
    </script>

这里我们定义了一个名为 myCalendar 的 FullCalendar 实例，并通过 CSS 样式指定其外观样式。具体来说：