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

来源：动视网责编：小采时间：2020-11-27 21:47:40

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

FullCalendar日历插件应用之数据展现(一)_javascript技巧:开发者可以使用FullCalendar创建强大的日历日程应用，FullCalendar提供了丰富的选项设置和方法调用，使得开发者可以轻松的创建各种功能的日历程序。由于项目需求，需要通过日历的方式展现某些数据，在网上搜索了很多日历的插件，觉得比较好用的还是full

推荐度：

点击下载本文 文档为doc格式

导读FullCalendar日历插件应用之数据展现(一)_javascript技巧:开发者可以使用FullCalendar创建强大的日历日程应用，FullCalendar提供了丰富的选项设置和方法调用，使得开发者可以轻松的创建各种功能的日历程序。由于项目需求，需要通过日历的方式展现某些数据，在网上搜索了很多日历的插件，觉得比较好用的还是full

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

下面是效果图：