일정(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, eventRemoveinfo.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) {
                }
            });
        }
    }
]