视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
FullCalendar日历插件应用之数据展现(一)_javascript技巧
2020-11-27 21:47:40 责编:小采
文档
 开发者可以使用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日历插件应用之数据展现(一)的全部叙述,希望大家喜欢。

下载本文
显示全文
专题