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

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

WBOY

リリース： 2016-05-16 18:37:32

オリジナル

1477 人が閲覧しました

スクリーンショット:

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

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

 
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) 