基本用法

在网页上嵌入日历的第一步是拥有正确的JavaScript和CSS文件。请确保您在网页的中包含了FullCalendar样式表，以及FullCalendar，jQuery和Moment JavaScript文件：

<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>

jQuery和Moment必须在FullCalendar的JavaScript之前加载。

如果计划进行拖动或调整大小，您可能需要一些额外的依赖项。更多信息。

一旦你有依赖关系，你需要编写初始化日历的JavaScript代码。此代码必须在页面初始化后执行。最好的方法是使用jQuery的$（document）.ready，如下所示：

$(document).ready(function() {

    // page is now ready, initialize the calendar...

    $('#calendar').fullCalendar({
        // put your options and callbacks here
    })

});

上面的代码应该放在页面头部的

<div id='calendar'></div>

就是这样，你应该看到一个基于月份的日历，没有任何事件。如果您想了解如何显示活动，请访问Google日历或活动数据部分。

---

选项

FullCalendar的大多数文档描述了影响日历外观或行为的选项。选项通常在日历初始化时设置，如下所示：

$('#calendar').fullCalendar({
    weekends: false // will hide Saturdays and Sundays
});

---

回调

回调类似于选项，但是它们是在特殊情况发生时调用的函数。在以下示例中，每当用户点击某一天时，系统就会显示一个警告框：

$('#calendar').fullCalendar({
    dayClick: function() {
        alert('a day has been clicked!');
    }
})

---

方法

方法提供了从JavaScript代码处理日历的方法。一个方法使用熟悉的fullCalendar命令对已经初始化的日历的jQuery对象进行操作，但是采用完全不同的方式：

$('#calendar').fullCalendar('next');

这将调用下一个方法，并将强制日历移动到下一个月/周/天。