基本用法 – FullCalendar中文文档

2014-02-05 · 7 min read

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/