FullCalendar日歷插件應用之數據展現(一)

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> FullCalendar日歷插件應用之數據展現(一)

編輯：關於JavaScript

開發者可以使用FullCalendar創建強大的日歷日程應用，FullCalendar提供了豐富的選項設置和方法調用，使得開發者可以輕松的創建各種功能的日歷程序。

由於項目需求，需要通過日歷的方式展現某些數據，在網上搜索了很多日歷的插件，覺得比較好用的還是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) {
   //動態把數據查出，按照月份動態查詢
   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 = '<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的時候可以設置展現哪些信息
   $(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數據

首先新增任務類 Task：

/// <summary>
 /// 任務類
 /// </summary>
 public class Task
 {
  public int ID { get; set; }
  /// <summary>
  /// 任務名稱
  /// </summary>
  public string Name { get; set; }
  /// <summary>
  /// 內容
  /// </summary>
  public string Content { get; set; }
  /// <summary>
  /// 開始時間
  /// </summary>
  public DateTime StartDate { get; set; }
  /// <summary>
  /// 結束時間
  /// </summary>
  public DateTime EndDate { get; set; }
 }

一般處理程序ViewData中返回Json數據：

 public void ProcessRequest(HttpContext context)
  {
   //測試數據 
List<Task> tasks = new List<Task>() { 
new Task(){ ID=1,Name="任務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="任務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="任務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="任務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="任務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("任務名稱：{0}", entity.Name));
    drow.Add("start", ReturnDate(entity.StartDate));
    drow.Add("end", ReturnDate(entity.EndDate));    //鼠標懸浮上展現的是這個屬性信息，可以自己設置
    drow.Add("fullname", string.Format("任務名稱：{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>
  /// 判斷數字前面是否加0
  /// </summary>
  /// <param name="str"></param>
  /// <returns></returns>
  private string AddZero(string str)
  {
   if (str.Length == 1)
    return "0" + str;
   else
    return str;
  }
  #endregion

下面是效果圖：

鼠標放到title的效果：

以上內容是小編給大家分享的FullCalendar日歷插件應用之數據展現(一)的全部敘述，希望大家喜歡。

上一頁:詳解JavaScript時間格式化
下一頁:js實現圖片無縫滾動

關於JavaScript

Highcharts使用簡例及異步動態讀取數據: Highcharts 是一個用純JavaScript編寫的一個圖表庫，能夠很簡單便捷的在web網站
經典的間隔時間滾動新聞（圖片），可控制滾動: 經典的間隔時間滾動新聞（圖片），可控制滾動 *{margin:0;pad
js實現圖片放大和拖拽特效代碼分享: 本文實例講述了js實現圖片放大和拖拽特效代碼。分享給大家供大家參考。具體如下：js實現圖片放大和拖拽

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

DIV CSS 佈局教程網

相關文章