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  }

单元格的点击事件

转载于:https://www.cnblogs.com/justconnor/p/3161881.html

fullcalendar小结相关推荐

日程表组件FullCalendar(V4.4.1)使用小结
FullCalendar是一款功能强大,用法简单的js日程表组件,目前已支持React,Vue和Angular三大主流框架.最近Vue项目需要在日程表进行数据的增删改查,通过官方文档和demo顺利完成 ...
【阶段小结】协同开发——这学期的Git使用小结
[阶段小结]协同开发--这学期的Git使用小结一.Git简介 1. Git简单介绍 2. Git工作流程以及各个区域 3. Git文件状态变化二.Git安装&Git基本配置三.个人踩坑 ...
正则表达式(括号)、[中括号]、{大括号}的区别小结
正则表达式(括号).[中括号].{大括号}的区别小结 </h1><div class="clear"></div><div class=& ...
php中$_REQUEST、$_POST、$_GET的区别和联系小结
php中$_REQUEST.$_POST.$_GET的区别和联系小结作者: 字体:[增加减小] 类型:转载 php中有$_request与$_post.$_get用于接受表单数据,当时他们有何种区 ...
c cin.get()的用法小结_c语言中static 用法
static在c里面可以用来修饰变量,也可以用来修饰函数. 先看用来修饰变量的时候.变量在c里面可分为存在全局数据区.栈和堆里.其实我们平时所说的堆栈是栈而不是堆,不要弄混. int a ; int ...
linux 压缩文件夹格式,Linux下常见文件格式的压缩、解压小结
Linux下常见文件格式的压缩.解压小结 .tar 解包: tar xvf FileName.tar 打包:tar cvf FileName.tar DirName (注:tar是打包,不是压缩!) ...
设计模式：简单工厂、工厂方法、抽象工厂之小结与区别
简单工厂,工厂方法,抽象工厂都属于设计模式中的创建型模式.其主要功能都是帮助我们把对象的实例化部分抽取了出来,优化了系统的架构,并且增强了系统的扩展性. 本文是本人对这三种模式学习后的一个小结以及对他 ...
flash 入门课知识小结
一. 几种类型帧的小结:(关键帧.空白关键帧.普通帧) 1. 特点帧--是进行flash动画制作的最基本的单位,每一个精彩的flash动画都是由很多个精心雕琢的帧构成的,在时间轴上的每一帧都可以 ...
Eigen/Matlab 使用小结
文章目录 [Eigen Matlab使用小结](https://www.cnblogs.com/rainbow70626/p/8819119.html) Eigen初始化 0.[官网资料](http: ...

fullcalendar小结

fullcalendar小结相关推荐

最新文章

热门文章