用jquery實(shí)現(xiàn)學(xué)校的校歷(asp.net+jquery ui 1.72)

更新時(shí)間：2010年01月01日 01:37:54 作者：

學(xué)校日歷有以下幾個(gè)特點(diǎn)：1顯示本周是本學(xué)期的第幾周；2顯示今日事件；3特殊顯示有事件的日期，點(diǎn)擊該日期顯示本日事件。

截圖:

controller代碼：
代碼

復(fù)制代碼代碼如下:

 
public ActionResult CalendarDisplay() 
{ 
BL.DateEventBL de = new BL.DateEventBL(); 
//獲取當(dāng)日日期,使用能被javascript轉(zhuǎn)換成日期的格式 
DateTimeFormatInfo myDTFI = new CultureInfo("en-US", false).DateTimeFormat; 
string utcTime = DateTime.Now.ToString("MMM dd,yyyy HH:mm:ss", myDTFI); 
ViewData["currentDay"] = utcTime; 
//獲取當(dāng)月有事件的日期 
List<DateTime> dateHaveEvent = de.GetTimeHaveEvent(DateTime.Now.Year, DateTime.Now.Month); 
List<String> dates=dateHaveEvent.Select(u=>u.ToString("MMM dd,yyyy HH:mm:ss", myDTFI)).ToList(); 
ViewData["datesHaveEvent"] = dates; 
//獲取當(dāng)日事件 
List<BL.CDateEvent> deInfos = de.GetDE(DateTime.Now, new Guid("00000000-0000-0000-0000-000000000001")); 
//獲取當(dāng)前周 
BL.DateSpanBL ds = new BL.DateSpanBL(); 
int currentWeek = ds.GetCurrentWeek(DateTime.Now, new Guid("00000000-0000-0000-0000-000000000002")); 
ViewData["currentWeek"] = currentWeek; 
return View(deInfos); 
} 

partialview(局部視圖)：
代碼

復(fù)制代碼代碼如下:

 
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<BL.CDateEvent>>" %> 
<%string json = ""; List<String> datesHaveEvent = ViewData["datesHaveEvent"] as List<String>; %> 
<% 
if (datesHaveEvent != null && datesHaveEvent.Count > 0) 
{ 
json = "["; 
for (int i = 0; i < datesHaveEvent.Count;i++) 
{ 
if (i == datesHaveEvent.Count - 1) 
{ 
json += "{\"time\":\"" + datesHaveEvent.ElementAt(i) + "\"}"; // 最后一項(xiàng) 
} 
else 
{ 
json += "{\"time\":\"" + datesHaveEvent.ElementAt(i) + "\"},"; // 
} 
} 
json += "]"; 
} 
%> 
<div id="datePicker"></div> 
<br /> 
當(dāng)前是第 <span style="color:Red; font-size:14px;"><%=ViewData["currentWeek"]%> </span> 周 
<br /> 
<%=DateTime.Now.ToShortDateString() %> 
<br /> 
<% 
foreach(var item in Model) 
{ 
%> 
<%=Html.Encode(item.Content) %> 
<% 
} 
%> 
<br /> 
<div id="otherEvent" style=" width:300px;"></div> 

javascript(腳本):
代碼

復(fù)制代碼代碼如下:

 
///服務(wù)器與客戶端當(dāng)前時(shí)間的轉(zhuǎn)換 
var a='<%= ViewData["currentDay"]%>'; 
var b = Date.parse(a); 
var serviceDate = new Date(b); 
var clientDate = new Date(); 
var yearOffset = serviceDate.getYear() - clientDate.getYear(); 
var monthOffset = serviceDate.getMonth() - clientDate.getMonth(); 
var dayOffset = serviceDate.getDate() - clientDate.getDate(); 
///獲取日期列表 
var jsn = eval('<%=json %>'); 
$(function() { 
var options = { 
prevText: "上一月", //跳轉(zhuǎn)到上一頁的提示文本 
nextText: '下一月', //跳轉(zhuǎn)到下一頁的提示文本 
minDate: -30, 
maxDate: 30, 
hideIfNoPrevNext: false, 
defaultDate: "+" + yearOffset + "y +" + monthOffset + "m +" + dayOffset + "d", 
beforeShowDay: DisplayDayHaveEvent, //顯示每個(gè)日期之前的操作 
onSelect: select // 選擇一個(gè)日期的回調(diào)函數(shù) 
}; 
function DisplayDayHaveEvent(date) { 
for (var i = 0; i < jsn.length; i++) { 
var cc = Date.parse(jsn[i].time); 
var time = new Date(cc); 
if (date.getMonth() == time.getMonth() && date.getDate() == time.getDate()) { 
return [true, ""] 
} 
} 
return [false, ""]; 
} 
function select(dateText, inst) { 
$('#otherEvent').load("http://chabaoo.cn/Calendar/EventDetail?date=" + dateText); 
return false; 
} 
//初始化日期控件 
$('#datePicker').datepicker(options); 
}) 