Quick Start

ibcalendar 파일 구성

IB Calendar를 사용하기 위해서 다음 4~6가지 파일을 추가합니다.

<!----- ibsheet 기본 모듈 ----->
<!-- 종속 라이브러리 디자인 css -->
<link rel="stylesheet" type="text/css" href="ibcalendar/css/dependency.css">
<!-- 디자인 css -->
<link rel="stylesheet" type="text/css" href="ibcalendar/css/ibcalendar.css">
<!-- 종속 라이브러리 코어 파일 -->
<script src="ibcalendar/dependency.min.js"></script>
<!-- 캘린더 코어 파일 -->
<script src="ibcalendar/ibcalendar.min.js"></script>
<!-- 라이선스 파일 -->
<script src="ibcalendar/ibleaders.js"></script>
<!-- 메세지 파일 ko.js 나 en.js 중 하나 추가 -->
<script src="ibcalendar/locale/ko.js"></script>

캘린더 생성

이 후 캘린더 객체의 id, 달력이 그려질 DOM element, 생성 옵션과 같은 정보를 설정하고 IBSheet.create() 함수를 통해 객체를 생성합니다.
객체 생성이후 calendar.render() 함수를 실행해 주어야 실제 DOM에 달력이 그려집니다.

[자바스크립트 구문]

function initCalendar () {
    var id = "calendar1",
    el = document.getElementById("calendar-container"),
    options = {  // 캘린더 생성 옵션
        headerToolbar: { // 헤더 툴바 표시 정보
            left: "today prev next",
            center: "title",
            right: "dayGridMonth,timeGridWeek,listMonth"
        },
        height: "100%", // 부모 요소의 높이에 맞추어 생성
        eventSources: [
            {
                id: "Softin",
                events: eventData // 초기 로딩 데이터
            }
        ]

    };

    IBCalendar.create(id, el, options);  // 캘린더 객체 생성
    IBCalendar.get(id).render();         // 캘린더 렌더링

}

[HTML 구문]

<body onload="initCalendar()">
    <!-- 캘린더의 부모 요소 -->
    <div style="width:100%; height:600px;">
        <!-- 캘린더가 그려질 DIV 객체 -->
        <div id="calendar-container"></div>
    </div>
</body>

optionsevnets달력객체구조를 참고하세요.

### 주의 `eventSources`에서 데이터 조회시 Ajax 호출은 `async: false` 동기식 형식으로 호출하여 서버의 응답을 기다린 뒤 완료된 이후에 일정정보를 렌더링 할 수 있도록 동작되어야 합니다.
eventSources: [
    // your event source
    {
        id: "IBCalendar1"
        events: function(info, successCallback, failureCallback) {
            // jquery ajax 를 이용한 통신
            // 비동기 문제로 인해 반드시 async: false 설정해야 한다.
            $.ajax({
                url: "/data/ibcalendar/devsample",
                method: "GET",
                async: false,
                dataType: "json",
                data: {
                   start: IBCalendar.DateTime.fromJSDate(info.start).toISO(),
                   end: IBCalendar.DateTime.fromJSDate(info.end).toISO()
                },
                success: function (result) {
                    successCallback(result); // 해당 함수에 일정 정보를 인자로 호출 시켜주어야 달력에 렌더링 됩니다.
                },
                error: function (xhr, status, errorThrown) {
                    failureCallback(status);
                }
            });
        }
    }
]