首頁 > 開發者 > JavaScript
FullCalendar日曆外掛程式應用之資料展現(一)，
開發人員可以使用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日曆外掛程式應用之資料展現(一)的全部敘述，希望大家喜歡。
您可能感興趣的文章:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
