FullCalendar 달력 라이브러리

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

FullCalendar 특징/장점

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
            }
        ]
    

참고문서

샘플소스

  • 자바스크립트
    	$(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>
    

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: