본문 바로가기
jQuery/FullCalendar

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

사악미소 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. 출력결과



반응형
저작자표시

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

[FullCalendar] 전월, 익월 버튼 클릭시 날짜값 받아오기.  (0) 2016.08.08
[FullCalendar] eventClick 기능을 사용하여 클릭효과 생성  (1) 2016.08.06
[FullCalendar] eventSource를 이용한 이벤트별로 그룹화 하기  (0) 2016.08.05
[FullCalendar] 이벤트 색상 변경하기  (0) 2016.08.05
[FullCalendar] 주말 날짜 색깔 표시하기  (0) 2016.08.05

'jQuery/FullCalendar' Related Articles

티스토리툴바