最近做的项目需要一个日程插件，在网上找了一些插件觉的fullcalendar 比较好用，总结一下以备后用。

效果图如下：

1 var calendar = null; 2  function ShowCalendar() { 3      if (calendar != null) { 4          return; 5      } 6      var date = new Date(); 7      var d = date.getDate(); 8      var m = date.getMonth(); 9      var y = date.getFullYear();10      calendar = $('#calendar').fullCalendar({11          header: {12              left: 'prev',13              center: 'title',14              right: 'next'15          },16          disableDragging: true,17          selectable: true,18          selectHelper: false,19          select: function (start, end, allDay) {20          },21          editable: true,22          dayClick: function (date, allDay, jsEvent, view) {23              var trueDate = $.fullCalendar.formatDate(date, "yyyy-MM-dd")//被点击的日期 24              ChangeBgColor(this, trueDate, view, jsEvent);25          },26          viewDisplay: function (view) {
    //显示27              GetTempData();28          }29      });30  }

1 function GetTempData() {2          $("#calendar").fullCalendar('removeEvents'); //绑定前将已经绑定的事件清除3      var jsonData = '{events:[{"backgroundColor":"red", "allDay": "true", "title": "ddd", "id": "821", "end": "2013-05-24", "start": "2013-05-24" }, {"backgroundColor":"red","allDay": "true", "title": "Test event 2", "id": "822", "end": "2013-05-25", "start": "2013-05-25"}]}';4      var jsonObj = eval("(" + jsonData + ")");5      $(jsonObj.events).each(function (i, v) {6          $("td[data-date='" + v.start + "']").addClass("dateselected");7      })8  }

1 function ChangeBgColor(obj, date, view, jsEvent) { 2      if($(obj).hasClass("dateselected")){ 3           $(obj).removeClass("dateselected"); 4           // DelItem(date, view); 5      } 6      else{ 7          $(obj).addClass("dateselected"); 8          // AddNewItem(date, view); 9      }10  }