[FullCalendar] 구글 캘린더 hide / show 기능 추가하기

jQuery/FullCalendar 2017. 5. 25. 10:59








※ 해당 예제는[FullCalendar] 풀 캘린더와 구글 캘린더 연동하기를 기반으로 작성되었습니다.





01. 풀 캘린더의 addEventSource, removeEventSource 기능을 사용하여

    구글 캘린더 데이터를 숨기고 다시 불러오는 기능을 추가해 보자.

 calendar_google_choice.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;
    }

    div.barKategorie {
        float:left;
        margin:5px;
        padding-top:5px;
        padding-bottom:5px;
        padding-left:5px;
        padding-right:10px;
        border-radius:5px;
        font-weight:bold;
    }
</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키를 그대로 사용한 것이다.



출처: http://wickedmagic.tistory.com/566 [사악미소의 현대마법의 공방]

, googleCalendarApiKey : "AIzaSyDcnW6WejpTOCffshGDDb4neIrXVUA1EAE"      // Google API KEY

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



출처: http://wickedmagic.tistory.com/566 [사악미소의 현대마법의 공방]

출처: http://wickedmagic.tistory.com/566 [사악미소의 현대마법의 공방]

출처: http://wickedmagic.tistory.com/566 [사악미소의 현대마법의 공방]

출처: http://wickedmagic.tistory.com/566 [사악미소의 현대마법의 공방]

출처: http://wickedmagic.tistory.com/566 [사악미소의 현대마법의 공방]

            , googleCalendarApiKey : "AIzaSyDcnW6WejpTOCffshGDDb4neIrXVUA1EAE"
            , 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);
            }
        });
    });

    // addEventSource, removeEventSource의 기능하는데 구별값은 googleCalendarId 이다.
    // 그렇기에 googleCalendarId는 반드시 입력해야한다.
    function scheduleChoice(num, id, distinct, color, text) {
        if(jQuery(".swingBar").eq(num).is(":checked")) {
            jQuery("#calendar").fullCalendar("addEventSource", { googleCalendarId : id, className : distinct, color : color, textColor : text });
        } else {
            jQuery("#calendar").fullCalendar("removeEventSource", { googleCalendarId : id });
        }
    }
</script>
<body>
    <div style="width:100%;display:table-cell;float:center;">
        <div class="barKategorie" style="background-color:#FF0000;color:#FFFFFF;">
            <label>
                <input type="checkbox" class="swingBar" onChange="scheduleChoice(0, 'ko.south_korea#holiday@group.v.calendar.google.com', 'usaHolidays', '#FF0000', '#FFFFFF');" checked/>
                &nbsp;한국 공휴일
            </label>
        </div>
        <div class="barKategorie" style="background-color:#0000FF;color:#FFFF00;">
            <label>
                <input type="checkbox" class="swingBar" onChange="scheduleChoice(1, 'ko.usa#holiday@group.v.calendar.google.com', 'usaHolidays', '#0000FF', '#FFFF00');" checked/>
                &nbsp;미국 공휴일
            </label>
        </div>
        <div class="barKategorie" style="background-color:#FF99CC;color:#000000;">
            <label>
                <input type="checkbox" class="swingBar" onChange="scheduleChoice(2, 'ko.japanese#holiday@group.v.calendar.google.com', 'jpHolidays', '#FF99CC', '#000000');" checked/>
                &nbsp;일본 공휴일
            </label>
        </div>
    </div>
    <div style="height:30px;"></div>
    <div id="loading">loading...</div>
    <div id="calendar"></div>
</body>




02. 출력결과는 아래와 같이 체크박스를 선택하는 것으로 해당 데이터를 캘린더에서 지웠다 다시 생성할 수 있다.








저작자표시

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

[FullCalendar] 구글 캘린더 hide / show 기능 추가하기  (8) 2017.05.25
[FullCalendar] 풀 캘린더와 구글 캘린더 연동하기  (3) 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
트랙백 0개 , 댓글 8개
  • 박준혁 2017.06.22 17:22 ADDR 수정/삭제 답글

    이벤트를 넣고 지우는 글도 올려주실 용의가 있으신가요 아무리 찾아도 ㅠㅠ 알수가없네요 부탁드립니다 제발

    • 사악미소 2017.06.22 18:52 신고 수정/삭제

      만들어 둔게 있는데....
      주말중으로 작성해서 올려보겠습니다.

    • 박준혁 2017.06.23 10:41 수정/삭제

      정말 감사합니다 ㅠㅠ
      한달동안 고생햇는데

    • 박준혁 2017.07.12 16:05 수정/삭제

      죄송합니다만 ... 언제쯤

  • 김은지 2017.11.01 15:56 ADDR 수정/삭제 답글

    안녕하세요! 우연히 풀캘린더 검색하다가 들어오게 되었어요. 많은 도움주셔서 감사합니다.
    혹시나 구글 캘린더에서 날짜별로 일정 색깔을 넣을수 있던데, 풀캘린더에서는 그건 가지고올순 없나요??

    • 사악미소 2017.11.01 16:03 신고 수정/삭제

      음 시도해 보진 않았지만.
      https://developers.google.com/google-apps/calendar/v3/reference/colors/get
      를 통해서 색상값을 알아내는것은 가능한것 같습니다.
      위 예제는 풀캘린더 API를 활용하고
      구글 캘린더에서는 get으로된 url값만 받아오기에 그렇게 하려면 구글 API까지 연동이 필요하겠네요.

  • 해방 2017.11.28 11:08 ADDR 수정/삭제 답글

    사악미소님 안녕하세요! 웹개발플젝에 스케쥴 api를 심으려고 하는 학생입니다.
    사악미소님 블로그 덕분에 글씨 변경이나 색 넣는것 까지 해봤는데 어떤식으로 이벤트 function을 주는지 js가 이해가 잘 가지 않더라구요 ㅠㅠ
    javaScript 에서 스케쥴 추가방법 참고할 만한 자료가 있을지 문의 드립니다 ㅠㅠ

    • 사악미소 2017.11.28 11:21 신고 수정/삭제

      http://wickedmagic.tistory.com/504
      에보시면 이벤트 클릭 기능이 있습니다.
      이벤트를 클릭을 통해 함수르실행시키거나 하실 수 있으실 겁니다.

      구글 API를 쓰신다면 구글 API와 연동을 하셔야할테고,
      자체DB를 쓰신다면 함수를 실행하고 ajax를 통해서 값을 넘기는걸로 해결 하실 수 있으실 겁니다.

1 ··· 26 27 28 29 30 31 32 33 34 ··· 530