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








  • 박준혁 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를 통해서 값을 넘기는걸로 해결 하실 수 있으실 겁니다.

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

jQuery/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. 출력결과는 아래와 같이 한국, 미국, 일본의 국가 휴일이 나타나는것을 확인 할 수 있다.











  • cdh 2018.01.26 09:51 ADDR 수정/삭제 답글

    혹시 지금도 운영하시나요...? 질문이이썽서 댓글남겨봅니다.

  • gascon 2018.06.18 12:00 ADDR 수정/삭제 답글

    풀캘린더에 대해서 정말 많은 도움 얻어갑니다!! 감사합니다!!!!!

[FullCalendar] 전월, 익월 버튼 클릭시 날짜값 받아오기.

jQuery/FullCalendar 2016. 8. 8. 14:17


익월, 전월의 날자값을 받아와야 하는경우가 있다.

FullClendar에서 '<(전월)', '>(익월)'버튼을 클릭하였을경우의

해당월의 첫번째 값을 받아오는 예제이다.




01. 전월, 익월 버튼을 클릭하였을 경우 해당월의 날짜값을 받아오는 예제

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

    #calendar {
        max-width : 900px;
        margin : 0 auto;
    }

    .fc-day-number.fc-sat.fc-past { color:#0000FF; }
    .fc-day-number.fc-sun.fc-past { color:#FF0000; }
</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//lang-all.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#calendar").fullCalendar({
              defaultDate : "2016-05-12"
            , lang : "ko"
            , editable : true
            , eventLimit : true
            , events: [
                {
                      title : "All Day Event"
                    , start : "2016-05-01"
                },
                {
                      title : "Long Event"
                    , start : "2016-05-07"
                    , end : "2016-05-10"
                },
                {
                      id : 999
                    , title : "Repeating Event"
                    , start : "2016-05-09T16:00:00"
                },
                {
                      id : 999
                    , title : "Repeating Event"
                    , start : "2016-05-16T16:00:00"
                },
                {
                      title : "Conference"
                    , start : "2016-05-11"
                    , end : "2016-05-13"
                },
                {
                      title : "Meeting"
                    , start : "2016-05-12T10:30:00"
                    , end : "2016-05-12T12:30:00"
                },
                {
                      title : "Lunch"
                    , start : "2016-05-12T12:00:00"
                },
                {
                      title : "Meeting"
                    , start : "2016-05-12T14:30:00"
                },
                {
                      title : "Happy Hour"
                    , start : "2016-05-12T17:30:00"
                },
                {
                      title : "Dinner"
                    , start : "2016-05-12T20:00:00"
                },
                {
                      title : "Birthday Party"
                    , start : "2016-05-13T07:00:00"
                },
                {
                      title : "Click for Google"
                    , url : "http://google.com/"
                    , start : "2016-05-28"
                }
            ]
        });
       
        // 왼쪽 버튼을 클릭하였을 경우
        jQuery("button.fc-prev-button").click(function() {
            var date = jQuery("#calendar").fullCalendar("getDate");
            convertDate(date);
        });

        // 오른쪽 버튼을 클릭하였을 경우
        jQuery("button.fc-next-button").click(function() {
            var date = jQuery("#calendar").fullCalendar("getDate");
            convertDate(date);
        });
    });
   
    // 받은 날짜값을 date 형태로 형변환 해주어야 한다.
    function convertDate(date) {
        var date = new Date(date);
        alert(date.yyyymmdd());
    }

    // 받은 날짜값을 YYYY-MM-DD 형태로 출력하기위한 함수.
    Date.prototype.yyyymmdd = function() {
        var yyyy = this.getFullYear().toString();
        var mm = (this.getMonth() + 1).toString();
        var dd = this.getDate().toString();
        return yyyy + "-" + (mm[1] ? mm : "0" + mm[0]) + "-" + (dd[1] ? dd : "0" + dd[0]);
    }
</script>
<body>
    <div id="calendar"></div>
</body>




02. 출력결과

① 상단 오른쪽 '<', '>' 버튼을 클릭하면 이전, 다음 달로 넘어가게된다.




② '>' 버튼을 클릭하였을때. 다음달의 첫번째 날의 값을 경고창으로 띄우는 것을 볼 수 있다.


[FullCalendar] eventClick 기능을 사용하여 클릭효과 생성

jQuery/FullCalendar 2016. 8. 6. 11:32



01. eventClick기능을 사용하면 선택한 이벤트에 클릭 기능을 추가할 수 있다.

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

    #calendar {
        max-width: 900px;
        margin: 0 auto;
    }

    .fc-day-number.fc-sat.fc-past { color:#0000FF; }
    .fc-day-number.fc-sun.fc-past { color:#FF0000; }
</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">
    jQuery(document).ready(function() {
        jQuery("#calendar").fullCalendar({
              defaultDate : "2016-05-12"
            , editable : true
            , eventLimit : true
            , events: [
                {
                      title : "발길향하는 공간"
                    , url : "http://www.wickedmiso.com/"
                    , start : "2016-05-25"
                }
            ]
            , eventClick:function(event) {
                if(event.url) {
                    alert(event.title + "\n" + event.url
, "wicked", "width=700,height=600");
                    window.open(event.url);
                    return false;
                }
            }

        });
    });
</script>
<body>
    <div id="calendar"></div>
</body>
</html>




02. 등록한 이벤트를 클릭하면 아래와같은 순서로 작업이 진행될 것이다.


이벤트를 클릭하면 알림창이 뜬다.




위 알림창에서 확인 버튼을 클릭하면 지정한 URL의 팝업창이 나타날 것이다.








  • helpme 2019.09.30 12:59 ADDR 수정/삭제 답글

    팝업창 사이즈조절은 어떻게 하나요 ㅜㅜ

[FullCalendar] eventRender를 이용한 해당일에 이미지 나타내기

jQuery/FullCalendar 2016. 8. 6. 10:42

01. eventRender를 이용하여 FullCalendar의 특정날짜에 이미지를 추가하여 보자. 코드는 아래와 같다.

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

    #calendar {
        max-width: 900px;
        margin: 0 auto;
    }

    .fc-day-number.fc-sat.fc-past { color:#0000FF; }
    .fc-day-number.fc-sun.fc-past { color:#FF0000; }
</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">
    jQuery(document).ready(function() {
        jQuery("#calendar").fullCalendar({
              defaultDate : "2016-05-12"
            , editable : true
            , eventLimit : true
            , events: [
                {
                      start : "2016-05-02"
                    , imageurl : "./images/bender.png"
                }
                , {
                      start : "2016-05-05"
                    , imageurl : "./images/bird.png"
                }
                , {
                      start : "2016-06-04"
                    , imageurl : "./images/clown.png"
                }
                , {
                      start : "2016-05-11"
                    , imageurl : "./images/dictator.png"
                }
                , {
                      start : "2016-05-22"
                    , imageurl : "./images/frankenstein.png"
                }
                , {
                      start : "2016-05-17"
                    , imageurl : "./images/lady.png"
                }
                , {
                      start : "2016-05-18"
                    , imageurl : "./images/posh.png"
                }
                , {
                      start : "2016-06-09"
                    , imageurl : "./images/mouse.png"
                }
                , {
                      start : "2016-05-27"
                    , imageurl : "./images/potter.png"
                }
                , {
                      start : "2016-06-07"
                    , imageurl : "./images/queen.png"
                }
                , {
                      start : "2016-05-14"
                    , imageurl : "./images/scream.png"
                }
                , {
                      start : "2016-05-30"
                    , imageurl : "./images/vader.png"
                }
            ]
            , eventRender:function(event, eventElement) {
                if(event.imageurl) {
                    eventElement.find("span.fc-title").prepend("<center><img src='" + event.imageurl + "'><center>");
                }
            }
        });
    });
</script>
<body>
    <div id="calendar"></div>
    <div class="test">
        <div class="test2"></div>
    </div>
</body>
</html>




02. 출력결과