1.下載套件
http://fullcalendar.io/download/
2.安裝套件
1) css : fullcalendar.css
2) js :fullcalendar.js
3.html tag
4.javascript設定
var myCalendar = {
init : function() {
var calendar = $('#calendar').fullCalendar({
viewRender: function(view, element){
myCalendar.getData();
},
header: {
left: 'prev, today',
center: 'title',
right: 'next'
},
defaultView: 'month',
selectable: true,
selectHelper: true,
eventRender: function (event, element, icon) {
if (event.description != "") {
element.attr('title', event.description);
}
element.css('cursor', 'pointer');
element.css('background-color', '#FFB347');
element.css('color', '#000000');
},
eventClick: function(calEvent, jsEvent, view) {
document.location.href = "blog" + calEvent._id + ".action";
},
});
},
getData : function() {
var curDate = $('#calendar').fullCalendar('getDate');
var year = moment(curDate).format('YYYY');
var mon = moment(curDate).format('MM');
var formData = {year : year, mon : mon};
$.ajax({
url : 'waBloggetCalendar.action',
type: "POST",
data : formData,
success : myCalendar.ajax_loaddata,
error : function(xhr, statusText, error) {
myMessageModal.popup("訊息通知","錯誤! 無法取得資料.");
}
});
},
ajax_loaddata : function(data) {
$.each(data, function(index, item){
if (index == "result") {
if (item.success == false) {
myMessageModal.popup("訊息通知",item.message);
}
} else if (index == "WABlogItemList"){
var myseries = [];
$.each(item, function(index2, item2) {
myseries.push(item2);
});
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', myseries);
$('#calendar').fullCalendar('rerenderEvents');
}
});
}
}
5.javascript 初始化
$(document).ready(function() {
$('#calendar').css('min-height', 400);
$.getScript('assets/js/fullcalendar.js', myCalendar.init);
});
6.回傳之JSON資料如下
7.成果如下