rush:js;">
/* 初始化calendar */ 通过ID来初始化放到哪个
标签里
jQuery('#calendar').fullCalendar({
header: {
left: 'month,agendaWeek,agendaDay',center: 'title',right: 'today,prev,next'
},monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],monthNamesShort: ["一月",dayNames: ["周日","周一","周二","周三","周四","周五","周六"],dayNamesShort: ["周日",today: ["今天"],f
irstDay: 1,buttonText: {
prev: '«',next: '»',prevYear: '<<',nextYear: '>>',today: '今天',month: '月',week: '周',day: '日'
},view
display: 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 = '
';
if (view.name == "month") {//按月份
var evtcontent = '
四:通过一般处理程序返回需要的json数据
首先新增任务类 Task:
rush:java;">
///
/// 任务类
///
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数据:
rush:js;">
public void ProcessRequest(HttpContext context)
{
//测试数据
List
tasks = new List() {
new Task(){ ID=1,Name="任务1",Content="修改某处Bug",StartDate=new DateTime(2015,12,16,08,32,33),EndDate=new DateTime(2015,11,27,33)},new Task(){ ID=2,Name="任务2",Content="与刘总开会讨论需求分析",09,18,19,new Task(){ ID=3,Name="任务3",Content="代码上传与整理",17,13,new Task(){ ID=4,Name="任务4",Content="上线测试",30,15,new Task(){ ID=5,Name="任务5",07,33)}
};
JavaScriptSerializer jss = new JavaScriptSerializer();
List> gas = new List>();
foreach (var entity in tasks)
{
Dictionary drow = new Dictionary();
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",entity.Name));
drow.Add("allDay",false);
gas.Add(drow);
}
context.Response.Write(jss.Serialize(gas));
}
#region 时间输出格式
///
/// 时间按照此格式传输
///
/// aram name="date">
///
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
///
///
aram name="str">
///
private string AddZero(string str)
{
if (str.Length == 1)
return "0" + str;
else
return str;
}
#endregion
下面是效果图:
鼠标放到title的效果:
以上内容是小编给大家分享的FullCalendar日历插件应用之数据展现(一)的全部叙述,希望大家喜欢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。