📅 캘린더 만들기

MOZI에는 Upcoming이라는 탭이 존재합니다. 이 탭에서는 다가오는 할 일을 볼 수 있고 할 일을 등록할 수 있습니다.

이 글은 위 화면과 같이 달력을 만들어보면서 겪은 경험을 기록한 글입니다.

캘린더를 만든다고 하니 목민주 멘토님이 영상을 한개 추천해주셔서 봤습니다. 영상을 보니 날짜를 Date 객체로 직접 다루는 것은 헷갈릴만한 부분이 많았습니다.

JavaScript에서 날짜를 다루는 것은 까다롭기 때문에 moment, dayjs, date-fns와 같은 라이브러리를 사용하곤 합니다. 저는 처음부터 라이브러리를 사용하고 싶지는 않았습니다.(Date 객체를 많이 다루어보지 않았기 때문에 Date 객체를 다루어 보고 싶었음 + React 없이 vanilla로 캘린더 개발)

저는 mozi-calendar라는 레포를 만들고 Date 객체를 사용해서 캘린더를 만드는 것을 연습해보기로 합니다. 저는 일단 코드를 쳐보고 이해가 안가면 검색해서 문서를 보고 이해하는 방식을 좋아하기 때문에 먼저 Date 객체를 마음대로 다루어봤습니다.

const date = new Date() // Tue Oct 04 2022 02:26:17 GMT+0900 (한국 표준시)

먼저 new Date()를 콘솔에 찍어보니 위와 같이 나왔습니다. 뭔가 오늘 날짜와 시간이 나오는 것 같습니다. 일단 달력에 오늘의 년도, 월, 일을 표시해야하므로 date에서부터 가져와보겠습니다.

date.getFullYear() // 2022
date.getMonth() // 9
date.getDate() // 4

이렇게 년, 월, 일을 가져와봤습니다. 재밌는 점은 년하고 일은 괜찮은데 월은 인덱스가 0부터 시작한다고 합니다. 0은 1월, 1은 2월 ... 그러니까 9는 10월입니다. 오늘이 2022년 10월 4일이므로 맞습니다.

그럼 이제 조금 나아가서 이번 달의 첫째 날과 마지막 날을 알아보겠습니다.

new Date(year, month, 1) // 달의 첫날: Sat Oct 01 2022 00:00:00 GMT+0900 (한국 표준시)
new Date(year, month + 1, 0) // 달의 마지막 날: Mon Oct 31 2022 00:00:00 GMT+0900 (한국 표준시)

지금까지의 내용으로 달력의 윗부분인 Navigator부분에 현재 년도와 월을 표할 수 있습니다.

const getNavigatorHTML = (today: Date) => {
  return html`
    <button class="move-month-button">
      ← ${MONTHS[today.getMonth() == 0 ? 11 : today.getMonth() - 1]} ${today.getMonth() <=
      0
        ? today.getFullYear() - 1
        : today.getFullYear()}
    </button>
    <h1 class="month-display">
      ${MONTHS[today.getMonth()]}<br />${today.getFullYear()}
    </h1>
    <button class="move-month-button">
      ${MONTHS[today.getMonth() == 11 ? 0 : today.getMonth() + 1]} ${today.getMonth() >=
      11
        ? today.getFullYear() + 1
        : today.getFullYear()} →
    </button>
  `
}

이렇게 네비게이션을 만들어준 후에 전달과 다음달로 이동할 때 네비게이션과 캘린더 부분을 다시 렌더링 하면 달력이 완성됩니다.

const previousMonthButtonDidPress = () => {
  displayDate.setMonth(displayDate.getMonth() - 1)

  renderNavigator(document.getElementById("navigator"), displayDate)
  renderCalendar(document.getElementById("calendar"), displayDate)
}

이제 네비게이션 부분을 완성했으니 캘린더부분으로 가보겠습니다. 캘린더의 최상단에는 일~월 날짜가 표시되어있습니다.

for (let d = 0; d < NUMBER_OF_DAYS_IN_WEEK; d++) {
  calendarContents.push(
    html`
      <div class="${NAME_OF_DAYS[d]} calendar-cell">
        ${LONG_NAME_OF_DAYS[d]}
      </div>
    `
  )
}

코드로 표현하면 일~월을 캘린더 컨텐츠 배열에 푸쉬해주면 됩니다. 그 다음 실제 캘린더를 렌더링할 건데 보여지는 부분은 3가지입니다. 이전달, 현재달, 다음달 따라서 3번의 for문에서 calendar 각각의 달을 찍는 로직을 작성해보면 다음과 같습니다.

for (
  let d = 0;
  d <
  (thisMonthFirstDate.getDay() > 0
    ? thisMonthFirstDate.getDay()
    : NUMBER_OF_DAYS_IN_WEEK);
  d++
) {
  calendarContents.push(
    html`<div
      class="
          ${d % 7 === 0 ? "sun" : ""}
          ${d % 7 === 6 ? "sat" : ""}
          calendar-cell
          past-month
        "
    >
      ${lastMonthLastDate.getMonth() + 1}/${lastMonthLastDate.getDate() -
      thisMonthFirstDate.getDay() +
      d +
      1 -
      (thisMonthFirstDate.getDay() > 0 ? 0 : NUMBER_OF_DAYS_IN_WEEK)}
    </div>`
  )
}

for (let d = 0; d < thisMonthLastDate.getDate(); d++) {
  calendarContents.push(
    html`<div
      class="
          ${today.getDate() === d + 1 &&
      ACTUAL_TODAY.getFullYear() === today.getFullYear() &&
      ACTUAL_TODAY.getDate() === today.getDate() &&
      ACTUAL_TODAY.getMonth() === today.getMonth()
        ? "today"
        : ""}
          ${(thisMonthFirstDate.getDay() + d) % 7 === 0 ? "sun" : ""}
          ${(thisMonthFirstDate.getDay() + d) % 7 === 6 ? "sat" : ""}
          calendar-cell
          this-month
        "
    >
      ${today.getMonth() + 1}/${d + 1} ${today.getDate() === d + 1 &&
      ACTUAL_TODAY.getFullYear() === today.getFullYear() &&
      ACTUAL_TODAY.getDate() === today.getDate() &&
      ACTUAL_TODAY.getMonth() === today.getMonth()
        ? " today"
        : ""}
    </div>`
  )
}

let nextMonthDaysToRender = 7 - (calendarContents.length % 7)

for (let d = 0; d < nextMonthDaysToRender; d++) {
  calendarContents.push(
    html`<div
      class="
          ${(nextMonthFirstDate.getDay() + d) % 7 === 0 ? "sun" : ""}
          ${(nextMonthFirstDate.getDay() + d) % 7 === 6 ? "sat" : ""}
          calendar-cell
          next-month
        "
    >
      ${nextMonthFirstDate.getMonth() + 1}/${d + 1}
    </div>`
  )
}

이제 캘린더를 렌더링했으니 스타일링만 입혀주면 애플리케이션이 완성됩니다. Vanilla, TypeScript, React 총 세가지 버전으로 만들어서 연습을 했습니다.

배포 링크

• JavaScript
• TypeScript
• React