fullcalendar小结

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

效果图如下：

 var calendar = null;
  function ShowCalendar() {
      if (calendar != null) {
          return;
      }
      var date = new Date();
      var d = date.getDate();
      var m = date.getMonth();
      var y = date.getFullYear();
      calendar = $('#calendar').fullCalendar({
          header: {
              left: 'prev',
              center: 'title',
              right: 'next'
          },
          disableDragging: true,
          selectable: true,
          selectHelper: false,
          select: function (start, end, allDay) {
          },
          editable: true,
          dayClick: function (date, allDay, jsEvent, view) {
              var trueDate = $.fullCalendar.formatDate(date, "yyyy-MM-dd")//被点击的日期
              ChangeBgColor(this, trueDate, view, jsEvent);
          },
          viewDisplay: function (view) {//显示
              GetTempData();
          }
      });
  }

配置日历

 function GetTempData() {
          $("#calendar").fullCalendar('removeEvents'); //绑定前将已经绑定的事件清除
      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"}]}';
      var jsonObj = eval("(" + jsonData + ")");
      $(jsonObj.events).each(function (i, v) {
          $("td[data-date='" + v.start + "']").addClass("dateselected");
      })
  }

将数据绑定到日历上来

 function ChangeBgColor(obj, date, view, jsEvent) {
      if($(obj).hasClass("dateselected")){
           $(obj).removeClass("dateselected");
           // DelItem(date, view);
      }
      else{
          $(obj).addClass("dateselected");
          // AddNewItem(date, view);
      }
  }

单元格的点击事件