# 스케줄러 생성 및 데이터 바인딩

## Content

`FlexScheduler` 컨트롤을 생성하고, 이벤트 컬렉션을 바인딩한 다음 컨트롤이 처음 렌더링될 때 표시할 날짜를 설정합니다. 이는 리소스, 뷰, 편집 또는 탐색 기능을 구성하기 전에 필요한 최소 설정입니다.

## 사전 요구 사항

컨트롤을 생성하기 전에 스케줄러에 필요한 패키지를 설치합니다.

```bash
npm install @mescius/wijmo @mescius/wijmo.input @mescius/wijmo.scheduler @mescius/wijmo.styles
```

`@mescius/wijmo.scheduler`는 `@mescius/wijmo` 및 `@mescius/wijmo.input`에 의존합니다. Scheduler 모듈은 내부적으로 `Popup`, `InputDateTime`, `MultiAutoComplete`, `InputDate` 등의 입력 컨트롤을 사용합니다. 스타일 패키지는 스케줄러의 레이아웃과 모양을 구성하는 데 필요한 CSS를 제공합니다.

* webpack, Vite, Angular CLI와 같은 번들러를 사용하는 경우 이러한 종속성은 패키지 메타데이터를 통해 확인됩니다.
* import map을 사용하는 브라우저 네이티브 ES 모듈 환경에서는 세 가지 Wijmo JavaScript 모듈에 대한 항목을 추가합니다.

애플리케이션에 이미 `@mescius/wijmo.all`이 설치되어 있다면 필요한 패키지가 포함되어 있습니다. 애플리케이션 코드에서 Scheduler 모듈과 Wijmo 스타일시트를 명시적으로 가져옵니다.

## 호스트 요소 추가

스케줄러는 호스트 요소의 크기에 맞춰 표시됩니다. 컨트롤을 생성하기 전에 호스트 요소의 높이를 지정하세요. 높이가 지정되지 않으면 올바르게 구성된 스케줄러도 빈 화면처럼 보일 수 있습니다.

```html
<div id="scheduler" style="height: 640px"></div>
```

>type=note
> 반응형 레이아웃에서는 인라인 스타일 대신 스타일시트에서 높이를 지정하세요. 또한 생성자가 실행될 때 해당 요소가 존재하고 화면에 표시된 상태인지 확인하세요.

## 이벤트 데이터 바인딩

다음 예제에서는 이벤트 하나를 포함하는 스케줄러를 생성합니다. `itemsSource`에는 일반 배열 또는 Wijmo `CollectionView`를 사용할 수 있습니다.

```ts
import * as wjCore from '@mescius/wijmo';
import * as wjScheduler from '@mescius/wijmo.scheduler';
import '@mescius/wijmo.styles/wijmo.css';

const events = new wjCore.CollectionView([
  { title: 'Planning', beginsAt: new Date(2026, 7, 24, 9), endsAt: new Date(2026, 7, 24, 10) },
]);

const scheduler = new wjScheduler.FlexScheduler('#scheduler', {
  itemsSource: events,
  eventFields: { subject: 'title', start: 'beginsAt', end: 'endsAt' },
  displayDate: new Date(2026, 7, 24),
});
```

`eventFields`에는 각 원본 항목의 속성명이 지정됩니다. `start`와 `end` 매핑은 필수입니다. 사용자가 이벤트를 식별할 수 있도록 `subject`도 매핑하는 것이 좋습니다. 유효한 `Date` 객체를 사용하고 `start`가 `end`보다 이른지 확인하세요.

![이벤트_데이터_바인딩](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8ecc18d2-feec-4d15-bd72-3d98a7b4cefa/2-1-20261019.d1882c.png)

원본 데이터에서 이미 스케줄러의 필드명을 사용하고 있다면 매핑을 생략할 수 있습니다.

```ts
const scheduler = new wjScheduler.FlexScheduler('#scheduler', {
  itemsSource: [{ subject: 'Planning', start: new Date(2026, 7, 24, 9), end: new Date(2026, 7, 24, 10) }],
  displayDate: new Date(2026, 7, 24),
});
```

## 초기 뷰 선택

`definition`을 지정하지 않으면 스케줄러는 기본 제공 뷰를 사용합니다. 기본 제공 뷰로 시작하려면 프리셋을 사용해 정의를 생성하고 이를 할당합니다. 사용자 지정 레이아웃을 사용하려면 `SchedulerDefinition` 객체를 할당합니다.

```ts
scheduler.definition = wjScheduler.createSchedulerDefinitionPreset(
  wjScheduler.SchedulerBuiltInViewItem.Week
);
```

![초기뷰](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8ecc18d2-feec-4d15-bd72-3d98a7b4cefa/2-2-20261019.3be65d.png)

컨트롤이 생성될 때 표시할 날짜를 `displayDate`에 설정합니다. 활성 `definition`에 따라 해당 날짜를 기준으로 표시 범위가 결정됩니다. 뷰 정의 구성에 대한 자세한 내용은 [뷰 구성 및 일정 탐색](/wijmo/docs/Topics/scheduler/configure-views-and-navigate-the-schedule)을 참조하시기 바랍니다.

## 바인딩된 컬렉션 업데이트

변경 사항을 추적하거나 저장해야 한다면 `CollectionView`를 사용하세요. 화면에 렌더링된 이벤트 요소를 직접 수정하지 말고, 원본 컬렉션의 데이터를 업데이트하세요.

```ts
events.addNew({ title: 'Review', beginsAt: new Date(2026, 7, 26, 8), endsAt: new Date(2026, 7, 26, 9) });
events.commitNew();
```

![컬렉션업데이트](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8ecc18d2-feec-4d15-bd72-3d98a7b4cefa/2-3-20261019.ceb314.png)
스케줄러는 바인딩된 컬렉션의 변경 사항을 감지합니다. 변경 사항을 검증하고 저장하려면 [이벤트 생성, 편집 및 삭제](/wijmo/docs/Topics/scheduler/create--edit--and-delete-events)에 설명된 CRUD 이벤트를 사용하시기 바랍니다.