fullCalendar超帥的無重新整理響應式月曆示範

支援移動端響應式，顔色選擇，按照月、日、周排序，并且可指定到具體時間。可實時編輯、添加、拖動的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