FullCalendar日歷插件應(yīng)用之?dāng)?shù)據(jù)展現(xiàn)(一)

2019-11-20 10:57:36

字體：大中小

供稿：網(wǎng)友

開發(fā)者可以使用FullCalendar創(chuàng)建強大的日歷日程應(yīng)用，F(xiàn)ullCalendar提供了豐富的選項設(shè)置和方法調(diào)用，使得開發(fā)者可以輕松的創(chuàng)建各種功能的日歷程序。

由于項目需求，需要通過日歷的方式展現(xiàn)某些數(shù)據(jù)，在網(wǎng)上搜索了很多日歷的插件，覺得比較好用的還是fullCalendar，下面是我寫的一個簡單Demo，如有不足，請多多指正?。?！

一、引入必要的文件：

 <link href="Scripts/Plugins/fullcalendar.css" rel="stylesheet" /> <link href="Scripts/Plugins/jquery.ui.css" rel="stylesheet" /> <link href="Scripts/Plugins/style.default.css" rel="stylesheet" /> <script src="Scripts/Plugins/jquery-1.7.min.js"></script> <script src="Scripts/Plugins/jquery-ui-1.8.16.custom.min.js"></script> <script src="Scripts/Plugins/fullcalendar.min.js"></script> <script src="Scripts/Plugins/fullcalendar.js"></script>

二、在界面中添加div塊：

<body> <div id='calendar' style="margin-top:10px;margin-left:5px"></div> </body>

初始化calendar的js代碼我把它放到了fullcalendar.js文件中接下來就讓我們看一下這個文件里的腳本信息。

三、初始化fullcalender:

 /* 初始化calendar */ 通過ID來初始化放到哪個標簽里 jQuery('#calendar').fullCalendar({  header: {   left: 'month,agendaWeek,agendaDay',   center: 'title',   right: 'today, prev, next'  },  monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],  monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],  dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],  dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],  today: ["今天"],  firstDay: 1,  buttonText: {   prev: '«',   next: '»',   prevYear: ' << ',   nextYear: ' >> ',   today: '今天',   month: '月',   week: '周',   day: '日'  },  viewDisplay: function (view) {   //動態(tài)把數(shù)據(jù)查出，按照月份動態(tài)查詢   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 請求一般處理程序來返回需要展現(xiàn)的信息(start與end為需要傳遞的參數(shù)，在本文中沒有用到可以忽略)   $.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);    });   }); //把從后臺取出的數(shù)據(jù)進行封裝以后在頁面上以fullCalendar的方式進行顯示  },  dayClick: function (date, allDay, jsEvent, view) {  },  loading: function (bool) {   if (bool) $('#loading').show();   else $('#loading').hide();  },  //#region 數(shù)據(jù)綁定上去后添加相應(yīng)信息在頁面上(一開始加載數(shù)據(jù)時運行)  eventAfterRender: function (event, element, view) {   var fstart = $.fullCalendar.formatDate(event.start, "HH:mm");   var fend = $.fullCalendar.formatDate(event.end, "HH:mm");   var confbg = '<span class="fc-event-bg"></span>';   if (view.name == "month") {//按月份        var evtcontent = '<div class="fc-event-vert"><a>';    evtcontent = evtcontent + confbg;    //evtcontent = evtcontent + '<span class="fc-event-titlebg">' + fstart + " - " + fend + event.fullname + '</span>';     evtcontent = evtcontent + '<span class="fc-event-titlebg">' + event.fullname + '</span>';    element.html(evtcontent);   } else if (view.name == "agendaWeek") {//按周    var evtcontent = '<a>';    evtcontent = evtcontent + confbg;    evtcontent = evtcontent + '<span class="fc-event-time">' + fstart + "-" + fend + '</span>';    evtcontent = evtcontent + '<span>' + event.fullname + '</span>';    element.html(evtcontent);   } else if (view.name == "agendaDay") {//按日    var evtcontent = '<a>';    evtcontent = evtcontent + confbg;    evtcontent = evtcontent + '<span class="fc-event-time">' + fstart + " - " + fend + '</span>';    element.html(evtcontent);   }  },  //#endregion  //#region 鼠標放上去顯示信息  eventMouseover: function (calEvent, jsEvent, view) {      //var fstart = $.fullCalendar.formatDate(calEvent.start, "yyyy/MM/dd HH:mm");   //var fend = $.fullCalendar.formatDate(calEvent.end, "yyyy/MM/dd HH:mm");   //$(this).attr('title', fstart + " - " + fend + " " + calEvent.fullname);   鼠標懸浮到title的時候可以設(shè)置展現(xiàn)哪些信息   $(this).attr('title', calEvent.fullname);   $(this).css('font-weight', 'normal');   //   $(this).tooltip({   //    effect: 'toggle',   //    cancelDefault: true   //   });  },  eventClick: function (event) {      },  events: [],  //#endregion  editable: true,  droppable: true, // this allows things to be dropped onto the calendar !!!  drop: function (date, allDay) { // this function is called when something is dropped   // retrieve the dropped element's stored Event Object   var originalEventObject = jQuery(this).data('eventObject');   // we need to copy it, so that multiple events don't have a reference to the same object   var copiedEventObject = jQuery.extend({}, originalEventObject);   // assign it the date that was reported   copiedEventObject.start = date;   copiedEventObject.allDay = allDay;   // render the event on the calendar   // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)   jQuery('#calendar').fullCalendar('renderEvent', copiedEventObject, true);   // is the "remove after drop" checkbox checked?   jQuery(this).remove();  } });

四：通過一般處理程序返回需要的json數(shù)據(jù)

首先新增任務(wù)類 Task：

/// <summary> /// 任務(wù)類 /// </summary> public class Task {  public int ID { get; set; }  /// <summary>  /// 任務(wù)名稱  /// </summary>  public string Name { get; set; }  /// <summary>  /// 內(nèi)容  /// </summary>  public string Content { get; set; }  /// <summary>  /// 開始時間  /// </summary>  public DateTime StartDate { get; set; }  /// <summary>  /// 結(jié)束時間  /// </summary>  public DateTime EndDate { get; set; } }

一般處理程序ViewData中返回Json數(shù)據(jù)：

 public void ProcessRequest(HttpContext context)  {   //測試數(shù)據(jù) List<Task> tasks = new List<Task>() { new Task(){ ID=1,Name="任務(wù)1",Content="修改某處Bug",StartDate=new DateTime(2015,12,16,08,32,33),EndDate=new DateTime(2015,12,16,11,27,33)}, new Task(){ ID=2,Name="任務(wù)2",Content="與劉總開會討論需求分析",StartDate=new DateTime(2015,12,09,18,32,33),EndDate=new DateTime(2015,12,09,19,27,33)}, new Task(){ ID=3,Name="任務(wù)3",Content="代碼上傳與整理",StartDate=new DateTime(2015,12,17,13,32,33),EndDate=new DateTime(2015,12,17,17,27,33)}, new Task(){ ID=4,Name="任務(wù)4",Content="上線測試",StartDate=new DateTime(2015,12,30,15,32,33),EndDate=new DateTime(2015,12,15,17,27,33)}, new Task(){ ID=5,Name="任務(wù)5",Content="代碼上傳與整理",StartDate=new DateTime(2015,12,07,13,32,33),EndDate=new DateTime(2015,12,07,17,27,33)} };    JavaScriptSerializer jss = new JavaScriptSerializer();   List<Dictionary<string, object>> gas = new List<Dictionary<string, object>>();   foreach (var entity in tasks)   {    Dictionary<string, object> drow = new Dictionary<string, object>();    drow.Add("id", entity.ID);    drow.Add("title", string.Format("任務(wù)名稱：{0}", entity.Name));    drow.Add("start", ReturnDate(entity.StartDate));    drow.Add("end", ReturnDate(entity.EndDate));    //鼠標懸浮上展現(xiàn)的是這個屬性信息，可以自己設(shè)置    drow.Add("fullname", string.Format("任務(wù)名稱：{0}", entity.Name));    drow.Add("allDay", false);        gas.Add(drow);   }   context.Response.Write(jss.Serialize(gas));  }  #region 時間輸出格式  /// <summary>  /// 時間按照此格式傳輸  /// </summary>  /// <param name="date"></param>  /// <returns></returns>  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;  }  /// <summary>  /// 判斷數(shù)字前面是否加0  /// </summary>  /// <param name="str"></param>  /// <returns></returns>  private string AddZero(string str)  {   if (str.Length == 1)    return "0" + str;   else    return str;  }  #endregion

下面是效果圖：