Calendar

1. 목표

• jquery와 javascript async/await를 활용한 Client Side Rendering 구현
• 전체 Calendar를 만든 후 일정 등록하기
  • 하루 일정 - 하루종일 선택 가능
  • 연속 일정
  • 반복 일정
• 일정 상세보기 구현
• 월 / 일 기준 달력과 일정과 달력 구현

2. 사용 기술

• Node.js + express.js + sequelize.js + mysql + javascript +jquery

• Node.js의 ORM모듈인 sequelize.js를 사용

  • 코딩의 반복적인 부분을 줄일 수 있고 SQL의 의존적인 코딩에서 벗어나 생산적인 코딩이 가능하며 유지보수가 편리하기 때문에 사용함

3. 데이터베이스 설계

• 일정을 등록하기 위한 calendars table 생성
  • 제목/내용, 시작/종료 날짜, 시작/종료 시간, 반복 유무, 하루종일 유무, 생성/수정 시간
• sequelize를 활용하여 table 생성

4. 기능

public/javascripts/calendar.js file에 calendar 기능을 위한 거의 모든 code가 작성되어있습니다.

1. 전체 calendar 생성

   • 전체 Calendar를 만들기 위하여 generateCalendar 함수를 생성하였고, 비동기를 동기 처리 하기 위하여 async/await를 사용하였다.

   // public/javascripts/calendar.js
   async function generateCalendar(date)

   
* `<`를 클릭하면 이전 달로 이동하며, `>`를 클릭하면 다음 달로 이동한다.
   
   ```javascript
   // '<' 클릭시, 이전 calendar로 이동
   $('#previous').click(function() {
     ...
   });
   
   // '>' 클릭시, 다음 calendar로 이동
   $('#next').click(function() {
   	...
   });

• Calendar 생성 완료

  

2. 일정 등록 Modal 생성

   • 일정 등록을 위한 Modal 생성
   • 등록하고 싶은 날짜를 누르면 Modal Open

   $('.week, .daily-calendar').click(function(e) {
   	...
     $('#start-date-picker').val(todayId)
     $('#registerSchedule').modal('show')
   });

   

3. 일정 등록

   • 하루 일정 등록 - 하루종일을 체크하면 시작/종료 시간 입력하지 않음

     

   • 연속 일정 등록

     

   • 반복 일정 등록

     • 매월 반복에 체크하면, 일정이 매월 반복된다.

       

       

4. 일정 상세 보기

   • popover를 사용하여 일정을 클릭하면 일정을 상세보기 할 수 있음
   

5. 월/일 일정 보기

   • 월을 클릭하면 월 달력으로 일정을 확인할 수 있고, 일을 클릭하면 일 달력으로 일정을 확인할 수 있다.

   • 월 달력

     

   • 일 달력