用jquery实现学校的校历(asp.net+jquery ui 1.72)

学校日历有以下几个特点：1显示本周是本学期的第几周；2显示今日事件；3特殊显示有事件的日期，点击该日期显示本日事件。

截图:

controller代码：
代码

 
public ActionResult CalendarDisplay() 
{ 
BL.DateEventBL de = new BL.DateEventBL(); 
//获取当日日期,使用能被javascript转换成日期的格式 
DateTimeFormatInfo myDTFI = new CultureInfo("en-US", false).DateTimeFormat; 
string utcTime = DateTime.Now.ToString("MMM dd,yyyy HH:mm:ss", myDTFI); 
ViewData["currentDay"] = utcTime; 
//获取当月有事件的日期 
List dateHaveEvent = de.GetTimeHaveEvent(DateTime.Now.Year, DateTime.Now.Month); 
List dates=dateHaveEvent.Select(u=>u.ToString("MMM dd,yyyy HH:mm:ss", myDTFI)).ToList(); 
ViewData["datesHaveEvent"] = dates; 
//获取当日事件 
List deInfos = de.GetDE(DateTime.Now, new Guid("00000000-0000-0000-0000-000000000001")); 
//获取当前周 
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(局部视图)：
代码

复制代码代码如下:

 
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl>" %> 
<%string json = ""; List datesHaveEvent = ViewData["datesHaveEvent"] as List; %> 
<% 
if (datesHaveEvent != null && datesHaveEvent.Count > 0) 
{ 
json = "["; 
for (int i = 0; i { 
if (i == datesHaveEvent.Count - 1) 
{ 
json += "{\"time\":\"" + datesHaveEvent.ElementAt(i) + "\"}"; // 最后一项 
} 
else 
{ 
json += "{\"time\":\"" + datesHaveEvent.ElementAt(i) + "\"},"; // 
} 
} 
json += "]"; 
} 
%> 



当前是第 <%=ViewData["currentWeek"]%> 周 


<%=DateTime.Now.ToShortDateString() %>


<% 
foreach(var item in Model) 
{ 
%> 
<%=Html.Encode(item.Content) %>
<% 
} 
%> 

javascript(脚本):
代码

复制代码代码如下:

 
///服务器与客户端当前时间的转换 
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: "上一月", //跳转到上一页的提示文本 
nextText: '下一月', //跳转到下一页的提示文本 
minDate: -30, 
maxDate: 30, 
hideIfNoPrevNext: false, 
defaultDate: "+" + yearOffset + "y +" + monthOffset + "m +" + dayOffset + "d", 
beforeShowDay: DisplayDayHaveEvent, //显示每个日期之前的操作 
onSelect: select // 选择一个日期的回调函数 
}; 
function DisplayDayHaveEvent(date) { 
for (var i = 0; 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("https://www.0133.cn/Calendar/EventDetail?date=" + dateText); 
return false; 
} 
//初始化日期控件 
$('#datePicker').datepicker(options); 
}) 