用jquery实现学校的校历

 

学校日历有以下几个特点：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<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;

            //获取当日事件
            List<BL.CDateEvent> 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<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) + "\"}";   // 最后一项
                    }
                    else
                    {
                        json += "{\"time\":\"" + datesHaveEvent.ElementAt(i) + "\"},";   //
                    }
                   
                }
                json += "]";
            }
%>





<div id="datePicker"></div>

<br />

当前是第 <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(脚本):

 

 

///服务器与客户端当前时间的转换
    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 < 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.cnblogs.com/Calendar/EventDetail?date=" + dateText);
            

            return false;
        }

        //初始化日期控件
        $('#datePicker').datepicker(options);


    })