달력 객체 구조

캘린더 객체 초기화(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"}
]

일반 일정(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) 데이터 정보
    }

Read More

Since

product version desc
core 1.5.0.0 기능 추가