캘린더 만들기

TODO

 

• 오늘의 현재 요일 표기
• 오늘의 현재 날짜 표기
• 오늘의 현재 월 표기
• 오늘의 현재 연도 표기
• 일, 월, 화, 수, 목, 금, 토 요일 라벨링 표기
• 현재 월의 1일이 무슨 요일인지 판별하고, 해당 요일 라벨링에 1일 표기하기
• 현재 월의 마지막 날짜까지 달력에 표기하기
• 우측 화살표를 클릭 했을때, 다음 달의 요일 및 날짜 표기
• 좌측 화살표를 클릭 했을때, 이전 달의 요일 및 날짜 표기
• 특정 날짜를 클릭 했을때, 상단의 요일 및 날짜 반영하기

1. 오늘의 종합적인 날짜를 구하려면 new Date 오브젝트를 활용.
2. 개발자 도구의 콘솔을 확인해보니 Day와 Month는 숫자로 되어있음.
   -> 숫자에 대응하는 문자열로 변환하기 위해 Day, Month에 대한 배열을 생성
3. Day 배열과 반복문으로 라벨링 표기
   ->DOM 활용 span 생성하여 appendChild로 월~일을 포함하는 클래스(calDay)에 상속시키기
4. 반복문 활용하여 각 일마다 span을 생성 후 calDate에 appendChild로 상속
5. Date 오브젝트를 활용하여 당월의 첫 째날 날짜를 생성 후 요일 추출
   첫째 날에 해당되는 요일의 정수 값만큼 calDate 맨 앞에 공백의 span 생성하여 상속
6. 화살표에 Click event 생성하여 month와 year를 계산
   month%2의 결과에 따라 31일, 30일, 28일로 span을 생성하여 배치
   날짜를 생성할 때 현재 날짜와 동일한 값일 경우 classList.add를 활용하여 빨간 글씨로 표현되게 css 클래스를 추가
7. (특정 날짜 클릭 시 상단에 반영)Click event 생성 후 클릭 시 이벤트 타깃의 textContent를 추출하여 새로운 Date 오브젝트 생성.
   오브젝트로부터 날짜를 추출하여 상단에 표시