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

2024-08-26 02:41:18

开发者可以使用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

下面是效果图：

鼠标放到title的效果：

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

JavaWeb项目FullCalendar日历插件使用的示例代码

本文介绍了JavaWeb项目FullCalendar日历插件使用的示例代码,分享给大家,具体如下: 使用FullCalendar需要引用的文件 1.css文件 2.js文件 <link href="${base}/assets/global/plugins/fullcalendar/fullcalendar.min.css" rel="external nofollow" rel="stylesheet" type="text/c
FullCalendar日历插件应用之数据展现(一)

开发者可以使用FullCalendar创建强大的日历日程应用,FullCalendar提供了丰富的选项设置和方法调用,使得开发者可以轻松的创建各种功能的日历程序. 由于项目需求,需要通过日历的方式展现某些数据,在网上搜索了很多日历的插件,觉得比较好用的还是fullCalendar,下面是我写的一个简单Demo,如有不足,请多多指正!!! 一.引入必要的文件: <link href="Scripts/Plugins/fullcalendar.css" rel="style
php使用fullcalendar日历插件详解

最近做课程表的项目,找了好多个插件感觉都不好用,无意间看到了fullcalendar,还挺简单的,很方便,先贴一张项目页面 <!DOCTYPE html> <html> <head> <meta charset='utf-8' />  <link href='/public/school/table/fullcalendar.min.css' rel='stylesheet' /> <link href
为开发者准备的10款最好的jQuery日历插件

这篇文章介绍的是 10 款最棒而且又很有用的 jQuery 日历插件,允许开发者们把这些漂亮的日历插件结合到自己的网站中.这些日历插件易用性都很强,轻轻松松的就可以把漂亮的日历插件装饰到你的网站了.希望下面的插件列表能给予你一定的帮助,让你的 web开发更快更好.旧版本的日历插件和下拉框已经被淘汰啦,好好欣赏 jQuery 日历插件给你带来的强烈视觉冲击吧! 1. CLNDR.js CLNDR.js 是一个日历插件,用来创建日历,允许用户随意的按照自己的想法去自定义日历.这个插件不会生成任何的标
Jquery日历插件制作简单日历

在页面开发中,经常遇到需要用户输入日期的操作.通常的做法是,提供一个文本框(text),让用户输入,然后,编写代码验证输入的数据,检测其是否是日期类型.这样比较麻烦,同时,用户输入日期的操作也不是很方便,影响用户体验.如果使用jQuery UI中的datepicker(日历)插件,这些问题都可以迎刃而解.该插件调用的<span style="color:#cc66cc;"><strong>语法格式</strong></span>如下: $
jquery日历插件e-calendar升级版

jQuery事件日历插件e-calendar,支持针对指定日期自定义日程安排(无条数限制),设置过日程的日期会高亮显示,兼容IE7+主流浏览器. 原版使用方法及演示地址:e-calendar原版 (鼠标移动到天显示当天的日程安排) 升级版介绍: 1.同一天可存在多个事件交集 2.点击天在日历下方出现日程列表 3.点击日程列表可添加其事件 . 4.添加item-grid的显示和隐藏 5.Events中数组集合可添加id,type等元素(区分日程类型:任务类型或日程类型) 6.增加年份选择,月份选择
jQuery日历插件datepicker用法详解

jQuery是一款不可多得的非常优秀的javascript脚本开发库,而基于其上的很多插件也是非常规范和卓越的,如果错过这番美景真是太可惜了,比如datepicker这个插件. 一般MIS系统的前端,尤其是用户注册页面,都会有诸如"出身年月"的日期输入框,最简单的做法就是使用一个<input type="text"/>标签,这样做的弊端有很多:首先是与数据库字段类型的匹配.其次是输入日期的合法性如"13月"或者闰年等等问题,如果深入下
laydate时间日历插件使用方法详解

本文为大家分享了laydate时间日历插件的使用方法,供大家参考,具体内容如下 1.前言在处理页面表单的时候,会遇到日期类型的数据,我们可以通过时间插件的让用户来选择具体的时间,这样就会比较方便.今天记录一下laydate这个时间插件. 2.代码展示 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>测试时间插件&l
轻量级的原生js日历插件calendar.js使用指南

使用说明: 需要引入插件calendar.js/calendar.min.js 须要引入calendar.css 样式表,可以自定义自己想要的皮肤本日历插件支持cmd模块化如下调用: 复制代码代码如下: xvDate({ 'targetId':'date1',//时间写入对象的id 'triggerId':['date1','dateBtn1'],//触发事件的对象id 'alignId':'datesWrap1',//日历对齐对象 'format':'-',//时间格式默认'YYYY-
jquery日历插件datepicker用法分析

本文实例讲述了jquery日历插件datepicker用法.分享给大家供大家参考,具体如下: 我用过好几种日历插件,有的太花哨,有的太简单,有的浏览器不兼容等等,没有一个能让我感到满意的,后来同事给我推荐了jquery.datepick这个插件,我从官方网站下了一个,亲自做了一下,感觉相当的不错,逻辑和样式可以完全分开,并且非常的灵活,支持30个国家的语言,基本能满足我的要求. 这里给出本站下载地址:http://www.jb51.net/jiaoben/19622.html 解压jquery.

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

相关推荐

随机推荐