# Configure Views and Navigate the Schedule

## Content

Choose a built-in view for common calendar layouts, or assign a custom `SchedulerDefinition` for a specific time and resource arrangement.

## Use a built-in view

Scheduler provides Day, Week, Work Week, Month, Timeline Day, Timeline Week, and Timeline Month definitions. Create a definition from a `SchedulerBuiltInViewItem` value with `createSchedulerDefinitionPreset`, then assign it to the Scheduler.

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

The active definition controls the visible range and whether events are positioned by time (`Timed`) or arranged inside summary cells (`Summary`). Set `displayDate` to the date around which the initial range is displayed.

| Built-in view | Display range and layout | Event presentation | Example |
| ------------- | ------------------------ | ------------------ | ------- |
| **Day** | Displays the date specified by `displayDate`. Hours are arranged vertically, with the day shown as a single column. | Events are positioned and sized according to their start and end times. | ![image](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/image-20260909.03a442.png?width=600) |
| **Week** | Displays the week containing `displayDate`. Hours are arranged vertically, and the days of the week are shown as columns. | Events are positioned and sized according to their start and end times. | ![image](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/image-20260909.536ab6.png?width=600) |
| **Work Week** | Displays the work week containing `displayDate`. By default, the view uses the Week layout and shows Monday through Friday. | Events are positioned and sized according to their start and end times. | ![image](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/image-20260909.14a040.png?width=600) |
| **Month** | Displays the month containing `displayDate` as a conventional calendar grid, with weeks as rows and days of the week as columns. | Events are arranged chronologically within each day cell rather than sized by duration. | ![image](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/image-20260909.2d20d8.png?width=600) |
| **Timeline Day** | Displays the date specified by `displayDate` on a horizontal time axis. The day is divided into hourly intervals. | Events are positioned and sized horizontally according to their start and end times. | ![image](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/image-20260909.08fa86.png?width=600) |
| **Timeline Week** | Displays the week containing `displayDate` on a horizontal time axis. Each day is divided into hourly intervals. | Events are positioned and sized horizontally according to their start and end times. | ![image](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/image-20260909.1c6a62.png?width=600) |
| **Timeline Month** | Displays the month containing `displayDate` as a horizontal sequence of day cells. | Events are arranged chronologically within each day cell rather than sized by duration. | ![image](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/image-20260909.1a86de.png?width=600) |

Day, Week, Work Week, Timeline Day, and Timeline Week are timed views. Month and Timeline Month are summary views. To change the axis arrangement, add resource dimensions, or filter visible time slots, create a custom SchedulerDefinition.

## Navigate the schedule

The built-in toolbar provides Previous and Next buttons and a date picker. Users can navigate the schedule with these controls without additional application code.
![image](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/image-20260909.fae878.png?width=400)
Use the Previous and Next buttons to move the visible date range backward or forward. The navigation interval depends on the active view. For example, Day moves by one day, while Week moves by one week. Open the date picker to select a specific date or use the Today button to return to the current date.

## Configure the view toolbar

Hide the default toolbar or replace its view items with an application-defined list.

| Scenario | Required configuration |
| -------- | ---------------------- |
| Use a built-in view | Create a definition with `createSchedulerDefinitionPreset` and assign it to `definition`. |
| Add a built-in view button | Use a `SchedulerBuiltInViewItem` key; `definition` may be omitted. |
| Add a custom view button | Provide a string `key` and a definition with the same `key`. |
| Override a built-in view | Use the built-in key and provide the replacement definition. |

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

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

![image](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/image-20260909.1e837f.png?width=800)
For a built-in key, Scheduler supplies the corresponding definition when `definition` is omitted. A custom string key requires a definition whose `key` matches the toolbar item's `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 },
];
```

![image](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/image-20260909.077aa9.png?width=800)
Assign a new array when changing `toolbarViewItems`. Duplicate or invalid keys are ignored after the first valid item. The selected item is the one whose key matches `scheduler.definition.key`.
Use `createSchedulerDefinitionPreset` to start from an independent copy of a built-in definition before changing its bindings. The available built-in presets are `day`, `week`, `workWeek`, `month`, `timelineDay`, `timelineWeek`, and `timelineMonth`.

## Create a custom definition

```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;
```

Time bindings create date or time slots. Resource bindings expand the corresponding resource dimension. Binding order determines nesting order. The resource `fieldExpr` must match a descriptor in `scheduler.resources`.
![image](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/image-20260909.36b160.png?width=800)

## Filter visible time slots

Use `visible` on a time-axis binding when the layout must omit specific axis items.

| Setting | Hides axis items | Styles cells | Rejects edits |
| ------- | ---------------- | ------------ | ------------- |
| Binding `visible` | Yes | No | No |
| `workDays` / `workHours` | No | Yes | No |
| `nonworkingTime` | No | Yes | No |
| `conflictChecked` | No | No | Yes, when canceled |

```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;
```

Use `workDays`, `workHours`, and `nonworkingTime` for working-time behavior. A hidden time slot is different from a visible slot marked as non-working. See [Configure Working Time](/wijmo/docs/Topics/scheduler/configure-working-time).
![image](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/image-20260909.8345d8.png?width=800)

## Switch views at runtime

Assign a complete definition when the user changes views. Scheduler recalculates its axes and event positions after the definition changes.

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