JavaScript Calendar - 주간 달력 만들기 (주간 달력 생성 함수 사용), Weekly Calendar

캘린더 UI에 주간 달력 기능을 추가하겠습니다.

기존 캘린더 파일을 오픈하여 수정합니다.

​

달력 뷰 버튼 그룹에 주간 달력으로 변경할 수 있게 버튼을 추가합니다.

<div class="calendar-views">
	<button type="button" class="calendar-view-year">연간</button>
	<button type="button" class="calendar-view-month">월간</button>
	<button type="button" class="calendar-view-week">주간</button>
</div>

 

calendar.css 파일에 주간의 style을 추가합니다.

/* calendar week */
.calendar.week table > tbody > tr > td { padding: 10px 10px; }
.calendar.week table > tbody > tr > td > span { padding: 10px 10px; }
.calendar.week table > tbody > tr > td > span.today { padding: 9px 9px; }

 

주간 달력 함수 추가합니다.

function calendarWeek(date) {
	$(".calendar").removeClass("month").removeClass("year");
	$(".calendar").addClass("week");
	// 년월
	$(".calendar-yearmonth").html(date.getFullYear() + "년 " + (date.getMonth() + 1) + "월");
	
	var options = {
		showDay : true,
		showFullDayName : true,
		showToday : true,
		arHoliday : hashmapTemporaryHoliday
	};
	
	var html = weekHTML(date, options);
	$("#calendar").attr("data-date", date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate());
	$("#calendar").html(html);
}

 

월간 달력 함수와 연간 달력 함수에서 removeClass() 메서드를 추가합니다.

function calendarMonth(date) {
	$(".calendar").removeClass("year").removeClass("week"); --> 추가
	$(".calendar").addClass("month");
	... (중간 생략)
}

function calendarYear(date) {
	$(".calendar").removeClass("month").removeClass("week"); --> 추가
	$(".calendar").addClass("year");
	... (중간 생략)
}

 

달력 뷰 버튼에 주간 달력에 대한 click 이벤트를 추가합니다.

// 달력 뷰 버튼
$(".calendar-views > button").on("click", function(event) {
	$(".calendar-views > button").each(function() {
		$(this).removeClass("active");
	});
	if ($(event.target).hasClass("calendar-view-year")) {
		calendarYear(new Date());
	} else if ($(event.target).hasClass("calendar-view-month")) {
		calendarMonth(new Date());
	} else if ($(event.target).hasClass("calendar-view-week")) {
		calendarWeek(new Date());
	}
	$(event.target).addClass("active");
});

 

 

 

달력 이동 버튼 클릭 이벤트 추가

​

이전 버튼과 다음 버튼, 오늘 버튼의 click 이벤트에 주간 달력을 추가합니다.

주간 달력의 이전 이동 버튼은 날짜를 기준으로 7일을 빼서 날짜를 생성하고, 다음 이동 버튼은 날짜를 기준으로 7일을 더해서 날짜 생성하여 처리하면 됩니다.

// 이전 이동 버튼
$(".calendar-controls > .calendar-prev").on("click", function() {
	if ($(".calendar").hasClass("year")) {
		var year = $("#calendar").attr("data-date");
		calendarYear(new Date(parseInt(year) - 1, 1, 1));
	} else if ($(".calendar").hasClass("month")) {
		var yearmonth = $("#calendar").attr("data-date").split("-");
		calendarMonth(new Date(parseInt(yearmonth[0]), parseInt(yearmonth[1]) - 2, 1));
	} else if ($(".calendar").hasClass("week")) {
		var yearmonthday = $("#calendar").attr("data-date").split("-");
		calendarWeek(new Date(parseInt(yearmonthday[0]), parseInt(yearmonthday[1]) - 1, parseInt(yearmonthday[2]) - 7));
	}
});

// 다음 이동 버튼
$(".calendar-controls > .calendar-next").on("click", function() {
	if ($(".calendar").hasClass("year")) {
		var year = $("#calendar").attr("data-date");
		calendarYear(new Date(parseInt(year) + 1, 1, 1));
	} else if ($(".calendar").hasClass("month")) {
		var yearmonth = $("#calendar").attr("data-date").split("-");
		calendarMonth(new Date(parseInt(yearmonth[0]), parseInt(yearmonth[1]), 1));
	} else if ($(".calendar").hasClass("week")) {
		var yearmonthday = $("#calendar").attr("data-date").split("-");
		calendarWeek(new Date(parseInt(yearmonthday[0]), parseInt(yearmonthday[1]) - 1, parseInt(yearmonthday[2]) + 7));
	}
});

// 오늘 이동 버튼
$(".calendar-controls > .calendar-today").on("click", function() {
	if ($(".calendar").hasClass("year")) {
		calendarYear(new Date());
	} else if ($(".calendar").hasClass("month")) {
		calendarMonth(new Date());
	} else if ($(".calendar").hasClass("week")) {
		calendarWeek(new Date());
	}
});

 

이전 이동 버튼을 클릭하면 이전 주로 이동합니다.

 

다음 이동 버튼을 클릭하면 다음 주로 이동합니다.

 

 

 

날짜 클릭 이벤트 추가

​

날짜 click 이벤트에 주간 달력을 추가합니다.

// 날짜 클릭
$(document).on("click", ".calendar table > tbody > tr > td", function(event) {
	event.stopPropagation();
	var eventTarget = event.target;
	while (eventTarget.tagName != "TD") {
		eventTarget = eventTarget.parentElement;
	}
	if ($(eventTarget).attr("data-date") != undefined) {
		alert($(eventTarget).attr("data-date"));
	}
});