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하고 싶은 필드를 추가 합니다.
• 주/일