뷰 구성 및 일정 탐색

일반적인 달력 레이아웃에는 기본 제공 뷰를 사용하거나, 특정 시간 및 리소스 배치를 위해 사용자 지정 SchedulerDefinition을 지정할 수 있습니다.

기본 제공 뷰 사용

스케줄러는 Day(일간), Week(주간), Work Week(평일), Month(월간), Timeline Day(일간 타임라인), Timeline Week(주간 타임라인), Timeline Month(월간 타임라인) 뷰를 기본 제공합니다. createSchedulerDefinitionPreset에 SchedulerBuiltInViewItem 값을 전달해 뷰 정의를 생성한 다음, 이를 스케줄러에 할당합니다.

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

활성 정의는 표시되는 날짜 범위와 이벤트를 시간에 따라 배치할지(Timed), 요약 셀 안에 배치할지(Summary)를 제어합니다. 초기 표시 범위의 기준 날짜를 지정하려면 displayDate를 설정합니다.

Day(일간), Week(주간), Work Week(평일), Timeline Day(일간 타임라인), Timeline Week(주간 타임라인)는 시간 기반 뷰입니다. Month(월간)와 Timeline Month(월간 타임라인)는 요약 뷰입니다. 축 배치를 변경하거나 리소스 차원을 추가하거나 표시할 시간 슬롯을 필터링하려면 사용자 지정 SchedulerDefinition을 생성합니다.

일정 탐색

기본 제공 도구 모음에는 이전(previous) 및 다음(next) 버튼과 날짜 선택기가 있습니다. 별도의 애플리케이션 코드를 추가하지 않아도 사용자는 이 컨트롤로 일정을 탐색할 수 있습니다.

이전 및 다음 버튼을 사용하면 표시되는 날짜 범위를 앞뒤로 이동할 수 있습니다. 이동 간격은 활성 뷰에 따라 달라집니다. 예를 들어 Day(일간) 뷰에서는 하루씩, Week(주간) 뷰에서는 한 주씩 이동합니다. 날짜 선택기를 열어 특정 날짜를 선택하거나 Today(오늘) 버튼을 사용해 현재 날짜로 돌아갈 수 있습니다.

뷰 도구 모음 구성

기본 도구 모음을 숨기거나 뷰 항목을 애플리케이션에서 정의한 목록으로 바꿀 수 있습니다.

// scheduler.showToolbar = false;

scheduler.toolbarViewItems = [
  { name: 'Day', key: wjScheduler.SchedulerBuiltInViewItem.Day },
  { name: 'Week', key: wjScheduler.SchedulerBuiltInViewItem.Week },
  { name: 'Month', key: wjScheduler.SchedulerBuiltInViewItem.Month },
];

기본 제공 키를 사용하는 경우 definition을 생략하면 스케줄러가 해당 정의를 제공합니다. 사용자 지정 문자열 키를 사용하려면 도구 모음 항목의 key와 일치하는 key를 가진 정의가 필요합니다.

const teamDay = wjScheduler.createSchedulerDefinitionPreset(
  wjScheduler.SchedulerBuiltInViewItem.Day
);
teamDay.key = 'teamDay';
scheduler.toolbarViewItems = [
  { name: 'Day', key: wjScheduler.SchedulerBuiltInViewItem.Day },
  { name: 'Day by team', key: 'teamDay', definition: teamDay },
];

toolbarViewItems를 변경할 때는 새 배열을 할당합니다. 중복되거나 유효하지 않은 키는 처음 발견된 유효 항목 이후 무시됩니다. 선택된 항목은 키가 scheduler.definition.key와 일치하는 항목입니다.

바인딩을 변경하기 전에 createSchedulerDefinitionPreset을 사용하면 기본 제공 정의의 독립적인 복사본에서 시작할 수 있습니다. 사용 가능한 기본 제공 프리셋은 day, week, workWeek, month, timelineDay, timelineWeek, timelineMonth입니다.

사용자 지정 정의 생성

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

시간 바인딩은 날짜 또는 시간 슬롯을 생성합니다. 리소스 바인딩은 해당 리소스 차원을 확장합니다. 바인딩 순서에 따라 중첩 순서가 결정됩니다. 리소스의 fieldExpr는 scheduler.resources에 정의된 설명자와 일치해야 합니다.

표시할 시간 슬롯 필터링

레이아웃에서 특정 축 항목을 제외하려면 시간 축 바인딩의 visible 속성을 사용합니다.

const workWeek = wjScheduler.createSchedulerDefinitionPreset(
  wjScheduler.SchedulerBuiltInViewItem.Week
);
workWeek.key = 'workWeekCustom';
workWeek.columns.bindings[0].visible = args =>
  args.dayOfWeek >= wjScheduler.SchedulerDayOfWeek.Monday &&
  args.dayOfWeek <= wjScheduler.SchedulerDayOfWeek.Saturday;
scheduler.definition = workWeek;

근무 시간 동작을 구성하려면 workDays, workHours, nonworkingTime을 사용합니다. 숨겨진 시간 슬롯과 비근무 시간으로 표시된 슬롯은 서로 다릅니다. 자세한 내용은 근무 시간 구성을 참조하시기 바랍니다.

실행 중 뷰 전환

사용자가 뷰를 변경하면 전체 정의를 새로 할당합니다. 정의가 변경되면 스케줄러는 축과 이벤트 위치를 다시 계산합니다.

viewSelect.onchange = () => {
  const viewType = viewSelect.value === 'timeline'
    ? wjScheduler.SchedulerBuiltInViewItem.TimelineWeek
    : wjScheduler.SchedulerBuiltInViewItem.Week;
  scheduler.definition = wjScheduler.createSchedulerDefinitionPreset(viewType);
};