일정(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"}
]
{
"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)의 메모 (선택사항)
}
반복 일정의 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 형태의 구조를 가진 데이터를 서버에서 받아온 뒤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 을 통해 제어하여 정의할 수 있습니다.
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 의 일정을 서버에 추가/수정/삭제는 아래의 함수를 통하여 작업해 주셔야 합니다.
달력에 일정(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) {
}
});
}
}
]
달력에 일정(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) {
}
});
}
}
]
달력에 일정(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) {
}
});
}
}
]