fullCalendar超帅的无刷新响应式日历演示

fullCalendar：响应式日历插件实战教程

最新推荐文章于 2024-04-17 10:10:17 发布

原创最新推荐文章于 2024-04-17 10:10:17 发布 · 5.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#响应式 #日历 #ace #fullcalendar

代码，原创，PHP，菜鸟专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用fullCalendar日历插件创建一个支持移动端响应式、可编辑、添加和拖动事件的日历应用。内容包括按照月、日、周排序，颜色选择，以及实时编辑事件、添加新事件、拖动调整事件等功能。通过提供的ace模板实现，代码简单，附带数据处理方法。详细教程和代码下载链接见文末。

支持移动端响应式，颜色选择，按照月、日、周排序，并且可指定到具体时间。可实时编辑、添加、拖动的fullCalendar日历插件。代码很简单，而且数据表已建好。

基于ace模板的#calendar
<div id="calendar" class="fc fc-ltr"></div>
//编辑修改
function editEvent(id, title, start, end, code) {
start = DateUtil.Format("yyyy/MM/dd hh:mm:ss", start);
if (end == null) {
end = start;
} else {
end = DateUtil.Format("yyyy/MM/dd hh:mm:ss", end);
}
$.post(getUrl("Canlendar/postEvent"), {id: id, title: title, start: start, end: end, code: code}, function(data) {
}, "json")
}
// code类型：拖动resize (延长或缩短天数) ，drop 整体延长或缩短天数
function daysEvent(id, days, code) {
$.post(getUrl("Canlendar/daysEvent"), {id: id, days: days, code: code}, function(data) {

})
}
//删除
function delEvent(id) {
$.post(getUrl("Canlendar/delEvent"), {id: id}, function(data) {

})
}
//添加
function addEvent(title, start, end, code) {
if (title == null || title == '') {
return false;
}
start = DateUtil.Format("yyyy/MM/dd hh:mm:ss", start);
if (end == null) {
end = start;
} else {
end = DateUtil.Format("yyyy/MM/dd hh:mm:ss", end);
}
var allDay = getAllDay(start, end);
$.post(getUrl("Canlendar/postEvent"), {id: 0, title: title, start: start, end: end, code: code}, function(data) {
$('#calendar').fullCalendar('renderEvent', {title: title, start: start, end: end, allDay: allDay, id: data.id, className: code}, true);
}, "json");
}

更多资料、代码下载：http://www.erdangjiade.com/js/846.html