用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);


    })

 

 

 

转载于:https://www.cnblogs.com/pkurain/archive/2009/12/29/1635044.html