[외부 JS] 달력 관련 JS (Fullcalendar)

데모

이렇게 나온 달력을 다양한 방식으로 컨트롤 할 수 있습니다.

다운 경로

https://fullcalendar.io/ 

압축 해제 후 

시연 화면

달력 관련 JS 로 FullCalendar.js를 소개 하려 합니다. 

Jquery 에서 제공하는 https://jqueryui.com/datepicker/ 도 나중에 보시면 좋을 것 같네요.

JavaScript 구현부

데모를 받아보시게 되면 위와 같은 방식으로 옵션을 설정할 수 있습니다.

먼저 init은 화면이 보여질 때 캘린더의 기본 옵션을 지정해주는 곳입니다.

위에서 부터 천천히 훑어 내려가면

풀 캘린더를 보여줄 div id를 지정하는 곳 입니다. 

저 calendar id를 가진 div에 캘린더가 보여지게 됩니다.

옵션

- themeSystem : 달력의 테마를 설정 할 수 있습니다. 

(데모 버전에서 다양한 테마를 확인할 수 있습니다.)

- header          : 달력위의 이전,다음 버튼 및 title, 그리고 월,주,일,리스트를  왼쪽 센터 그리고 왼쪽에 원하는 위치에 넣을 수 있습니다.

- defaultDate    : 달력의 시작 날짜를 지정할 수 있습니다. 이 부분은 오늘 날자를 가져와서 설정해 주시면 오늘 날자 기준으로

                     달력이 보여지게 됩니다.

- weekNumbers  : 주의 숫자를 나타낼 수 있습니다. 기본은 false로 잡혀있고, true로 설정하게 되면 주의 숫자가 보여지게 됩니다.

- navlink    : navlink는 날짜(숫자)를 선택했을 때 그 날자에 해당하는 세부 스케줄로 넘어갈 수 있게 할 수 있습니다. (default : false)

- editable   : editable은 등로된 스케줄의 위치를 옮길 수 있도록 설정합니다. 

- lang      : lang은 언어를 설정할 수 있습니다 (한국어 : ko)

- selectable : selectable은 설정을 true로 하게 되면, 날짜를 드래그를 통해 영역을 지정할 수 있게 됩니다.

- event       : 스케줄 데이터를 넣는 곳으로 객체의 배열로 이루어져 있습니다. title, start, end, url등을 넣어 설정할 수 있습니다.

fullcalendar js의 옵션들을 소개 시켜드렸습니다.

옵션을 구현 하려는 곳에 적합하게 사용하시면 될 것 같습니다.