[자바스크립트] 달력 만들기 예제

HTML, CSS, 그리고 JavaScript를 이용하여 달력을 구현하는 방법에 대해 설명해드리겠습니다.

 

 

1. HTML과 CSS를 이용한 달력 구현

HTML과 CSS를 이용하여 달력을 구현하려면 다음과 같은 단계를 거칩니다.

1. HTML로 기본적인 달력 틀을 만듭니다.
2. CSS를 이용하여 달력의 스타일을 지정합니다.
3. JavaScript로 오늘 날짜 기준으로 달력을 채웁니다.

 

1) HTML로 달력 틀 만들기

 

<div class="calendar">
  <div class="month">
    <h1>2023년 3월</h1>
  </div>
  <div class="weekdays">
    <div>일</div>
    <div>월</div>
    <div>화</div>
    <div>수</div>
    <div>목</div>
    <div>금</div>
    <div>토</div>
  </div>
  <div class="days">
    <div class="blank"></div>
    <div class="blank"></div>
    <div class="day">1</div>
    <div class="day">2</div>
    <div class="day">3</div>
    <div class="day">4</div>
    <div class="day">5</div>
    <div class="day">6</div>
    <div class="day">7</div>
    <div class="day">8</div>
    <div class="day">9</div>
    <div class="day">10</div>
    <div class="day">11</div>
    <div class="day">12</div>
    <div class="day">13</div>
    <div class="day">14</div>
    <div class="day">15</div>
    <div class="day">16</div>
    <div class="day">17</div>
    <div class="day">18</div>
    <div class="day">19</div>
    <div class="day">20</div>
    <div class="day">21</div>
    <div class="day">22</div>
    <div class="day">23</div>
    <div class="day">24</div>
    <div class="day">25</div>
    <div class="day">26</div>
    <div class="day">27</div>
    <div class="day">28</div>
    <div class="day">29</div>
    <div class="day">30</div>
    <div class="day">31</div>
    <div class="blank"></div>
    <div class="blank"></div>
    <div class="blank"></div>
  </div>
</div>

위의 코드에서는 div 태그를 이용하여 달력을 구성했습니다. 달력의 가장 바깥쪽에 있는 div 태그에는 calendar 클래스를 지정하였습니다. 그리고 그 하위에는 month, weekdays, 그리고 days라는 클래스를 가진 div 태그가 있습니다.

month 클래스는 해당 달의 이름과 년도를 표시하기 위한 div 태그입니다. weekdays 클래스는 요일을 표시하기 위한 div 태그들을 포함하고 있으며, days 클래스는 해당 달의 날짜를 표시하기 위한 div 태그들을 포함하고 있습니다.

days 클래스 내부의 div 태그들 중에서는 날짜를 표시하기 위한 day 클래스와 공백을 표시하기 위한 blank 클래스를 가진 div 태그들이 있습니다.

2. CSS를 이용한 달력 스타일링

 

.calendar {
  font-family: Arial, sans-serif;
  width: 300px;
  margin: 0 auto;
}

.month {
  background-color: #eee;
  text-align: center;
  padding: 10px;
}

.weekdays {
  display: flex;
  justify-content: space-between;
  background-color: #ccc;
  padding: 5px;
}

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 40px;
  gap: 5px;
}

.day {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 5px;
  text-align: center;
  font-size: 16px;
}

.blank {
  background-color: #eee;
}

위의 CSS 코드에서는 각 요소들에 대한 스타일을 지정하였습니다. calendar 클래스는 달력 전체에 대한 스타일을 지정합니다. month 클래스는 해당 달의 이름과 년도를 표시하는 부분의 스타일을 지정합니다. weekdays 클래스는 요일을 표시하는 부분의 스타일을 지정합니다.

days 클래스는 날짜를 표시하는 부분의 스타일을 지정합니다. 이 부분에서는 display: grid를 이용하여 그리드 레이아웃을 만들었습니다. grid-template-columns 속성을 이용하여 7개의 열을 생성하였으며, grid-auto-rows 속성을 이용하여 각 행의 높이를 40px로 설정하였습니다. gap 속성을 이용하여 각 day 클래스와 blank 클래스 사이에 간격을 5px로 지정하였습니다.

day 클래스는 각 날짜의 스타일을 지정합니다. background-color 속성을 이용하여 배경색을 흰색으로, border 속성을 이용하여 테두리를 회색으로 지정하였으며, padding 속성을 이용하여 안쪽 여백을 5px로 지정하였습니다. text-align 속성을 이용하여 텍스트를 가운데 정렬하였으며, font-size 속성을 이용하여 폰트 크기를 16px로 지정하였습니다.

blank 클래스는 공백을 표시하는 부분의 스타일을 지정합니다. 이 클래스는 background-color 속성을 이용하여 배경색을 회색으로 지정하였으며, day 클래스와 마찬가지로 padding 속성을 이용하여 안쪽 여백을 5px로 지정하였습니다.

3. JavaScript를 이용한 달력 구현

 

function createCalendar(month, year) {
  const calendar = document.querySelector('.calendar');
  const monthName = document.querySelector('.month-name');
  const weekdays = document.querySelector('.weekdays');
  const days = document.querySelector('.days');

  const firstDayOfMonth = new Date(year, month, 1);
  const lastDayOfMonth = new Date(year, month + 1, 0);
  const firstDayOfWeek = firstDayOfMonth.getDay();
  const lastDateOfMonth = lastDayOfMonth.getDate();

  monthName.innerHTML = `${monthNames[month]} ${year}`;

  for (let i = 0; i < daysOfWeek.length; i++) {
    const weekday = document.createElement('div');
    weekday.innerHTML = daysOfWeek[i];
    weekdays.appendChild(weekday);
  }

  for (let i = 0; i < firstDayOfWeek; i++) {
    const blank = document.createElement('div');
    blank.classList.add('blank');
    days.appendChild(blank);
  }

  for (let i = 1; i <= lastDateOfMonth; i++) {
    const day = document.createElement('div');
    day.innerHTML = i;
    day.classList.add('day');
    days.appendChild(day);
  }

  const blanks = document.querySelectorAll('.blank');
  if (blanks.length === 7) {
    blanks.forEach(blank => blank.style.display = 'none');
  }
}

const monthNames = [
  'January', 'February', 'March', 'April', 'May', 'June', 
  'July', 'August', 'September', 'October', 'November', 'December'
];
const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

const today = new Date();
const currentMonth = today.getMonth();
const currentYear = today.getFullYear();

createCalendar(currentMonth, currentYear);

위의 JavaScript 코드는 createCalendar 함수를 정의하고, 이 함수를 호출하여 현재 달력을 생성합니다.

createCalendar 함수는 month와 year를 매개변수로 받아서 해당하는 달력을 생성합니다. querySelector 메소드를 이용하여 각각의 요소들을 선택하고, new Date를 이용하여 첫째 날과 마지막 날을 계산합니다. getDay 메소드를 이용하여 첫째 날의 요일을 계산하고, getDate 메소드를 이용하여 마지막 날의 날짜를 계산합니다.

monthName 요소에는 ${monthNames[month]} ${year} 형식의 문자열을 삽입하여 해당하는 달과 년도를 표시합니다. weekdays 요소에는 각 요일을 표시하는 div 태그들을 생성하여 삽입합니다.

days 요소에는 빈 칸과 날짜를 표시하는 div 태그들을 생성하여 삽입합니다. 첫째 날의 요일이 일요일이 아닌 경우에는, 첫째 날 이전의 날짜들을 빈 칸으로 채워넣습니다. 빈 칸은 blank 클래스를 가지는 div 태그로 구현됩니다.

마지막으로, 날짜를 표시하는 div 태그를 생성하여 해당 달의 마지막 날짜까지 삽입합니다. 각각의 날짜는 day 클래스를 가지는 div 태그로 구현됩니다.

마지막으로, 빈 칸이 7일(즉, 한 주의 모든 칸이 빈 칸인 경우)인 경우에는 해당 빈 칸들을 숨깁니다.

 

4. 결과

 

위의 JavaScript 코드를 실행하면, HTML과 CSS로 구현한 달력이 생성됩니다. 이제 이 달력에 다양한 기능을 추가할 수 있습니다. 예를 들어, 이전 달과 다음 달로 이동하는 버튼을 추가하거나, 특정 날짜를 클릭하면 해당 날짜의 일정을 표시하는 기능을 추가할 수 있습니다.