리소스 구성

리소스를 사용하면 회의실, 팀, 담당자, 장비 등을 기준으로 일정을 구분해 표시할 수 있습니다. 리소스 설명자는 각 이벤트의 특정 필드를 사용 가능한 리소스 값과 연결해, 이벤트가 어떤 리소스에 할당되는지 정의합니다.

리소스 설명자 정의

import * as wjScheduler from '@mescius/wijmo.scheduler';

const events = [
  { subject: 'Project planning', start: new Date(2026, 7, 24, 9), end: new Date(2026, 7, 24, 10), roomId: 'room-a' },
  { subject: 'Design review', start: new Date(2026, 7, 24, 11), end: new Date(2026, 7, 24, 12), roomId: 'room-b' },
];

// 회의실
const rooms = [
  { id: 'room-a', text: 'Conference room A', background: '#e8e3f4', color: '#3e276f' },
  { id: 'room-b', text: 'Conference room B', background: '#dbeeed', color: '#03544c' },
];
// 리소스
const resource = [{
  fieldExpr: 'roomId',
  label: 'Room',
  dataSource: rooms,
  valueExpr: 'id',
  displayExpr: 'text',
  backgroundColorExpr: 'background',
  foreColorExpr: 'color',
}];

const scheduler = new wjScheduler.FlexScheduler('#scheduler', {
  itemsSource: events,
  resources: resource,
  displayDate: new Date(2026, 7, 24),
});

리소스설명자

fieldExpr는 리소스 값을 저장하는 이벤트 속성과 일치해야 합니다. dataSource에는 리소스 레코드가 포함됩니다. valueExpr는 이벤트에 저장되는 값을 지정하고, displayExpr는 헤더와 편집기에 표시할 텍스트를 지정합니다.

리소스 속성

속성	용도
`fieldExpr`	리소스 값을 포함하는 이벤트 속성입니다.
`label`	기본 제공 이벤트 편집기에서 리소스 필드 옆에 표시되는 레이블입니다.
`dataSource`	리소스 레코드의 배열 또는 컬렉션입니다.
`valueExpr`	이벤트 값으로 사용되는 리소스 레코드의 속성입니다.
`displayExpr`	사용자에게 표시되는 리소스 레코드의 속성입니다.
`backgroundColorExpr`	이벤트 배경색에 사용되는 선택적 속성입니다.
`foreColorExpr`	이벤트 텍스트 색상에 사용되는 선택적 속성입니다.
`allowMultiple`	기본 제공 이벤트 편집기에서 이 리소스 필드의 값을 여러 개 선택할 수 있는지 지정합니다. 기본값은 `false`입니다.

valueExpr 또는 displayExpr를 지정하지 않으면 스케줄러는 각 리소스 데이터의 id 또는 text 속성을 사용합니다. 애플리케이션에서 다른 속성명을 사용한다면 해당 표현식을 직접 지정해야 합니다.

backgroundColorExpr와 foreColorExpr는 색상 값을 직접 설정하는 속성이 아니라, 각 리소스 데이터에서 배경색과 글자색에 사용할 값을 가져올 속성을 지정합니다.

기본 제공 이벤트 편집기에서는 리소스 선택 항목 옆에 label이 표시됩니다. 리소스 필드를 구분하려면 Room이나 Team처럼 용도를 나타내는 이름을 지정하면 됩니다. label을 생략하거나 빈 문자열로 설정하면 편집기에서 현재 언어에 맞는 기본 리소스 레이블을 사용합니다.

여러 리소스 차원 사용

리소스 차원마다 설명자를 하나씩 추가합니다. 각 이벤트에는 해당 이벤트에 적용되는 모든 리소스 설명자에 대응하는 속성이 있어야 합니다.

const events = [
  { subject: 'Project planning', start: new Date(2026, 7, 24, 9), end: new Date(2026, 7, 24, 10), teamId: 'team-a', roomId: 'room-a' },
  { subject: 'Design review', start: new Date(2026, 7, 24, 11), end: new Date(2026, 7, 24, 12), roomId: 'room-b' },
];

const teams = [
  { id: 'team-a', text: 'Design team' },
  { id: 'team-b', text: 'Engineering team' },
];

scheduler.itemsSource = events;

scheduler.resources = [
  { fieldExpr: 'teamId', label: 'Team', dataSource: teams, valueExpr: 'id', displayExpr: 'text' },
  { fieldExpr: 'roomId', label: 'Room', dataSource: rooms, valueExpr: 'id', displayExpr: 'text' },
];

하나 이상의 리소스 바인딩이 축에 배치된 경우 설명자의 순서에 따라 중첩 순서가 결정됩니다. 리소스 그룹을 표시하려면 활성 definition에서 리소스 필드를 바인딩해야 합니다.

리소스차원

여러 리소스 값 허용

기본 제공 이벤트 편집기에서 리소스 필드의 값을 여러 개 선택할 수 있도록 하려면 allowMultiple: true로 설정합니다. 할당된 리소스 값은 이벤트 항목의 배열에 저장합니다.

const event = [
  { subject: 'Project planning', start: new Date(2026, 7, 24, 9), end: new Date(2026, 7, 24, 10), roomId: ['room-a', 'room-b'] },
];

scheduler.resources = [{
  fieldExpr: 'roomId', label: 'Rooms', dataSource: rooms,
  valueExpr: 'id', displayExpr: 'text', allowMultiple: true,
}];

allowMultiple을 생략하거나 false로 설정하면 이벤트 편집기는 리소스 값을 두 개 이상 선택하지 못하도록 검증합니다. 여러 값을 허용하면 편집기는 선택 항목을 배열로 저장합니다.

리소스값허용

리소스 색상 적용

이벤트가 리소스 레코드의 색상을 상속해야 하는 경우 색상 속성을 매핑합니다.

scheduler.resources = [{
  fieldExpr: 'roomId', dataSource: [
    { id: 'room-a', text: 'Conference room A', background: '#bfdbfe', foreground: '#1e3a8a' },
    { id: 'room-b', text: 'Conference room B', background: '#bbf7d0', foreground: '#14532d' },
  ],
  valueExpr: 'id', displayExpr: 'text',
  backgroundColorExpr: 'background', foreColorExpr: 'foreground',
}];

리소스 레인 표시

리소스 레인은 회의실, 팀, 담당자 등 특정 리소스에 해당하는 일정을 표시하는 행 또는 열입니다. 해당 리소스에 할당된 이벤트는 그 레인에 표시됩니다.

resources를 설정하면 스케줄러에서 리소스 값을 사용할 수 있지만, 이 설정만으로 리소스 레인이 자동으로 생성되지는 않습니다. 레인을 표시하려면 활성화된 definition에서 리소스 필드를 행 또는 열 축에 연결해야 합니다. 자세한 내용은 뷰 구성 및 일정 탐색을 참조하세요.

scheduler.definition = {
  key: 'roomDay',
  rows: { bindings: [{ type: wjScheduler.SchedulerAxisBindingType.Time, unit: wjScheduler.SchedulerTimeUnit.Hour }] },
  columns: { bindings: [{ type: wjScheduler.SchedulerAxisBindingType.Resource, fieldExpr: 'roomId' }] },
  cellSemantic: wjScheduler.SchedulerCellSemantic.Timed,
};

축에 연결된 fieldExpr는 리소스 설명자의 fieldExpr와 일치해야 합니다. 리소스 레인에서 새로 생성한 이벤트에는 해당 레인의 리소스 값이 자동으로 할당됩니다.

리소스레인

리소스 값 필터링

사용 가능한 리소스 값을 변경해야 하는 경우 리소스 데이터 소스를 필터링합니다. 이는 이벤트 컬렉션을 필터링하는 것과 다릅니다. 리소스 필터링은 사용 가능한 레인을 변경하고, 이벤트 필터링은 표시되는 이벤트를 변경합니다. 이벤트 필터링에 대한 자세한 내용은 이벤트 조회, 필터링 및 새로고침을 참조하세요.