목차
IB Calendar 기본 파일 구성에 대해 설명합니다.(참고)
간단하게 javascript를 이용하여 캘린더 객체를 생성하는 방법을 설명합니다.(참고)
let id = "calendar1",
heParent = document.getElementById("calendar-container"),
options = {
locale: "ko",
editable: true,
selectable: true
};
let objCalendar = IBCalendar.create(
id, // 생성하는 캘린더 이름
heParent, // 캘린더가 생성될 div 요소
options // IB Calendar 기본 옵션 설정
);
objCalendar.render(); // 캘린더 렌더링
IB Calendar 함수 와 이벤트에 대한 기본적인 사용법을 설명합니다.
함수명 | 기능설명 |
---|---|
getEvents | 달력의 모든 일정(Event) 정보 객체들을 배열 형태로 반환 |
getEventById | id에 해당하는 일정(Event) 정보 객체를 반환 |
getEventSourceById | id에 해당하는 eventSource 정보를 반환 |
addEvent | 일정(Event)을 추가 |
addEventSource | eventSource를 추가 |
changeView | 뷰(View)를 전환 |
destroy | 달력 객체를 삭제 |
getViewType | 현재 표시하고 있는 뷰(View)의 타입(이름)을 반환 |
gotoDate | 달력 UI를 지정한 날짜로 이동 |
setOption | 지정한 옵션(option)을 입력 받은 값으로 설정 |
getOption | 지정한 옵션(option)의 값을 반환 |
updateSize | 달력 UI의 크기를 다시 조정 |
render | 달력 UI를 생성 |
removeEvent | id에 해당하는 일정(Event)을 삭제 |
select | 특정 범위의 날짜를 선택 상태로 변경 |
today | 달력 UI를 현재의 날짜로 이동 |
unselect | 모든 선택 상태를 clear |
이벤트명 | 기능설명 |
---|---|
dateClick | 사용자가 날짜 또는 시간을 클릭하면 발생 하는 콜백(callback) 함수 |
eventClick | 사용자가 일정(Event)을 클릭 시 발생 하는 콜백(callback) 함수 |
loading | 일정(Event) 정보를 가져오는 Fetch 시작/종료 시 발생 하는 콜백(callback) 함수 |
select | 사용자가 마우스로 날짜 또는 시간을 Drag and Drop으로 선택 시 발생 하는 콜백(callback) 함수 |
unselect | 기존에 선택되어 있던 영역이 해제될 때 발생 하는 콜백(callback) 함수 |
windowResize | 브라우저 창의 크기가 변경되었을 때 캘린더 UI의 크기가 변경된 후 발생 하는 콜백(callback) 함수 |
calendar.addEvent({
id: "evnet1"
title: "newEvent",
start: "2020-05-25",
end: "2020-05-28",
allDay: true,
memo: "event memo"
}, "eventSource1"); // 일정 추가
calendar.setEventStart("event1", "2020-05-20"); // 일정의 시작 날짜 정보를 변경
calendar.removeEvent("evnet1") // 일정 삭제
생성 옵션 editable, selectable 가 활성화 되어 있어야 합니다.
options = {
editable: true,
selectable: true
};
일정을 추가할 달력의 날짜 영역을 클릭 시 임시 일정이 추가되면서 이벤트 편집창이 보여지게 되고, 저장 버튼을 클릭시 일정이 추가됩니다.
달력의 일정을 클릭 시 이벤트 요약 창이 보여지고 편집 아이콘을 클릭 시 편집창이 보여지며 해당 일정에 대한 정보를 수정할 수 있습니다.
이벤트 요약 창의 삭제 아이콘을 클릭 시 이벤트를 삭제할 수 있습니다.
일정 편집창에서도 삭제가 가능합니다.
product | version | desc |
---|---|---|
core | 1.5.0.0 | 기능 추가 |