FullCalendar日歷插件應(yīng)用之?dāng)?shù)據(jù)展現(xiàn)(一)
更新時(shí)間：2015年12月23日 10:41:32 作者：CrayonCode
fullcalendar作為一個(gè)功能完善的日歷插件使用非常廣泛，在web開(kāi)發(fā)開(kāi)發(fā)過(guò)程 中非常流行。它與ext js 中的calendar非常類(lèi)似，但考慮到extjs 比較“復(fù)雜龐大”，所以我在開(kāi)發(fā)開(kāi)發(fā)過(guò)程中都會(huì)優(yōu)先考慮fullcalendar
開(kāi)發(fā)者可以使用FullCalendar創(chuàng)建強(qiáng)大的日歷日程應(yīng)用，F(xiàn)ullCalendar提供了豐富的選項(xiàng)設(shè)置和方法調(diào)用，使得開(kāi)發(fā)者可以輕松的創(chuàng)建各種功能的日歷程序。
由于項(xiàng)目需求，需要通過(guò)日歷的方式展現(xiàn)某些數(shù)據(jù)，在網(wǎng)上搜索了很多日歷的插件，覺(jué)得比較好用的還是fullCalendar，下面是我寫(xiě)的一個(gè)簡(jiǎn)單Demo，如有不足，請(qǐng)多多指正?。?！
一、引入必要的文件：
<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文件中接下來(lái)就讓我們看一下這個(gè)文件里的腳本信息。
三、初始化fullcalender:
/* 初始化calendar */ 通過(guò)ID來(lái)初始化放到哪個(gè)標(biāo)簽里
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) {
//動(dòng)態(tài)把數(shù)據(jù)查出，按照月份動(dòng)態(tài)查詢(xún)
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'); 通過(guò)post 請(qǐng)求一般處理程序來(lái)返回需要展現(xiàn)的信息(start與end為需要傳遞的參數(shù)，在本文中沒(méi)有用到可以忽略)
$.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);
});
}); //把從后臺(tái)取出的數(shù)據(jù)進(jìn)行封裝以后在頁(yè)面上以fullCalendar的方式進(jìn)行顯示
},
dayClick: function (date, allDay, jsEvent, view) {
},
loading: function (bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
},
//#region 數(shù)據(jù)綁定上去后添加相應(yīng)信息在頁(yè)面上(一開(kāi)始加載數(shù)據(jù)時(shí)運(yùn)行)
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 鼠標(biāo)放上去顯示信息
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); 鼠標(biāo)懸浮到title的時(shí)候可以設(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();
}
});
四：通過(guò)一般處理程序返回需要的json數(shù)據(jù)
首先新增任務(wù)類(lèi) Task：
/// <summary>
/// 任務(wù)類(lèi)
/// </summary>
public class Task
{
public int ID { get; set; }
/// <summary>
/// 任務(wù)名稱(chēng)
/// </summary>
public string Name { get; set; }
/// <summary>
/// 內(nèi)容
/// </summary>
public string Content { get; set; }
/// <summary>
/// 開(kāi)始時(shí)間
/// </summary>
public DateTime StartDate { get; set; }
/// <summary>
/// 結(jié)束時(shí)間
/// </summary>
public DateTime EndDate { get; set; }
}
一般處理程序ViewData中返回Json數(shù)據(jù)：
public void ProcessRequest(HttpContext context)
{
//測(cè)試數(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="與劉總開(kāi)會(huì)討論需求分析",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="上線(xiàn)測(cè)試",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ù)名稱(chēng)：{0}", entity.Name));
drow.Add("start", ReturnDate(entity.StartDate));
drow.Add("end", ReturnDate(entity.EndDate)); //鼠標(biāo)懸浮上展現(xiàn)的是這個(gè)屬性信息，可以自己設(shè)置
drow.Add("fullname", string.Format("任務(wù)名稱(chēng)：{0}", entity.Name));
drow.Add("allDay", false);
gas.Add(drow);
}
context.Response.Write(jss.Serialize(gas));
}
#region 時(shí)間輸出格式
/// <summary>
/// 時(shí)間按照此格式傳輸
/// </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
下面是效果圖：
鼠標(biāo)放到title的效果：
以上內(nèi)容是小編給大家分享的FullCalendar日歷插件應(yīng)用之?dāng)?shù)據(jù)展現(xiàn)(一)的全部敘述，希望大家喜歡。
相關(guān)文章
JavaScript 函數(shù)式編程實(shí)踐(來(lái)自IBM)
說(shuō)到函數(shù)式編程，人們的第一印象往往是其學(xué)院派，晦澀難懂，大概只有那些蓬頭散發(fā)，不修邊幅，甚至有些神經(jīng)質(zhì)的大學(xué)教授們才會(huì)用的編程方式。2010-06-06
JavaScript中隨機(jī)數(shù)方法?Math.random()
這篇文章主要介紹了JavaScript中隨機(jī)數(shù)方法?Math.random()，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-06-06
Promise.race和Promise.any使用示例詳解
這篇文章主要為大家介紹了如何使用Promise.race() 和 Promise.any() 示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
本文給大家分享的是javascript生成大寫(xiě)小寫(xiě)字母的代碼，十分的簡(jiǎn)單實(shí)用，主要用到了str.charCodeAt()和 String.fromCharCode()方法，有需要的小伙伴可以參考下。2015-07-07
ES6新特性之?dāng)?shù)組、Math和擴(kuò)展操作符用法示例
這篇文章主要介紹了ES6新特性之?dāng)?shù)組、Math和擴(kuò)展操作符用法,結(jié)合實(shí)例形式分析了ES6中數(shù)組、Math和擴(kuò)展操作符的新特性、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04
基于Html+CSS+JS實(shí)現(xiàn)手動(dòng)放煙花效果
這篇文章主要介紹了利用Html+CSS+JavaScript實(shí)現(xiàn)的放煙花效果，文中一共實(shí)現(xiàn)了兩種方式：手動(dòng)和自動(dòng)，文中的示例代碼講解詳細(xì)，感興趣的可以試一試2022-01-01
javascript html實(shí)現(xiàn)網(wǎng)頁(yè)版日歷代碼
這篇文章主要介紹了javascript html實(shí)現(xiàn)網(wǎng)頁(yè)版日歷代碼,需要的朋友可以參考下2016-03-03
詳解JavaScript對(duì)Date對(duì)象的操作問(wèn)題(生成一個(gè)倒數(shù)7天的數(shù)組)
最近項(xiàng)目需求要生成一個(gè)倒數(shù)7天的數(shù)組，下面小編把我的實(shí)現(xiàn)思路和代碼整理分享給大家，供大家參考，需要的朋友可以參考下2015-10-10
???????Rxjs?map,?mergeMap?和?switchMap?的區(qū)別與聯(lián)系
這篇文章主要介紹了???????Rxjs?map,mergeMap和switchMap的區(qū)別與聯(lián)系，map、mergeMap和switchMap是RxJS中的三個(gè)主要運(yùn)算符，在SAP?Spartacus開(kāi)發(fā)中有著廣泛的使用場(chǎng)景2022-07-07
微信小程序商城分類(lèi)滾動(dòng)列表錨點(diǎn)的項(xiàng)目實(shí)踐
本文主要介紹了微信小程序商城分類(lèi)滾動(dòng)列表錨點(diǎn)的項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04