웹 프로그래밍/React
[React] 외부 라이브러리 없이 캘린더 구현
터렛짓는다
2021. 10. 11. 21:57
React만을 사용해서 캘린더를 구현하였습니다.
날짜 계산은 내장 모듈인 Date를 사용하여서 구현을 했습니다.
우선 프로젝트 구조는 다음과 같습니다.
구현한 기능
- 캘린더 화면
- 최상단에 연도 및 월, 이동 버튼 표시
- 7 x n(week) 형태의 격자로 표시
- 캘린더 상단에 요일을 일월화수목금토 순서로 표시
- 주말은 빨간색으로 표현
- 이전, 다음달의 날짜는 흐리게 표현
- 월, 년도 이동 기능
- 내장 함수 Date를 이용해서 버튼 클릭 시 증감 방식으로 구현
- 일정 입력
- 해당 날짜 클릭 시 모달 창에서 일정, 일정 색상을 입력을 받고 해당하는 날짜의 칸에 일정 추가
- 색상 선택
모달 창에서 원하는 일정의 백그라운드 색상 선택 가능 - 2일 이상의 일정
- 모달 창에서 종료일 설정 체크박스 클릭시 종료일을 입력받는 방식으로 구현
- YYYY.MM.DD 형식으로 입력하지 않으면 동작하지 않음.
실행 화면
개선점
- 2일 이상의 일정을 하나의 칸으로 들어가게끔 변경 예정
전체 소스코드는 깃허브에서 확인 가능합니다!