# overview

## Content

`FlexScheduler` displays and edits time-based business records in calendar views. An application supplies event data, optional resources, and a view definition; Scheduler renders the resulting time and resource structure and provides navigation and editing interactions.
![demo.gif](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/demo-20260908.68c9a1.gif?width=800)

## Scheduler Structure

Scheduler consists of a top toolbar area and a bottom surface area.
![image](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/image-20260908.748c73.png?width=800)

| Area | Purpose |
| ---- | ------- |
| Toolbar area | Provides date navigation, the calendar selector, and view buttons. |
| Surface area | Presents the axes, headers, cells, sections, and event items generated by the active `definition`. |

### Toolbar Area

The toolbar area controls the date range and active view.
![image](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/image-20260908.eefac8.png?width=800)

| Element | Description |
| ------- | ----------- |
| Previous/Next Navigator | Moves the visible date range backward or forward. |
| Calendar selector | Selects the date used as the anchor of the current view. |
| View buttons | Switches between available Scheduler views. |

Use `showToolbar: false` to hide the toolbar.

### Surface Area

The surface area is the visual presentation of the active `definition`.
![image](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/image-20260909.4d3672.png?width=800)

| Element | Description |
| ------- | ----------- |
| Corner | The top-left area where the row header and column header intersect. |
| Row header | Labels rows generated by the active definition. |
| Column header | Labels columns generated by the active definition. |
| Cell | Represents a time range and optional resource context. |
| Active cell | The cell with focus or used to start an operation. |
| Section | A rendered group of cells and items. |
| Event item | The visual representation of a source item. |
| Fragment | One rendered piece of a source item. A single event can produce several fragments when it spans dates or resource lanes. |
| Lane | The continuous strip where events are positioned by time. In a view with resources, each resource value renders in its own lane. |

A source item is the object in `itemsSource` that supplies the event data. One source item can render as several fragments, and every fragment stays linked to that item.
Use `showRowHeaders: false` or `showColumnHeaders: false` to hide the corresponding header area.

## Quick Start

The following is a configuration-only example. It assumes that `wjScheduler` has been imported and that the page contains a `#scheduler` host element. See [Create and Bind Scheduler](/wijmo/docs/Topics/scheduler/create-and-bind-scheduler) for a runnable setup.

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

## Scheduler Configuration Model

| Input | Role | Question it answers |
| ----- | ---- | ------------------- |
| `itemsSource` | Supplies the event data. | Which events are displayed? |
| `eventFields` | Maps application properties to event fields. | Which properties contain title, start, and end? |
| `resources` | Defines resource dimensions and values. | Which rooms, teams, or people are assigned? |
| `definition` | Defines rows, columns, axes, and cell semantics. | In what format are time and resources displayed? |
| `displayDate` | Anchors the visible range. | Which date is shown? |
| `timeZone` | Controls date and time interpretation. | In which time zone is it displayed? |
| `workDays`, `workHours`, `nonworkingTime` | Describes hours and exceptions. | Which periods are working? |

Keep the source collection as the single source of truth. An event remains one source item even when rendered as several fragments.

## Recommended Implementation Order

1. Create the control with a host element that has a stable height.
2. Bind one valid event and map its start, end, and subject fields.
3. Add resource descriptors when events belong to resource dimensions.
4. Select a built-in view or define a custom row and column layout.
5. Configure working time and the display time zone when needed.
6. Enable CRUD, conflict validation, and mouse interactions required by the application.
7. Customize templates, menus, keyboard workflows, and advanced layouts.

## Find a Topic by Task

| Development task | Start here |
| ---------------- | ---------- |
| Install dependencies and create the control | [Create and Bind Scheduler](/wijmo/docs/Topics/scheduler/create-and-bind-scheduler) |
| Map application fields | [Configure Event Data](/wijmo/docs/Topics/scheduler/configure-event-data) |
| Query, filter, or refresh events | [Query, Filter, and Refresh Events](/wijmo/docs/Topics/scheduler/query--filter--and-refresh-events) |
| Add rooms, teams, people, or equipment | [Configure Resources](/wijmo/docs/Topics/scheduler/configure-resources) |
| Group, assign, or filter resources | [Configure Resources](/wijmo/docs/Topics/scheduler/configure-resources) |
| Select a view or navigate dates | [Configure Views and Navigate the Schedule](/wijmo/docs/Topics/scheduler/configure-views-and-navigate-the-schedule) |
| Build a custom axis layout | [Create Advanced Layouts](/wijmo/docs/Topics/scheduler/create-advanced-layouts) |
| Synchronize scrolling between schedules | [Synchronize Scrolling](/wijmo/docs/Topics/scheduler/synchronize-scrolling) |
| Define office hours or closures | [Configure Working Time](/wijmo/docs/Topics/scheduler/configure-working-time) |
| Display events across regions | [Configure Time Zones](/wijmo/docs/Topics/scheduler/configure-time-zones) |
| Create, edit, or delete events | [Create, Edit, and Delete Events](/wijmo/docs/Topics/scheduler/create--edit--and-delete-events) |
| Move or resize events | [Drag and Resize Events](/wijmo/docs/Topics/scheduler/move-and-resize-events) |
| Detect overlaps and unavailable time | [Detect and Handle Conflicts](/wijmo/docs/Topics/scheduler/detect-and-handle-conflicts) |
| Customize event content and templates | [Customize Event Display and Templates](/wijmo/docs/Topics/scheduler/customize-event-display-and-templates) |
| Customize context menus | [Customize Context Menus](/wijmo/docs/Topics/scheduler/customize-context-menus) |
| Identify a pointer target | [Hit Testing](/wijmo/docs/Topics/scheduler/hit-testing) |
| Configure keyboard focus and selection | [Keyboard Navigation, Focus, and Selection](/wijmo/docs/Topics/scheduler/keyboard-navigation--focus--and-selection) |
| Diagnose problems | [Troubleshooting](/wijmo/docs/Topics/scheduler/troubleshooting) |