如何使用full calendar套件做網頁日曆

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.成果如下