在网页上嵌入日历的第一步是拥有正确的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');
这将调用下一个方法,并将强制日历移动到下一个月/周/天。