달력에 이벤트/행사를 출력시키는 기능을 구현하게 되어,
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>
