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

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

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

一、引入必要的文件：

二、在界面中添加div块：

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

三、初始化fullcalender:

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

首先新增任务类 Task：

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

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

输出格式 ///

/// 时间按照此格式传输 ///

/// /// 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; } ///

/// 判断数字前面是否加0 ///

/// /// private string AddZero(string str) { if (str.Length == 1) return "0" + str; else return str; } #endregion

下面是效果图：

鼠标放到title的效果：

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

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