Home > Web Front-end > JS Tutorial > Use jquery to implement the school calendar (asp.net jquery ui 1.72)_jquery

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

WBOY
Release: 2016-05-16 18:37:32
Original
1476 people have browsed it

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);
})
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template