[Calendar Todolist] 캘린더 일정관리 만들기

안녕하세요.

 

과제가 있었어서 진행을 하다보니, 캘린더를 통해 관리하는 일정관리 페이지를 구현하는거였습니다. 긴말 없이 사용 스택부터 확인해보겠습니다.

---

사용 스택

 

React, Typescript, Recoil, Styled-components 

---

우선 자바스크립트로 캘린더를 만들어야 했습니다.

 

캘린더를 만드는 방식은 어렵지 않습니다. 워낙에 자바스크립트로 캘린더를 만드는 레퍼런스도 많고, 이것저것 개발하면서 대충 이런식으로 만들면 되겠구나 라는 생각을 했었기 때문입니다.

 

  const today = {
    year: new Date().getFullYear(), //오늘 연도
    month: new Date().getMonth() + 1, //오늘 월
    date: new Date().getDate(), //오늘 날짜
    day: new Date().getDay(), //오늘 요일
  };
  const week = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]; //일주일
  const [selectedYear, setSelectedYear] = useState(today.year); //현재 선택된 연도
  const [selectedMonth, setSelectedMonth] = useState(today.month); //현재 선택된 달
  const dateTotalCount = new Date(selectedYear, selectedMonth, 0).getDate(); //선택된 연도, 달의 마지막 날짜
  const [props, setProps] = useState({ // 선택한 날
    year: today.year,
    month: today.month,
    date: today.date,
    dateTime: '10:00'
  })

 

우선 오늘의 날짜를 먼저 파악하기 위해 today라는 변수, 달력을 표현하기 위한 선택한 연도, 달과 달력을 눌러 일정관리를 진행할 것이기 때문에 props라는 변수도 하나 생성을 해두었습니다.

 

// 달의 첫 날 1일이 무슨 요일인지 파악
const day = new Date(selectedYear, selectedMonth - 1, 1).getDay();

// 10월 기준으로 1일은 6번째, 즉 토요일인것을 알 수 있다.
// 10월 6일전까진 빈 태그 or 지난 달의 마지막 주를 넣어주면 된다.

// 달의 마지막 날이 며칠인지 파악
const dateTotalCount = new Date(selectedYear, selectedMonth, 0).getDate()

// day부터 dateTotalCount 수만큼 1일 2일 ... n일의 태그를 표현한다.

 

위의 형식으로 변화하는 년도, 달만 안다면 한달에 며칠이 있는지를 쉽게 파악할 수 있다. 그렇다면 해당 사이에 태그들로 채워 하나의 달력을 만들 수 있습니다.

 

달을 만든 후, 해당 달을 클릭 시 요일이 변경되게 구현할 수 있을 것입니다.