fullCalendar 的用法

最新推荐文章于 2025-06-18 16:49:10 发布

原创最新推荐文章于 2025-06-18 16:49:10 发布 · 4.3k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍fullCalendar插件的基本使用方法，包括引入JS和CSS文件、设置HTML容器、初始化插件参数及事件处理等。此外还讲解了如何通过AJAX刷新日程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

fullCalendar 的用法

fullCalendar 插件是一个日历插件，可以在日历上面添加日程。如图：

下载地址和例子网站如下：
http://www.helloweba.com/view-blog-231.html 这个是中文的插件文档
http://www.helloweba.com/search.html?keys=fullCalendar 这里有好几个很好的例子

现在讲讲这个 fullCalendar 插件最简单的几个用法：

首先，要引入这个插件的js以及css
注意：同时需要jquery和jquer ui
别忘了！！

<link rel="stylesheet" type="text/css" href="css/fullcalendar.css">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery-ui-1.10.2.custom.min.js"></script>
<script src="js/fullcalendar.min.js"></script>

然后是在html标签中，加入一个div作为 fullCalendar 的容器

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

然后就可以在脚本中加载这个插件了：

//日历插件初始化
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
firstDay: 1,
timeFormat: 'H:mm',
axisFormat: 'H:mm',
eventClick: function (calEvent, jsEvent, view) {
//日程点击的事件（自己实现）
},
dayClick: function (data, allDay, jsEvent, view) {
//日期点击的事件（自己实现）
}

}); //end calendar

//日程的显示(刷新日程)
function RefleshCalendar() {

//清除原本所有的日历记录
$('#calendar').fullCalendar('removeEvents');

$.ajax({
type: "POST",
url: "test.json",
data: "",
success: function (responseData) {

$.each(responseData, function (index, info) {

var eventObj = new Object();

//构造每一个日历记录
eventObj.id = info.ID;
eventObj.title = info.Title;
eventObj.start = new Date(info.Start);
eventObj.end = new Date(info.End);
eventObj.allDay = false;

//刷新日历里面的记录
$('#calendar').fullCalendar('renderEvent', eventObj, true);

})//end each

} //end success
}); //end ajax

}//end reflesh