기초 개발자 교육 (appendix)

목차

  1. 제품 파일 구성
  2. 기본 캘린더 생성 방법
  3. 함수와 이벤트
  4. 렌더링과 데이터 로드

1. 제품 파일 구성

IB Calendar 기본 파일 구성에 대해 설명합니다.(참고)

2. 기본 캘린더 생성 방법

간단하게 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();  // 캘린더 렌더링

3. 함수와 이벤트

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) 함수

4. 렌더링과 데이터 로드

  1. 일정 추가/삭제/변경 캘린더 내에 일정(Event)을 추가/삭제/변경하는 방법은 두가지가 있습니다.
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
};

일정을 추가할 달력의 날짜 영역을 클릭 시 임시 일정이 추가되면서 이벤트 편집창이 보여지게 되고, 저장 버튼을 클릭시 일정이 추가됩니다.
일정 추가

달력의 일정을 클릭 시 이벤트 요약 창이 보여지고 편집 아이콘을 클릭 시 편집창이 보여지며 해당 일정에 대한 정보를 수정할 수 있습니다.
일정 변경 일정 변경

이벤트 요약 창의 삭제 아이콘을 클릭 시 이벤트를 삭제할 수 있습니다.
일정 삭제 일정 삭제

일정 편집창에서도 삭제가 가능합니다.
일정 삭제

  1. 조회

일정(Event) 조회 및 서버 연동

  1. 데이터 구조

달력 객체 구조

Read More

Since

product version desc
core 1.5.0.0 기능 추가