# 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>

`options` 와 `evnets` 는 달력객체구조를 참고하세요.

### 주의 `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);
                    }
                });
            }
        }
    ]