[React] 외부 라이브러리 없이 캘린더 구현

React만을 사용해서 캘린더를 구현하였습니다.

날짜 계산은 내장 모듈인 Date를 사용하여서 구현을 했습니다.

우선 프로젝트 구조는 다음과 같습니다.

구현한 기능

• 캘린더 화면
  • 최상단에 연도 및 월, 이동 버튼 표시
  • 7 x n(week) 형태의 격자로 표시
  • 캘린더 상단에 요일을 일월화수목금토 순서로 표시
  • 주말은 빨간색으로 표현
  • 이전, 다음달의 날짜는 흐리게 표현
• 월, 년도 이동 기능
  • 내장 함수 Date를 이용해서 버튼 클릭 시 증감 방식으로 구현
• 일정 입력
  • 해당 날짜 클릭 시 모달 창에서 일정, 일정 색상을 입력을 받고 해당하는 날짜의 칸에 일정 추가
• 색상 선택
  모달 창에서 원하는 일정의 백그라운드 색상 선택 가능
• 2일 이상의 일정
  • 모달 창에서 종료일 설정 체크박스 클릭시 종료일을 입력받는 방식으로 구현
  • YYYY.MM.DD 형식으로 입력하지 않으면 동작하지 않음.

실행 화면

개선점

• 2일 이상의 일정을 하나의 칸으로 들어가게끔 변경 예정

 

전체 소스코드는 깃허브에서 확인 가능합니다!

Github: https://github.com/hanhyung6376/Calendar