# 뷰 구성 및 일정 탐색

## Content

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

## 기본 제공 뷰 사용

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

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

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

| 기본 제공 뷰 | 표시 범위 및 레이아웃 | 이벤트 표시 방식 | 예시 |
| ------- | ------------ | --------- | --- |
| **Day(일간)** | `displayDate`에 지정된 날짜를 표시합니다. 시간이 세로로 배치되고 하루가 하나의 열로 표시됩니다. | 시작 시간과 종료 시간에 따라 이벤트의 위치와 크기가 결정됩니다. | ![일자](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8ecc18d2-feec-4d15-bd72-3d98a7b4cefa/4-1-20261019.e55115.png) |
| **Week(주간)** | `displayDate`가 포함된 한 주를 표시합니다. 시간이 세로로 배치되고 요일이 열로 표시됩니다. | 시작 시간과 종료 시간에 따라 이벤트의 위치와 크기가 결정됩니다. | ![주간](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8ecc18d2-feec-4d15-bd72-3d98a7b4cefa/4-2-20261019.ebaffb.png) |
| **Work Week(평일)** | `displayDate`가 포함된 근무 주간을 표시합니다. 기본적으로 Week 레이아웃을 사용하며 월요일부터 금요일까지 표시합니다. | 시작 시간과 종료 시간에 따라 이벤트의 위치와 크기가 결정됩니다. | ![근무주](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8ecc18d2-feec-4d15-bd72-3d98a7b4cefa/4-3-20261019.a0eecd.png) |
| **Month(월간)** | `displayDate`가 포함된 달을 일반적인 달력 그리드로 표시합니다. 주는 행으로, 요일은 열로 배치됩니다. | 이벤트의 지속 시간에 따라 크기를 조정하지 않고 각 날짜 셀 안에서 시간순으로 표시합니다. | ![월](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8ecc18d2-feec-4d15-bd72-3d98a7b4cefa/4-4-20261019.4fbb61.png) |
| **Timeline Day(일간 타임라인)** | `displayDate`에 지정된 날짜를 가로 시간 축에 표시합니다. 하루는 시간 단위 구간으로 나뉩니다. | 시작 시간과 종료 시간에 따라 이벤트가 가로 방향으로 배치되고 크기가 결정됩니다. | ![타임라인](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8ecc18d2-feec-4d15-bd72-3d98a7b4cefa/4-5-20261019.3931b1.png) |
| **Timeline Week(주간 타임라인)** | `displayDate`가 포함된 한 주를 가로 시간 축에 표시합니다. 각 날짜는 시간 단위 구간으로 나뉩니다. | 시작 시간과 종료 시간에 따라 이벤트가 가로 방향으로 배치되고 크기가 결정됩니다. | ![타임라인_주간](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8ecc18d2-feec-4d15-bd72-3d98a7b4cefa/4-6-20261019.8992ac.png) |
| **Timeline Month(월간 타임라인)** | `displayDate`가 포함된 달을 날짜 셀의 가로 배열로 표시합니다. | 이벤트의 지속 시간에 따라 크기를 조정하지 않고 각 날짜 셀 안에서 시간순으로 표시합니다. | ![타임라인_월](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8ecc18d2-feec-4d15-bd72-3d98a7b4cefa/4-7-20261019.0d7370.png) |

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

## 일정 탐색

기본 제공 도구 모음에는 이전(previous) 및 다음(next) 버튼과 날짜 선택기가 있습니다. 별도의 애플리케이션 코드를 추가하지 않아도 사용자는 이 컨트롤로 일정을 탐색할 수 있습니다.
![일정탐색](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8ecc18d2-feec-4d15-bd72-3d98a7b4cefa/4-8-20261019.4eee41.png)
이전 및 다음 버튼을 사용하면 표시되는 날짜 범위를 앞뒤로 이동할 수 있습니다. 이동 간격은 활성 뷰에 따라 달라집니다. 예를 들어 Day(일간) 뷰에서는 하루씩, Week(주간) 뷰에서는 한 주씩 이동합니다. 날짜 선택기를 열어 특정 날짜를 선택하거나 Today(오늘) 버튼을 사용해 현재 날짜로 돌아갈 수 있습니다.

## 뷰 도구 모음 구성

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

| 시나리오 | 필요한 설정 |
| ---- | ------ |
| 기본 제공 뷰 사용 | `createSchedulerDefinitionPreset`으로 정의를 생성하고 `definition`에 할당합니다. |
| 기본 제공 뷰 버튼 추가 | `SchedulerBuiltInViewItem` 키를 사용합니다. `definition`은 생략할 수 있습니다. |
| 사용자 지정 뷰 버튼 추가 | 문자열 `key`와 동일한 `key`를 가진 정의를 제공합니다. |
| 기본 제공 뷰 재정의 | 기본 제공 키를 사용하고 대체 정의를 제공합니다. |

```ts
// scheduler.showToolbar = false;

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

![뷰도구](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8ecc18d2-feec-4d15-bd72-3d98a7b4cefa/4-9-20261019.d63efe.png)

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

```ts
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 },
];
```

![기본정의](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8ecc18d2-feec-4d15-bd72-3d98a7b4cefa/4-10-20261019.412e5d.png)
`toolbarViewItems`를 변경할 때는 새 배열을 할당합니다. 중복되거나 유효하지 않은 키는 처음 발견된 유효 항목 이후 무시됩니다. 선택된 항목은 키가 `scheduler.definition.key`와 일치하는 항목입니다.

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

## 사용자 지정 정의 생성

```ts
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`에 정의된 설명자와 일치해야 합니다.

![사용자정의](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8ecc18d2-feec-4d15-bd72-3d98a7b4cefa/4-11-20261019.40c459.png)

## 표시할 시간 슬롯 필터링

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

| 설정 | 축 항목 숨김 | 셀 스타일 적용 | 편집 거부 |
| --- | ------- | -------- | ----- |
| 바인딩의 `visible` | 예 | 아니요 | 아니요 |
| `workDays` / `workHours` | 아니요 | 예 | 아니요 |
| `nonworkingTime` | 아니요 | 예 | 아니요 |
| `conflictChecked` | 아니요 | 아니요 | 취소된 경우 예 |

```ts
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`을 사용합니다. 숨겨진 시간 슬롯과 비근무 시간으로 표시된 슬롯은 서로 다릅니다. 자세한 내용은 [근무 시간 구성](/wijmo/docs/Topics/----/--------)을 참조하시기 바랍니다.

![슬롯필터링](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8ecc18d2-feec-4d15-bd72-3d98a7b4cefa/4-12-20261019.8ac8f1.png)

## 실행 중 뷰 전환

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

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