본문 바로가기
jQuery/FullCalendar

[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. 출력결과

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




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


반응형
저작자표시

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

[FullCalendar] 구글 캘린더 hide / show 기능 추가하기  (8) 2017.05.25
[FullCalendar] 풀 캘린더와 구글 캘린더 연동하기  (5) 2017.05.25
[FullCalendar] eventClick 기능을 사용하여 클릭효과 생성  (1) 2016.08.06
[FullCalendar] eventRender를 이용한 해당일에 이미지 나타내기  (0) 2016.08.06
[FullCalendar] eventSource를 이용한 이벤트별로 그룹화 하기  (0) 2016.08.05

'jQuery/FullCalendar' Related Articles

티스토리툴바