JS 상호작용되는 달력 만들기 (1) - 시작하며

제작이유

 프로젝트도중 예약관련 기능을 담당하게 되었습니다.

사용자가 쉽게 예약을 하려면 달력이 필수라고 생각하였구요,

달력이 쓰이는 부분도 많아 여러 버전의 달력을 만들게 되었습니다.

 

개발환경

 IDE : Eclipes

 사용언어 : Java Script, HTML5

 

구현 결과

1. 장소검색시 날짜검색 달력

2. 예약페이지에서의 달력

3. 예약확인 페이지의 달력

 

주요기능

1. 공통

• 알맞은 달력 출력
• 전달, 다다음달 이동 불가능 (예약가능일자 : 오늘기준 다음날~+30일 이후)
• 요일 선택시 해당 일자 표시

2. 예약자측 달력

• 대여 불가능 일자 비활성화
  • 대여자가 입력한 요일
  • 예약이 가득찬 날
  • 오늘기준으로 내일~30일이 아닌 모든 날자
• 클릭시 시간표 출력
• 시간표에 예약불가능한 시간 비활성화
• 선택한 일자와 시간을 계산해 결제정보 출력

3. 대여자측 달력

• 예약이 존재하는 일자 표시
• 시간표에도 예약이 된 일자 표시
• 예약이 된 시간 클릭시 예약자 정보 출력