캘린더 객체 초기화(options)
IBCalendar.create(id, element, options);
id // 캘린더를 구분하기 위한 ID
element // 캘린더를 생성할 부모 HTML 컨테이너
options // 캘린더 생성 옵션
캘린더 설정 예)
let id = "calendar1",
element = document.getElementById("calendar-container"),
options = {
headerToolbar: { // 헤더 툴바 표시 정보
left: "today prev next",
center: "title",
right: "dayGridMonth,timeGridWeek,listMonth"
},
height: "100%",
eventClick: function (info) {
info.showEventPopup(); // 클릭한 일정(Event)의 정보를 시각적으로 보여주는 Popup 창 호출
},
eventSources: [
{
id: "IBLeaders",
events: calendarData // 일정(Event) 정보 데이터
}
]
};
let calendar1 = IBCalendar.create(id, element, options); // 캘린더 생성
calendar1.render(); // 생성한 캘린더를 실제 DOM 에 렌더링
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": "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) 데이터 정보
}
product | version | desc |
---|---|---|
core | 1.5.0.0 | 기능 추가 |