基本用法 – FullCalendar 中文文档

使用 FullCalendar 的第一步是引用 CSS 和 Js 文件：

<link rel="stylesheet" type="text/css" href="fullcalendar.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fullcalendar.js"></script>

如果需要使用 dragging（拖拽）和 resizing（改变大小，也就是改变日程时间）的话，需要引用额外的 Jquery UI 文件（详情看这里）。

最好在页面加载完成之后进行 Calendar 的初始化

$(document).ready(function () {
  // 页面加载完毕，初始化Canlendar
  $('#calendar').fullCalendar({
    // 你的配置和回调函数 });
  })
})

上面的代码里面指定初始化一个 id=calendar 容器，所以必须在 body 中加入如下代码：

<div id="calendar"></div>

之后打开页面，你就可以看到一个空的日程表，上面没有任何日程，添加日程的方法详见： Google Calendar 和 Event Data 这两个章节

配置#

FullCalendar 的大部分文档都在讲日程表的“呈现”和“行为”，通常在初始化的时候配置 FullCalendar，例如：

$('#calendar').fullCalendar({
  weekends: false, //隐藏周末
})

回调函数#

回调函数和配置有几分相似，执行某些操作的时候会触发回调。下面的例子中，用户点击日程表的某一天，会 alert 一个提示：

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

方法#

“方法”是用来操作日程表的，下面的例子会让日程表切换到下一个月、周或则日：

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

官方英文文档：http://arshaw.com/fullcalendar/docs/usage/