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

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

사전 요구 사항

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

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 스타일시트를 명시적으로 가져옵니다.

호스트 요소 추가

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

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

이벤트 데이터 바인딩

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

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보다 이른지 확인하세요.

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

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 객체를 할당합니다.

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

컨트롤이 생성될 때 표시할 날짜를 displayDate에 설정합니다. 활성 definition에 따라 해당 날짜를 기준으로 표시 범위가 결정됩니다. 뷰 정의 구성에 대한 자세한 내용은 뷰 구성 및 일정 탐색을 참조하시기 바랍니다.

바인딩된 컬렉션 업데이트

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

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

스케줄러는 바인딩된 컬렉션의 변경 사항을 감지합니다. 변경 사항을 검증하고 저장하려면 이벤트 생성, 편집 및 삭제에 설명된 CRUD 이벤트를 사용하시기 바랍니다.