달력 UI에 일정(Event)을 조회하여 표시하는 방법입니다.
array
| function
- JSON Array
options = {
eventSources: [
{
id: "eventSource1",
events: [
{
id: "eventSource1-event1",
title: "event1",
start: "2020-06-01",
end: "2020-06-02",
allDay: true
},
{
id: "eventSource1-event2",
title: "event2",
start: "2020-06-05",
end: "2020-06-07",
allDay: true
},
.
.
.
],
},
{
id: "eventSource2",
events: [
{
id: "eventSource2-event3",
title: "event3",
start: "2020-06-09T12:30:00",
end: "2020-06-09T13:30:00",
allDay: false
},
.
.
.
]
}
};
- Function
options = {
eventSources: [
{
id: "eventSource1",
events: function(info, success, failure) {
$.ajax(
{
"url": "https://URL"
"method": "GET",
"async": false,
"dataType": "json",
"data": {
start: IBCalendar.DateTime.fromJSDate(info.start).toISO(),
end: IBCalendar.DateTime.fromJSDate(info.end).toISO()
},
success: function (data, status, xhr) {
success(data); // 해당 함수에 일정 정보를 인자로 호출 시켜주어야 달력에 렌더링 됩니다.
},
error: function (xhr, status, errorThrown) {
failure(status);
}
}
);
}
}
]
};
주의 Ajax 호출시 비동기 문제로 인해 반드시 "async": false 해주어야 합니다.
product | version | desc |
---|---|---|
core | 1.5.0.0 | 기능 추가 |