[jquery] fullcalendar

 개요  

jquery 를 사용하면서 일정과 관련된 plugin 을 찾다가 fullcalendar 를 찾게 되었다. 구글의 캘린더의 기능을 구현하고자 한다면 fullcalendar 를 잘 사용한다면 유용하게 이용할 수 있을 것이다. 

 FullCalendar 는 문서화가 잘되어있다는 것이 가장 큰 장점이다. 사용법과 관련된 부분부터 시작해서 문서로 잘 정리되어있다. 그 중에서도 필요한 부분들만 잘 골라서 포스팅에 반영하도록 하겠다.

또한 FullCalendar 는 문서뿐만아니라 issue tracker 를 잘 활용하고 있다. fullcalendar 에서 지원하지 않거나 앞으로 추가가 되었으면 하는 내용들을 issue tracker 를 활용한다면 다음 버전에서는 여러분이 제안한 것들이 추가가 될 수 있을 것이다.

 Usage 

FullCalendar 에서는 현재 1.4.8 버전(Oct 16, 2010)을 배포중입니다. 다운로드 받은 파일의 demos 폴더에 있는 html 을 수행하면 fullcalendar 에 대한 내용을 브라우저에서 확인할 수 있습니다. 

* js, css 선언

<link rel='stylesheet' type='text/css' href='./plugins/fullcalendar/fullcalendar.css' />

<script type='text/javascript' src='./jquery/jquery-1.4.3.min.js'></script>

<script type='text/javascript' src='./jquery/jquery-ui-1.8.5.custom.min.js'></script>

<script type='text/javascript' src='./plugins/fullcalendar/fullcalendar.min.js'></script>

 Event 

* eventDrop

 

구글과 같이 일정을 Drag & Drop or Resize 시에 취소하는 방법도 지원을 하고 있다. 네트워크시나 Ajax 에러시에 revertFunc() 를 이용하여 화면에 취소가 된 것을 나타낼 수 있다. 또는 refresh 하면 되겠다.

 

eventDrop:function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, 
ui,view ) { }

$('#calendar').fullCalendar({ events: [ // events here ], editable: true, eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) { alert( event.title + " was moved " + dayDelta + " days and " + minuteDelta + " minutes." ); if (allDay) { alert("Event is now all-day"); }else{ alert("Event has a time-of-day"); } if (!confirm("Are you sure about this change?")) { revertFunc(); } } });

 버그리포트 및 개선방향 

- 데이터를 가져온 후 화면에서 해야할 일이 너무 많다. ( 색, 이벤트 등등 )

 : 색은 구글처럼 예쁜 색으로 고정을 시킨다. ( 파스텔 톤으로 )

- 일정 개수 이상은 (+xx ) 의 형태로 표현해야 한다. 
  : 날짜 셀 하나에 보이는 데이터 양이 많아져서 달력이 깨져보인다. 
  : Issue 304: Max events with "more..." link

- 드래그 후 이벤트를 등록할 수 있는 기능이 필요

  : 일정을 보기만 하는 것이 아니라 직접 화면에서 제어 (드래그 & 드랍 , 드래그 후 이벤트 등록 등) 의 기능이 필요하다. 

  : Issue 215: Create event by click/drag/unclick, giving it a specific start/end

- 데이터를 매번 가져오는 것이 아니라 필요한 데이터만 가져올 필요가 있다.

- Ajax 를 이용하여 한번 로딩한 화면은 refresh 하지 말자.

 참고 

- FullCalendar 

- issue tracker 

- visualjquery 

- http://www.kieranoshea.com/calendar/2010/oct#
- http://dhtmlx.com/docs/products/dhtmlxScheduler/livedemo.shtml
- datepicker select week
   http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerSelectWeek.html
- calendar
   http://www.planscalendar.com/demo/

   http://www.web-delicious.com/jquery-plugins-demo/wdCalendar/sample.php

   http://www.keepthebellringing.org/calendar