[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 수정/삭제 답글

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