우리나라의 휴일이 있는 캘린더를 만드는 예제입니다. 설날과 추석 그리고 어린이 날 등 우리 나라 휴일을 넣어 보았어요.
1. HTML: 달력의 뼈대 만들기
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 캘린더</title>
<style>
/* CSS 스타일 코드 */
</style>
</head>
<body>
<div id="calendar">
<div class="calendar-header">
<button id="prevMonth">◀</button>
<span id="monthYear"></span>
<button id="nextMonth">▶</button>
</div>
<div class="calendar weekdays">
<div class="weekday sunday">일</div>
<div class="weekday">월</div>
<div class="weekday">화</div>
<div class="weekday">수</div>
<div class="weekday">목</div>
<div class="weekday saturday">토</div>
</div>
<div class="calendar days">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/moment@latest/min/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment-lunar"></script>
<script type="module">
/* 자바스크립트 코드 */
</script>
</body>
</html>
<div id="calendar">: 달력 전체를 감싸는 영역이에요.<div class="calendar-header">: ‘이전 달’, ‘현재 년월’, ‘다음 달’ 버튼이 들어가는 머리 부분이에요.<div class="calendar weekdays">: ‘일’, ‘월’, ‘화’, …, ‘토’ 요일이 표시되는 부분이에요.<div class="calendar days">: 날짜가 표시되는 부분으로, 자바스크립트를 이용해 동적으로 채워질 거예요.<script src="...">: ‘moment’와 ‘moment-lunar’ 라이브러리를 가져오는 코드예요. 이 라이브러리들은 날짜와 관련된 다양한 기능을 제공해 준답니다.<script type="module">: 자바스크립트 코드가 들어가는 부분이에요.
2. CSS: 달력 꾸미기
CSS
<style>
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
}
.weekday {
text-align: center;
border: 1px solid #333;
padding: 10px;
}
.day {
text-align: center;
border: 1px solid #ccc;
padding: 10px;
}
.prev-month, .next-month {
color: #aaa;
}
.sunday, .holiday {
color: red;
}
.saturday {
color: blue;
}
.dayName {
font-size: 9px;
}
</style>
.calendar: 달력을 격자(grid) 형태로 표시하고, 각 날짜 간 간격을 설정해요..weekday,.day: 요일과 날짜의 모양을 설정해요..prev-month,.next-month: 이전 달, 다음 달 날짜는 회색으로 표시해요..sunday,.holiday: 일요일과 공휴일은 빨간색으로 표시해요..saturday: 토요일은 파란색으로 표시해요..dayName: 공휴일의 이름은 작은 글씨로 표시해요.
3. 자바스크립트: 달력 기능 구현하기
JavaScript
<script type="module">
// ... (날짜 관련 함수 및 변수) ...
function renderCalendar() {
// ... (달력 생성 및 표시 코드) ...
}
// 이전 달, 다음 달 버튼 클릭 이벤트 처리
document.getElementById('prevMonth').addEventListener('click', () => {
// ... (이전 달로 이동) ...
renderCalendar();
});
document.getElementById('nextMonth').addEventListener('click', () => {
// ... (다음 달로 이동) ...
renderCalendar();
});
renderCalendar();
</script>
renderCalendar()함수: 현재 년월에 맞는 달력을 생성하고 화면에 표시하는 함수예요.- 공휴일 표시:
getHolidaysStatic(),getLunarHolidays()함수를 이용하여 공휴일을 계산하고 표시합니다. - 대체공휴일 표시: 대체공휴일 대상이면서, 해당일이 토일요일 이거나 타 공휴일과 중복(어린이날 부처님오신날)일 경우 표시합니다.
- 공휴일 표시:
- 이전 달, 다음 달 버튼 클릭 이벤트: 버튼을 클릭하면
renderMonth변수를 변경하고renderCalendar()함수를 다시 호출하여 달력을 업데이트해요.
4. 핵심 개념
Date객체: 날짜와 시간을 다루는 자바스크립트 내장 객체예요.moment.js라이브러리: 날짜와 시간을 더 쉽고 다양하게 다룰 수 있게 해주는 외부 라이브러리예요.- DOM (Document Object Model): HTML 문서를 자바스크립트에서 다루기 위한 모델이에요.
- 이벤트 처리: 버튼 클릭과 같은 사용자 동작에 반응하는 코드예요.
5. 추가 학습
- CSS 스타일 더 꾸미기: 다양한 CSS 속성을 사용하여 달력을 더 예쁘게 꾸밀 수 있어요.
- 달력에 일정 추가하기: 사용자가 달력에 일정을 추가하고 관리하는 기능을 구현해 보세요.
- 다른 라이브러리 사용해 보기:
FullCalendar,react-datepicker등 다양한 달력 관련 라이브러리가 있어요.
이제 여러분도 나만의 달력을 만들 수 있답니다!
답글 남기기