Todo Calender 만들기

기본적인 Todo의 CRUD를 완성하고 난뒤, calender의 날짜를 클릭하면 해당하는 todoList만 보여주는 기능을 만들고 싶었다.
Date의 함수를 이용하여 진행했다.
date 함수는 todo에도 필요하고 calender에도 필요하기 때문에 date.js 파일을 따로 만들어 ES6문법을 사용하여 연결했다. html 파일에서 script를 연결해줄때 type을 module로 해주면 ES6오류가 생기지 않는다!

ES6문법 참고
https://www.daleseo.com/js-module-import/

<index.html>
    <script src="./js/app.js"></script>
    <script type="module" src="./modules/calender.js"></script>
    <script type="module" src="./modules/todo.js"></script>
    <script type="module" src="./modules/date.js"></script>

<date.js파일>
export let date = new Date(); 
export const year = date.getFullYear(); // 연도(네 자릿수)를 반환합니다.
export const month = date.getMonth(); // 월을 반환합니다(0 이상 11 이하).
export const day = date.getDate(); // 일을 반환합니다(1 이상 31 이하).

//day는 요일, 0~6을 반환

<calender.js>
import { date, year, month, day } from "./date.js";

본격적으로 달력을 만들어보도록 하자!
달력은 현재 달의 날짜, 지난달의 날짜, 다음달의 날짜가 필요하다.

const yearMonth = document.querySelector(".yearMonth");
const days = document.getElementById("days");

// 현재 년도와 날짜 , 월은 0부터 시작하기 때문에 +1 해주기
  yearMonth.innerText = `${date.getFullYear()}년 ${date.getMonth() + 1}월`;

  // 이전달 마지막 날
  const startDay = new Date(date.getFullYear(), date.getMonth(), 0);
  console.log("startDay", startDay); // Thu Jun 30
  const prevDate = startDay.getDate();
  console.log("prevDate", prevDate); // 30 , 이전달의 마지막 날짜
  const prevDay = startDay.getDay();
  console.log("prevDay", prevDay); // 목요일 , 4 , 이전달의 마지막 요일

  // 다음달 마지막 날
  const endDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
  console.log("endDay", endDay); // Sun Jul 31
  const nextDate = endDay.getDate();
  console.log("nextDate", nextDate); // 31
  const nextDay = endDay.getDay();
  console.log("nextDay", nextDay); // 월요일 , 0

이전달의 마지막날, 이전달의 마지막요일을 이용하여 달력의 회색부분을 나타내준다.

이전달과 다음달의 값을 알아냈으면, 그 값들을 만들어 놓은 date 배열에 추가해준다.

// 이전달의 마지막날짜 : 30 - 이전달의 마지막요일 : 4 를 계산하면 26일부터 시작하는 지난달이 완성된다.
  for (let i = prevDate - prevDay; i <= prevDate; i++) {
    dates.push(i);
  }

  for (let i = 1; i <= nextDate; i++) {
    dates.push(i);
  }

// 6 - nextDay 으로 한 이유는 나는 일요일부터 시작할 것이기 때문에 일요일부터 시작해서 나머지 일수를 채우기 위하여 마지막 일요일을 지나 채워지도록 설정했다.
  for (let i = 1; i <= 6 - nextDay; i++) {
    dates.push(i);
  }

이렇게 만들어놓은 date의 배열을 이용하여 달력을 만들어주자 이전달, 다음달, 현재달을 분리해주기 위해서 지난달과 다음달은 class에 other를 추가했다.

이전달,다음달 그리고 현재 달을 나누는 중요한 부분

나는 달력을 만들면서 이 부분이 가장 어려웠다...
이번달을 기준으로 나는 1) 배열의 0번째부터 4번째까지 그리고 2) 배열의 35번째 배열부터 마지막배열까지 이렇게 두가지를 other로 나눌것이다.
그래서 1) i <= prevDay(4) 2) nextDate(31) + prevDay (4) < i 로 표현했다.

그리고 today를 표현하기 위하여 각 날짜에 id를 추가하여 보여주기로 하였다. id는 중복될 수 없는 값이기 때문에 other로 분리했다.

  dates.forEach((day, i) => {
    if (i <= prevDay || nextDate + prevDay < i) {
      days.innerHTML += `<div class="day date other" id=other${day}><span>${day}<span></div>`;
    } else {
      days.innerHTML += `<div class="day date" id=${day}><span>${day}<span></div>`;
    }
  });

달력이 다 만들어지고 이제 현재 날짜와 일치하는 날을 표시해주면! 달력은 완료!!!
현재 날짜를 표시해주기 위하여 id를 이용하여 day를 찾아 class에 today 값을 추가해주었다.

  if (year == date.getFullYear() && month == date.getMonth()) {
    const thisDay = document.getElementById(day);
    console.log("thisDay", thisDay);
    thisDay.classList.add("today");
  }

그리고 다음달과 이전달로 넘어가는 기능 추가하기,date.setMonth 함수를 이용 =>
현재 설정된 연도에 따라 지정된 날짜의 월을 설정
해당 month에 맞는 값이 나오면 해당 날짜가 보여줄 수 있도록 다시 renderCalender() 함수로 이동한다.

  const nextButton = document.querySelector(".next_month");
  nextButton.addEventListener("click", nextMonth);

  const prevButton = document.querySelector(".prev_month");
  prevButton.addEventListener("click", prevMonth);

// next 누르면 데이터 보여주기
function nextMonth() {
  date.setMonth(date.getMonth() + 1);
  renderCalender();
}

// prev 누르면 데이터 보여주기
function prevMonth() {
  date.setMonth(date.getMonth() - 1);
  renderCalender();
}

이렇게 달력을 구현하는 것은 완료됐다..
라이브러리로 가져와서 사용해보다 js를 이해해본다고 달력을 만들어보자니 너무 어려웠던 부분이 많았다 ㅠㅠㅠ 사실 이게 큰 관련은 없는데 욕심이 생겨서 ㅎㅎㅎㅎㅎㅎ
여튼 여기까지 todo와 달력은 따로 기능 구현을 했고,
다음 포스트는 todo와 달력을 연결해서 날짜에 맞는 list를 보여줄 수 있도록 구현하도록 하겠다!