# 일정(Event) 조회 및 서버 연동

> 일정(Event) 데이터를 IB Calendar 에 로딩하는 방법입니다.

## 조회 데이터 구조

    [
        {"id": "IBLeaders-event1", "title": "All Day Event", "allDay": true, "start": "2020-06-01", "end": "2020-06-02"},
        {"id": "IBLeaders-event2", "title": "Long Event", "allDay": true, "start": "2020-06-07", "end": "2020-06-10"},
        {"id": "IBLeaders-event3", "title": "Meeting", "allDay": false, "start": "2020-06-22T10:30:00", "end": "2020-06-22T12:30:00"}
    ]

## 일반 일정(Event) 구조

        {
            "id": "IBLeaders-event1",           // 일정(Event)의 고유한 ID
            "title": "Meeting",                 // 일정(Event)에 보여지는 제목
            "allDay": false,                    // 종일 유무
            "start": "2023-11-22T10:30:00",     // 일정(Event)의 시작일자
            "end": "2023-11-22T12:30:00",       // 일정(Event)의 종료일자
            "memo": "고객사 미팅"                // 일정(Event)의 메모 (선택사항)
        }

## 반복 일정(Event) 구조

반복 일정의 `rrule` 값은 RRULE string 데이터로 만들어집니다.

> 주의!
> 반복 일정을 서버에 저장 시 `getEvents()` 를 통하여 뽑인 값을 저장하면 안됩니다.
> 반드시 `일정(Event) 조회 및 서버 연동`의 서버에 변경 사항 로드 부분의 `eventAdd`, `eventChange`, `eventRemove` 의 `info.eventInputs` 값을 통하여 저장하셔야 됩니다.

        {
            "id": "IBLeaders-event2",
            "title": "Recurring Event",
            "allDay": true,
            "duration": {                       // 반복 일정(Event) 생성시 각 일정의 길이
                "days": 0                       // milliseconds 설정 시 days 생략 가능
                "milliseconds": 86400000
            },
            "rrule": "DTSTART:20231101T000000Z\nRRULE:INTERVAL=1;FREQ=WEEKLY;BYDAY=MO,WE,FR;UNTIL=20231201T000000Z" // 반복 일정(Event) 데이터 정보
        }

IB Calendar 는 위와 같은 데이터 형태로 된 일정(Event) 정보를 캘린더에 표현할 수 있습니다.

`eventSources` 단위로 일정(Event) 이 관리됩니다. (Google Calendar 의 캘린더와 같은 개념)

    eventSources: [
        {
           id: "calendar1",
           events: [
             {"id": "IBLeaders-event1", "title": "All Day Event", "allDay": true, "start": "2020-06-01", "end": "2020-06-02"},
             {"id": "IBLeaders-event2", "title": "Long Event", "allDay": true, "start": "2020-06-07", "end": "2020-06-10"}
           ]
        },
        {
           id: "calendar2",
           events: [
             {"id": "event1", "title": "종일일정", "allDay": true, "start": "2022-06-01", "end": "2022-06-02"},
             {"id": "event2", "title": "출장", "allDay": true, "start": "2022-06-07", "end": "2022-06-10"}
           ]
        }
    ]

## 데이터 로드

달력에 일정 정보 데이터를 로드하는 방법으로 3가지의 방법을 제공하고 있습니다.

### JSON

> 달력에 표시 될 이벤트 정보를 배열 객체로 정의할 수 있습니다.
> JSON 형태의 구조를 가진 데이터를 서버에서 받아온 뒤 `eventSources` 단위로 직접 설정할 수 있습니다.
> 각 `eventSources` 객체에서 `events` 속성에 담아주면 됩니다.

    eventSources: [
        {
            id: "IBCalendar1",
            events: [
                { title: "event1", start: "2010-01-01", end: "2010-01-02", allDay: true },
                { title: "event2", start: "2010-01-05", end: "2010-01-07", allDay: true }
            ],
            backgroundColor: "red"     // "IBCalendar1" 에 속해 있는 모든 이벤트에 대해서 색깔 지정.
        }
    ]

### Function

> 달력에 표시될 이벤트 정보를 function 을 통해 제어하여 정의할 수 있습니다.

    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);
                    }
                });
            }
        }
    ]

## 서버에 변경 사항 로드

IB Calendar 는 각 `eventSources` 마다 일정(Event) 추가/수정/삭제 시 발생하는 콜백(callback) 함수를 정의할 수 있습니다.
IB Calendar 의 일정을 서버에 추가/수정/삭제는 아래의 함수를 통하여 작업해 주셔야 합니다.

### eventAdd

> 달력에 일정(Event) 이 새롭게 추가 될때마다 발생되는 callback 함수를 정의합니다.

    eventSources: [
        // your event source
        {
            id: "IBCalendar1"
            eventAdd: function(info) {
                // jquery ajax 를 이용한 통신
                // 비동기 문제로 인해 반드시 async: false 설정해야 한다.
                $.ajax({
                    url: "/data/ibcalendar/devsample",
                    method: "POST",
                    async: false,
                    contentType: "application/json",
                    dataType: "json",
                    data: JSON.stringify({
                        events: info.eventInputs   // 추가할 일정(Event)들의 event 객체 배열
                    }),
                    success: function (result) {
                    },
                    error: function (xhr, status, errorThrown) {
                    }
                });
            }
        }
    ]

### eventChange

> 달력에 일정(Event) 정보 수정시 발생하는 callback 함수를 정의합니다.

    eventSources: [
        // your event source
        {
            id: "IBCalendar1"
            eventChange: function(info) {
                // jquery ajax 를 이용한 통신
                // 비동기 문제로 인해 반드시 async: false 설정해야 한다.
                $.ajax({
                    url: "/data/ibcalendar/devsample",
                    method: "PUT",
                    async: false,
                    contentType: "application/json",
                    dataType: "json",
                    data: JSON.stringify({
                        events: info.eventInputs   // 수정할 일정(Event)들의 event 객체 배열
                    }),
                    success: function (result) {
                    },
                    error: function (xhr, status, errorThrown) {
                    }
                });
            }
        }
    ]

### eventRemove

> 달력에 일정(Event) 삭제시 발생하는 callback 함수를 정의합니다.

    eventSources: [
        // your event source
        {
            id: "IBCalendar1"
            eventRemove: function(info) {
                // jquery ajax 를 이용한 통신
                // 비동기 문제로 인해 반드시 async: false 설정해야 한다.
                $.ajax({
                    url: "/data/ibcalendar/devsample",
                    method: "DELETE",
                    async: false,
                    contentType: "application/json",
                    dataType: "json",
                    data: JSON.stringify({
                        events: info.eventInputs   // 삭제할 일정(Event)들의 event 객체 배열
                    }),
                    success: function (result) {
                    },
                    error: function (xhr, status, errorThrown) {
                    }
                });
            }
        }
    ]