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(DateTime.Now.Year, DateTime.Now .월);
List ; 날짜=dateHaveEvent.Select(u=>u.ToString("MMM dd,yyyy HH:mm:ss", myDTFI)).ToList(); "datesHaveEvent"] = 날짜;
//오늘의 이벤트 가져오기
List 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(부분 보기):
코드

코드 복사 코드는 다음과 같습니다.

<%@ 제어 언어 ="C#" Inherits="System.Web.Mvc.ViewUserControl>"
<%string json = ""dateHaveEvent = ViewData["datesHaveEvent" ] as List<%
if (datesHaveEvent != null &&datesHaveEvent.Count > 0)
{
json = "["
(int i = 0; i {
if (i ==datesHaveEvent.Count - 1)
{
json = "{"time":"" datesHaveEvent.ElementAt(i) ""}"; // 마지막 항목
}
else
{
json = "{"time":""dateHaveEvent.ElementAt(i) ""}, "; //
}
}
json = "]";
}
%>

현재 페이지는 <%=ViewData["currentWeek"]%> 기간>


%=DateTime.Now.ToShortDateString() %>
항목)
{
%>
<%=Html.Encode(item.Content) %>
<%
}
%

자바스크립트(스크립트):
코드

코드 복사 코드는 다음과 같습니다. ///사이의 현재 시간 변환 서버 및 클라이언트

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.jb51.net/Calendar/EventDetail?date=" dateText)
return false ;
}
//날짜 제어 초기화
$('#datePicker').datepicker(options)
})