FullCalendar 달력 라이브러리

달력에 이벤트/행사를 출력시키는 기능을 구현하게 되어,
FullCalendar 라이브러리를 사용하게 되었다.

• 홈페이지: https://fullcalendar.io
• 라이브 데모: https://fullcalendar.io/js/fullcalendar-3.0.1/demos/agenda-views.html

FullCalendar 특징/장점

• 여러 날짜에 걸쳐서 연속된 일정표시를 할 수 있음
• 프리미엄 애드온 : 리소스와 이벤트 조정 가능 (ex: 방 예약)
  https://fullcalendar.io/scheduler/
• 한글화 가능: monthNames, dayNames, buttonText 등
  http://www.jopenbusiness.com/mediawiki/index.php?title=Full_Calendar
• Google Calendar 연동: Google Calendar API Key와 ID 입력하면 됨
  https://fullcalendar.io/docs/google_calendar/

FullCalender의 사용방법

• 라이브러리

  		<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
  <script src='lib/jquery.min.js'></script>
  <script src='lib/moment.min.js'></script>
  <script src='fullcalendar/fullcalendar.js'></script>
  

• 캘린더 표시 위치

  <div id='calendar'></div>
  

• 캘린더 데이터 맵핑: 자바스크립트

  $(document).ready(function() {
  
      // page is now ready, initialize the calendar...
  
      $('#calendar').fullCalendar({
          // put your options and callbacks here
      })
  
  });
  

• 캘린더 이벤트 콜백 함수

  $('#calendar').fullCalendar({
      dayClick: function() {
          alert('a day has been clicked!');
      }
  });
  

FullCalender의 스케줄 뷰에서 열과 행

• 열(컬럼) ==> 리소스
  https://fullcalendar.io/docs/vertical_resource_view/

  resources: [
          { id: 'a', title: 'Room A' },
          { id: 'b', title: 'Room B' },
          { id: 'c', title: 'Room C' },
          { id: 'd', title: 'Room D' }
      ]
  

• 행(로우) ==> 이벤트
  https://fullcalendar.io/docs/event_data/

      events: [
          {
              title  : 'event1',
              start  : '2010-01-01'
          },
          {
              title  : 'event2',
              start  : '2010-01-05',
              end    : '2010-01-07'
          },
          {
              title  : 'event3',
              start  : '2010-01-09T12:30:00',
              allDay : false // will make the time show
          }
      ]
  

참고문서

• How to use FullCalendar plugin with Typescript
• codepend.io – 풀칼렌더 테스트
• Fullcalendar Walk through with AngularJS

샘플소스

• 자바스크립트

  	$(document).ready(function() {
  		var lang_cd = 'ko';
  		$('#calendar').fullCalendar({
  			header: {
  				left: 'prev,next today',
  				center: 'title',
  				right: 'month,listMonth'
  			},
  			defaultDate: moment().format('YYYY-MM-DD'),
  			locale: initialLocaleCode,
  			editable: true,
  			navLinks: true,
  			eventLimit: true,
  			events: function(start, end, timezone, callback) {
  				$.ajax({
  					url: '/test/eventAll.do',
  					type : 'post',
  					data : {EVENT_CODE : '11', LANG : lang_cd, startDate : start.format(), endDate : end.format() },
  					dataType: 'json',
  					success: function(data) {
  						var events = [];
  		                $(data).each(function() {
  		                    events.push({
  		                    	title: $(this).attr('title'),
  		                    	start: $(this).attr('start'),
  		                    	end: $(this).attr('end'),
  		                    	url: "/test/eventDetail.do?id="+$(this).attr('id')+"&lang="+$(this).attr('lang')+"&start="+$(this).attr('start')+"&end="+$(this).attr('end'),
  		                    	lang : $(this).attr('lang')
  		                    });
  		                });
  		                callback(events);
  					}
  				});
  
  			},
  			loading: function(bool) {
  				$('#loading').toggle(bool);
  			}
  		});
  	});
  

• 스타일

  <style>
  	#loading {display:none; position:absolute; top:10px; right:10px;}
  	#calendar {max-width:800px; margin:0 auto;}
  </style>
  

• HTML

      <!-- 달력시작 -->
  <div id="divCalendar">
  <div id="loading">loading...</div>
  <div id="calendar"></div>
  </div>