Date( ) 생성자로 달력만들기

Date() 생성자 - JavaScript | MDN

지난번, 라이브러리 없이 자바스크립트만 활용해서 달력을 만들어본 적이 있다.

그 때 활용했던 자바스크립트의 Date() 생성자를 기록해보려 한다.

 //달력을 만들어보자
  const week = ["일", "월", "화", "수", "목", "금", "토"];
  const today = new Date();
  const viewYear = today.getFullYear(); //년도
  const viewMonth = today.getMonth() + 1; //오늘 월
  const viewday = today.getDate(); //오늘 일
  const [month, setMonth] = useState(Number(viewMonth)); //오늘 월을 찾기위해서
  const [year, setYear] = useState(Number(viewYear));
  const prevLast = new Date(viewYear, month - 1, 0); //month의 마지막 날짜
  const PLDate = prevLast.getDate(); //month의 마지막 일
  const thisLast = new Date(viewYear, month, 0); //이번 달 마지막 Date
  const TLDate = thisLast.getDate(); //이번달 마지막 일
  const PLDay = prevLast.getDay(); //지난달 마지막 요일
  const TLDay = thisLast.getDay(); //이번달 마지막 요일

 

나는 맥북에 있는 기본 달력의 기능과 화면을 그대로 구현하고자 했고, 공휴일과 명절의 표시는 생략했다.

이 화면을 그대로 구현하기 위해서는 아래와 같은 기능들이 필요하다.

1. 년도와 월 
2. 지난 날짜와 미래의 날짜는 흐리게
3. 오늘의 경우 빨갛게 표시하기
4. 지난달과 다음달로 이동
5. 오늘 버튼 클릭 시 오늘의 날짜로이동

 

필요한 코드는 아래와 같다.

// Dates 기본 배열들
  const prevDates = [];
  const thisDates = [...Array(TLDate + 1).keys()].slice(1);
  const nextDates = [];

  // 이번달 달력에 보이는 이전 달 날짜들
  if (PLDay !== 6) {
    for (let i = 0; i < PLDay + 1; i++) {
      prevDates.unshift(PLDate - i);
    }
  }
  // 이번달 달력에 보이는 다음달 날짜들
  for (let i = 1; i < 7 - TLDay; i++) {
    nextDates.push(i);
  }
  // 이번 달 달력에 보이는 날짜들
  const dates = prevDates.concat(thisDates, nextDates);
  //달력에서 이번달 날짜만 진하게 하기 위한 로직
  const firstDateIndex = dates.indexOf(1); //이번달 1일의 인덱스값
  const lastDateIndex = dates.lastIndexOf(TLDate); //이번달의 마지막 날 인덱스값

  const minusMonth = () => {
    if (month <= 1) {
      setMonth(12);
      setYear(Number(year - 1));
    } else {
      setMonth(Number(month - 1));
    }
  };
  const plusMonth = () => {
    if (month >= 12) {
      setMonth(1);
      setYear(Number(year + 1));
    } else {
      setMonth(Number(month + 1));
    }
  };
  const clickToday = () => {
    setMonth(viewMonth);
    setYear(viewYear);
  };