본문 바로가기
jQuery/FullCalendar

[FullCalendar] 풀 캘린더와 구글 캘린더 연동하기

사악미소 2017. 5. 25. 10:18
반응형






01. 풀 캘린더에서 구글 캘린더의 데이터 값을 받아다 사용하기 위해서는

    풀 캘린더에서 제공하는 gcal.js 라이브러리가 필요하다.





02. 구글 캘린더의 캘린더 세부정보에서 캘린더 주소를 복사해 오자.





03. 위에서 복사한 캘린더 주소를 사용하여 아래코드의 googleCalendarId에 기입하는 식으로 아래 코드를 작성해 보자.

 calendar_google.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>풀캘린더::구글캘린더</title>
<style type="text/css">
    body {
        margin:40px 10px;
        padding:0;
        font-family:"Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
        font-size:14px;
    }


    #loading {
        display:none;
        position:absolute;
        top:10px;
        right:10px;
    }


    #calendar {
        max-width:900px;
        margin:0 auto;
    }
</style>
<link href="./fullcalendar-2.9.1/fullcalendar.css" rel="stylesheet"/>
<link href="./fullcalendar-2.9.1/fullcalendar.print.css" rel="stylesheet" media="print"/>
<script type="text/javascript" src="./fullcalendar-2.9.1/lib/moment.min.js"></script>
<script type="text/javascript" src="./fullcalendar-2.9.1/lib/jquery.min.js"></script>
<script type="text/javascript" src="./fullcalendar-2.9.1/fullcalendar.js" charset="euc-kr"></script>
<script type="text/javascript" src="./fullcalendar-2.9.1/gcal.js"></script>
<script type="text/javascript" src="./fullcalendar-2.9.1/lang-all.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#calendar").fullCalendar({
            header : {
                  left : "prev"
                , center : "title, month"
                , right : "next"
            }
            , lang : "ko"
            , editable : true
            , eventLimit : true
            , googleCalendarApiKey : "AIzaSyDcnW6WejpTOCffshGDDb4neIrXVUA1EAE"      // Google API KEY

            // 예제소스에 적힌 구글캘린더 API 키는 FullCalendar 예제에 있는 API키를 그대로 사용한 것이다.

            , eventSources : [
                // 대한민국의 공휴일
                {
                      googleCalendarId : "ko.south_korea#holiday@group.v.calendar.google.com"
                    , className : "koHolidays"
                    , color : "#FF0000"
                    , textColor : "#FFFFFF"
                }
                // 미국의 공휴일
                , {
                      googleCalendarId : "ko.usa#holiday@group.v.calendar.google.com"
                    , className : "usaHolidays"
                    , color : "#0000FF"
                    , textColor : "#FFFF00"
                }
                // 일본의 공휴일
                , {
                      googleCalendarId : "ko.japanese#holiday@group.v.calendar.google.com"
                    , className : "jpHolidays"
                    , color : "#FF99CC"
                    , textColor : "#000000"
                }
            ]
            , loading:function(bool) {
                jQuery("#loading").toggle(bool);
            }
        });
    });
</script>
<body>
    <div id="loading">loading...</div>
    <div id="calendar"></div>
</body>





04. 출력결과는 아래와 같이 한국, 미국, 일본의 국가 휴일이 나타나는것을 확인 할 수 있다.











반응형
저작자표시

'jQuery > FullCalendar' 카테고리의 다른 글

[FullCalendar] 구글 캘린더 hide / show 기능 추가하기  (8) 2017.05.25
[FullCalendar] 전월, 익월 버튼 클릭시 날짜값 받아오기.  (0) 2016.08.08
[FullCalendar] eventClick 기능을 사용하여 클릭효과 생성  (1) 2016.08.06
[FullCalendar] eventRender를 이용한 해당일에 이미지 나타내기  (0) 2016.08.06
[FullCalendar] eventSource를 이용한 이벤트별로 그룹화 하기  (0) 2016.08.05

'jQuery/FullCalendar' Related Articles

티스토리툴바