zoukankan      html  css  js  c++  java
  • fullcalendar小结

    最近做的项目需要一个日程插件,在网上找了一些插件觉的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  }
    单元格的点击事件
  • 相关阅读:
    一些常用的正则表达式
    ASP.net国际化页面可以选择输出语言
    SQL 2008 数据表导入到 ORACLE 10g
    转载 SQL Server 2008中增强的汇总技巧
    类似于行转列的一种需求
    第一次
    很奇怪的一个SQL 语句
    MS SQL 中 FULL JOIN 的用法
    [转载]网络编辑必知常识:什么是PV、UV和PR值 zz
    寒假学习2实验一Linux系统的安装和常用命令
  • 原文地址:https://www.cnblogs.com/justconnor/p/3161881.html
Copyright © 2011-2022 走看看