# 기초 개발자 교육 (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)을 추가/삭제/변경하는 방법은 두가지가 있습니다.

- 함수를 통한 일정(Event) 추가/삭제/변경

    calendar.addEvent({
       id: "evnet1"
       title: "newEvent",
       start: "2020-05-25",
       end: "2020-05-28",
       allDay: true,
       memo: "event memo",
       toolTip: "newEvent"
    }, "eventSource1"); // 일정 추가

    calendar.setEventStart("event1", "2020-05-20"); // 일정의 시작 날짜 정보를 변경

    calendar.removeEvent("evnet1") // 일정 삭제

- UI/UX 를 통한 일정(Event) 추가/삭제/변경

생성 옵션 editable, selectable 가 활성화 되어 있어야 합니다.

    options = {
        editable: true,
        selectable: true
    };

일정을 추가할 달력의 날짜 영역을 클릭 시 임시 일정이 추가되면서 이벤트 편집창이 보여지게 되고, 저장 버튼을 클릭시 일정이 추가됩니다.
달력의 일정을 클릭 시 이벤트 요약 창이 보여지고 편집 아이콘을 클릭 시 편집창이 보여지며 해당 일정에 대한 정보를 수정할 수 있습니다.
이벤트 요약 창의 삭제 아이콘을 클릭 시 이벤트를 삭제할 수 있습니다.
일정 편집창에서도 삭제가 가능합니다.

2. 조회

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

3. 데이터 구조

달력 객체 구조

### Read More

- 파일 구성 introduction
- Quick Start getting started
- 달력 객체 구조 getting stated
- 일정(Event) 조회 및 서버 연동
- Date Parsing appendix
- TimeZone props

### Since

product | version | desc
--- | --- | ---
core | 1.5.0.0 | 기능 추가
core | 1.6.0.0 | `toolTip` 추가