jquery を使用して学校カレンダーを実装する (asp.net jquery ui 1.72)_jquery

スクリーンショット:

コントローラー コード:
コード

コードをコピー コードは次のとおりです。

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);
Listu.ToString("MMM dd,yyyy HH:mm:ss", myDTFI)).ToList(); "datesHaveEvent"] = 日付;
//その日のイベントを取得します
List deInfos = de.GetDE(DateTime.Now, new Guid("00000000-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 (部分ビュー):

コード

コードをコピー コードは次のとおりです:

<%@ 制御言語="C#" Inherits="System.Web.Mvc.ViewUserControl>"

<%string json = "" datesHaveEvent; ] as List;
<%
if (datesHaveEvent != null && dateHaveEvent.Count > 0)
{
json = "["; (int i = 0; i < dateHaveEvent.Count;i )
{
if (i == dateHaveEvent.Count - 1)
{
json = "{"time":"" dateHaveEvent.ElementAt(i) ""}"; // Last item
}
else
{
json = "{"time":"" dateHaveEvent.ElementAt(i) ""}, "; //
}
}
json = "]";
}
%>%>

現在のページは スパン> 週

%=DateTime.Now.ToShortDateString() %>
<%
モデル内のアイテム)
{
%>
<%=Html.Encode(item.Content) %>

}
%> >

javascript(スクリプト):
コード

コードをコピー


コードは次のとおりです:

///現在時刻の変換サーバーとクライアントvar a=''; 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(''); () {
var options = {
prevText: "Previous month" , //前のページにジャンプするプロンプトテキスト
nextText: 'Next month', //前のページにジャンプするプロンプトテキスト次のページ
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("http://www.jb51.net/Calendar/EventDetail?date=" dateText);
return false ;
}
//日付コントロールを初期化します
$('#datePicker').datepicker(options)