Use jquery to implement the school calendar (asp.net jquery ui 1.72)_jquery

Screenshot:

Controller code:
Code

Copy code The code is as follows:

public ActionResult CalendarDisplay()
{
BL.DateEventBL de = new BL.DateEventBL();
//Get the current date, using a format that can be converted into a date by javascript
DateTimeFormatInfo myDTFI = new CultureInfo("en-US", false).DateTimeFormat;
string utcTime = DateTime.Now.ToString("MMM dd,yyyy HH:mm:ss", myDTFI);
ViewData[ "currentDay"] = utcTime;
//Get the dates with events in the current month
List dateHaveEvent = de.GetTimeHaveEvent(DateTime.Now.Year, DateTime.Now.Month);
Listu.ToString("MMM dd,yyyy HH:mm:ss", myDTFI)).ToList();
ViewData["datesHaveEvent"] = dates;
//Get the events of the day
List deInfos = de.GetDE(DateTime.Now, new Guid("00000000-0000-0000-0000-000000000001"));
//Get the current week
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 (partial view):
Code

Copy code The code is as follows:

<%@ 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 < datesHaveEvent.Count;i )
{
if (i == datesHaveEvent.Count - 1)
{
json = "{"time":"" datesHaveEvent.ElementAt(i) ""}"; // Last item
}
else
{
json = "{"time":"" datesHaveEvent.ElementAt(i) ""},"; //
}
}
json = "]";
}
%>

The current page is < span style="color:Red; font-size:14px;"><%=ViewData["currentWeek"]%> Week


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


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

javascript(script):
Code

Copy Code The code is as follows:

///Conversion of current time between server and client
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();
// /Get date list
var jsn = eval('<%=json %>');
$(function() {
var options = {
prevText: "Previous month" , //The prompt text to jump to the previous page
nextText: 'Next month', //The prompt text to jump to the next page
minDate: -30,
maxDate: 30,
hideIfNoPrevNext: false,
defaultDate: " " yearOffset "y " monthOffset "m " dayOffset "d",
beforeShowDay: DisplayDayHaveEvent, //Display operations before each date
onSelect: select // Select a date callback function
};
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://www.jb51.net/Calendar/EventDetail?date=" dateText);
return false;
}
//Initialize the date control
$('#datePicker').datepicker(options);
})