FullCalendar日历插件应用之数据展现(一)


Posted in Javascript onDecember 23, 2015

开发者可以使用FullCalendar创建强大的日历日程应用,FullCalendar提供了丰富的选项设置和方法调用,使得开发者可以轻松的创建各种功能的日历程序。

由于项目需求,需要通过日历的方式展现某些数据,在网上搜索了很多日历的插件,觉得比较好用的还是fullCalendar,下面是我写的一个简单Demo,如有不足,请多多指正!!! 

一、引入必要的文件:

<link href="Scripts/Plugins/fullcalendar.css" rel="stylesheet" />
 <link href="Scripts/Plugins/jquery.ui.css" rel="stylesheet" />
 <link href="Scripts/Plugins/style.default.css" rel="stylesheet" />
 <script src="Scripts/Plugins/jquery-1.7.min.js"></script>
 <script src="Scripts/Plugins/jquery-ui-1.8.16.custom.min.js"></script>
 <script src="Scripts/Plugins/fullcalendar.min.js"></script>
 <script src="Scripts/Plugins/fullcalendar.js"></script>

二、在界面中添加div块:

<body> 
<div id='calendar' style="margin-top:10px;margin-left:5px">
</div> 
</body>

初始化calendar的js代码我把它放到了fullcalendar.js文件中接下来就让我们看一下这个文件里的脚本信息。

三、初始化fullcalender:

/* 初始化calendar */ 通过ID来初始化放到哪个标签里
 jQuery('#calendar').fullCalendar({
  header: {
   left: 'month,agendaWeek,agendaDay',
   center: 'title',
   right: 'today, prev, next'
  },  monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
  monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
  dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
  dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
  today: ["今天"],
  firstDay: 1,
  buttonText: {
   prev: '«',
   next: '»',
   prevYear: ' << ',
   nextYear: ' >> ',
   today: '今天',
   month: '月',
   week: '周',
   day: '日'
  },
  viewDisplay: function (view) {
   //动态把数据查出,按照月份动态查询
   var viewStart = $.fullCalendar.formatDate(view.start, "yyyy-MM-dd HH:mm:ss");
   var viewEnd = $.fullCalendar.formatDate(view.end, "yyyy-MM-dd HH:mm:ss");
   $("#calendar").fullCalendar('removeEvents');   通过post 请求一般处理程序来返回需要展现的信息(start与end为需要传递的参数,在本文中没有用到可以忽略)
   $.post("../DateHandle/ViewData.ashx", { start: viewStart, end: viewEnd }, function (data) {
    var resultCollection = jQuery.parseJSON(data);
    $.each(resultCollection, function (index, term) {
     $("#calendar").fullCalendar('renderEvent', term, true);
    });
   }); //把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示
  },
  dayClick: function (date, allDay, jsEvent, view) {
  },
  loading: function (bool) {
   if (bool) $('#loading').show();
   else $('#loading').hide();
  },
  //#region 数据绑定上去后添加相应信息在页面上(一开始加载数据时运行)
  eventAfterRender: function (event, element, view) {
   var fstart = $.fullCalendar.formatDate(event.start, "HH:mm");
   var fend = $.fullCalendar.formatDate(event.end, "HH:mm");
   var confbg = '<span class="fc-event-bg"></span>';
   if (view.name == "month") {//按月份    
    var evtcontent = '<div class="fc-event-vert"><a>';
    evtcontent = evtcontent + confbg;
    //evtcontent = evtcontent + '<span class="fc-event-titlebg">' + fstart + " - " + fend + event.fullname + '</span>'; 
    evtcontent = evtcontent + '<span class="fc-event-titlebg">' + event.fullname + '</span>';
    element.html(evtcontent);
   } else if (view.name == "agendaWeek") {//按周
    var evtcontent = '<a>';
    evtcontent = evtcontent + confbg;
    evtcontent = evtcontent + '<span class="fc-event-time">' + fstart + "-" + fend + '</span>';
    evtcontent = evtcontent + '<span>' + event.fullname + '</span>';
    element.html(evtcontent);
   } else if (view.name == "agendaDay") {//按日
    var evtcontent = '<a>';
    evtcontent = evtcontent + confbg;
    evtcontent = evtcontent + '<span class="fc-event-time">' + fstart + " - " + fend + '</span>';
    element.html(evtcontent);
   }
  },
  //#endregion
  //#region 鼠标放上去显示信息
  eventMouseover: function (calEvent, jsEvent, view) {   
   //var fstart = $.fullCalendar.formatDate(calEvent.start, "yyyy/MM/dd HH:mm");
   //var fend = $.fullCalendar.formatDate(calEvent.end, "yyyy/MM/dd HH:mm");
   //$(this).attr('title', fstart + " - " + fend + " " + calEvent.fullname);   鼠标悬浮到title的时候可以设置展现哪些信息
   $(this).attr('title', calEvent.fullname);
   $(this).css('font-weight', 'normal');
   //   $(this).tooltip({
   //    effect: 'toggle',
   //    cancelDefault: true
   //   });
  },
  eventClick: function (event) {    
  },
  events: [],
  //#endregion
  editable: true,
  droppable: true, // this allows things to be dropped onto the calendar !!!
  drop: function (date, allDay) { // this function is called when something is dropped
   // retrieve the dropped element's stored Event Object
   var originalEventObject = jQuery(this).data('eventObject');
   // we need to copy it, so that multiple events don't have a reference to the same object
   var copiedEventObject = jQuery.extend({}, originalEventObject);
   // assign it the date that was reported
   copiedEventObject.start = date;
   copiedEventObject.allDay = allDay;
   // render the event on the calendar
   // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
   jQuery('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
   // is the "remove after drop" checkbox checked?
   jQuery(this).remove();
  }
 });

 四:通过一般处理程序返回需要的json数据

首先新增任务类 Task:

/// <summary>
 /// 任务类
 /// </summary>
 public class Task
 {
  public int ID { get; set; }
  /// <summary>
  /// 任务名称
  /// </summary>
  public string Name { get; set; }
  /// <summary>
  /// 内容
  /// </summary>
  public string Content { get; set; }
  /// <summary>
  /// 开始时间
  /// </summary>
  public DateTime StartDate { get; set; }
  /// <summary>
  /// 结束时间
  /// </summary>
  public DateTime EndDate { get; set; }
 }

一般处理程序ViewData中返回Json数据:

public void ProcessRequest(HttpContext context)
  {
   //测试数据 
List<Task> tasks = new List<Task>() { 
new Task(){ ID=1,Name="任务1",Content="修改某处Bug",StartDate=new DateTime(2015,12,16,08,32,33),EndDate=new DateTime(2015,12,16,11,27,33)},
 new Task(){ ID=2,Name="任务2",Content="与刘总开会讨论需求分析",StartDate=new DateTime(2015,12,09,18,32,33),EndDate=new DateTime(2015,12,09,19,27,33)},
 new Task(){ ID=3,Name="任务3",Content="代码上传与整理",StartDate=new DateTime(2015,12,17,13,32,33),EndDate=new DateTime(2015,12,17,17,27,33)},
 new Task(){ ID=4,Name="任务4",Content="上线测试",StartDate=new DateTime(2015,12,30,15,32,33),EndDate=new DateTime(2015,12,15,17,27,33)},
 new Task(){ ID=5,Name="任务5",Content="代码上传与整理",StartDate=new DateTime(2015,12,07,13,32,33),EndDate=new DateTime(2015,12,07,17,27,33)}
 };
    JavaScriptSerializer jss = new JavaScriptSerializer();
   List<Dictionary<string, object>> gas = new List<Dictionary<string, object>>();
   foreach (var entity in tasks)
   {
    Dictionary<string, object> drow = new Dictionary<string, object>();
    drow.Add("id", entity.ID);
    drow.Add("title", string.Format("任务名称:{0}", entity.Name));
    drow.Add("start", ReturnDate(entity.StartDate));
    drow.Add("end", ReturnDate(entity.EndDate));    //鼠标悬浮上展现的是这个属性信息,可以自己设置
    drow.Add("fullname", string.Format("任务名称:{0}", entity.Name));
    drow.Add("allDay", false);    
    gas.Add(drow);
   }
   context.Response.Write(jss.Serialize(gas));
  }
  #region 时间输出格式
  /// <summary>
  /// 时间按照此格式传输
  /// </summary>
  /// <param name="date"></param>
  /// <returns></returns>
  private string ReturnDate(DateTime? date)
  {
   string str = string.Empty;
   string time = Convert.ToString(date);
   string[] split = time.Split(' ');
   string viewDate = split[0].Split('/')[0] + "-" + AddZero(split[0].Split('/')[1]) + "-" + AddZero(split[0].Split('/')[2]);
   string viewTime = AddZero(split[1].Split(':')[0]) + ":" + AddZero(split[1].Split(':')[1]) + ":" + AddZero(split[1].Split(':')[2]);
   str = viewDate + "T" + viewTime;
   return str;
  }
  /// <summary>
  /// 判断数字前面是否加0
  /// </summary>
  /// <param name="str"></param>
  /// <returns></returns>
  private string AddZero(string str)
  {
   if (str.Length == 1)
    return "0" + str;
   else
    return str;
  }
  #endregion

 下面是效果图:

 FullCalendar日历插件应用之数据展现(一)

鼠标放到title的效果: 

FullCalendar日历插件应用之数据展现(一)

以上内容是小编给大家分享的FullCalendar日历插件应用之数据展现(一)的全部叙述,希望大家喜欢。

Javascript 相关文章推荐
JS request函数 用来获取url参数
May 17 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
JavaScript引用类型和基本类型详解
Jan 06 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
使用vue-resource进行数据交互的实例
Sep 02 Javascript
JS面向对象的程序设计相关知识小结
May 26 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
vue跳转方式(打开新页面)及传参操作示例
Jan 26 Javascript
js实现图片无缝滚动
Dec 23 #Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 #Javascript
js判断文本框输入的内容是否为数字
Dec 23 #Javascript
javascript新闻跑马灯实例代码
Jul 29 #Javascript
javascript动态添加checkbox复选框的方法
Dec 23 #Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 #Javascript
Bootstrap轮播加上css3动画,炫酷到底!
Dec 22 #Javascript
You might like
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
JSON 入门指南 想了解json的朋友可以看下
2009/08/26 Javascript
Mootools 1.2教程 类(一)
2009/09/15 Javascript
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
原生js实现二级联动菜单
2019/11/27 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
用Python一键搭建Http服务器的方法
2018/06/01 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
你对IPv6了解程度
2016/02/09 面试题
自我评价的范文
2014/02/02 职场文书
乡镇爱国卫生月活动总结
2014/06/25 职场文书
开展读书活动总结
2014/06/30 职场文书
小学生运动会报道稿
2014/09/12 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
2015年党小组工作总结
2015/05/26 职场文书
实习单位意见
2015/06/04 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
优化Mysql查询的示例
2022/04/26 MySQL