FullCalendar日历插件应用之数据展现(一)_javascript技巧
时间：2021-07-01 10:21:17
帮助过：13人阅读
开发者可以使用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日历插件应用之数据展现(一)的全部叙述，希望大家喜欢。
