Full Calendar
둘러보기로 가기
검색하러 가기
Google Calendar와 유사한 인터페이스를 제공하는 오픈소스 Full Calendar를 정리 합니다.
- 홈페이지 : http://arshaw.com/fullcalendar/
- 다운로드 : http://arshaw.com/fullcalendar/download/
- 라이선스 : It is open source and dual licensed under the MIT or GPL Version 2 licenses.
- 매뉴얼 : http://arshaw.com/fullcalendar/docs/
- 플랫폼 : JavaScript
Full Calendar
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.css' /> <link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.print.css' media='print' /> <script type='text/javascript' src='../jquery/jquery-1.7.1.min.js'></script> <script type='text/javascript' src='../jquery/jquery-ui-1.8.17.custom.min.js'></script> <script type='text/javascript' src='../fullcalendar/fullcalendar.js'></script> <script type='text/javascript'> var calendar = null; var events = null; events = [ { title: 'Long Event', start: new Date(y, m, d-5), end: new Date(y, m, d-2), color: 'red', backgroundColor: 'yellow', borderColor: 'blue', textColor: 'green', uid: 'event_0003', //--- Customize한 속성 flagCheckbox: true //--- Customize한 속성 } ]; $(document).ready(function() { calendar = $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, selectable: true, selectHelper: true, dayClick: function(date, allDay, jsEvent, view) { window.alert("dayClick"); calendar.fullCalendar('unselect'); }, eventClick: function(calEvent, jsEvent, view) { window.alert("eventClick"); }, select: function(start, end, allDay) { var title = prompt('Event Title:'); if (title) { calendar.fullCalendar('renderEvent', { title: title, start: start, end: end, allDay: allDay }, true // make the event "stick" ); } calendar.fullCalendar('unselect'); }, eventMouseover: function( event, jsEvent, view) { window.alert("eventMouseover"); }, eventMouseout: function( event, jsEvent, view) { window.alert("eventMouseout"); }, eventDrop: function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) { window.alert("eventDrop"); }, eventResize:function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) { window.alert("eventResize"); }, editable: true, events: events, firstDay: 0, //--- 0. 일요일 weekends: true, allDaySlot: true, allDayText: '종일', axisFormat : 'hh:mm tt', slotMinutes: 30, defaultEventMinutes: 60, firstHour: 9, timeFormat: 'hh:mm tt', columnFormat: {month: 'ddd', week: 'M/d ddd', day: 'M/d dddd'}, titleFormat: {month: 'yyyy년 M월', week: 'yyyy년 M월 d일{ — [yyyy년] [M월] d일 }', day: 'yyy y년 M월 d일 dddd'}, monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'] , monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], dayNames: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'], dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'], buttonText: {today: '오늘', month: '월', week: '주', day: '일'} }); });
Full Calendar Customize
데이터와 화면 Customize
- event에 Customize하고 싶은 필드를 추가 합니다.
- 주/일