Views and slots

Views

ViewType is Day, Week, Month, Quarter or Year. Choose where to start with initialView, and which ones the selector offers with availableViews:

import { ResourceScheduler, ViewType } from "resource-scheduler";

<ResourceScheduler
  resources={resources}
  initialView={ViewType.Week}
  availableViews={[ViewType.Day, ViewType.Week, ViewType.Month]}
/>

Set allowViewChange={false} to hide the selector. onViewChange and onDateChange tell you when the user navigates.

ViewType is a const object plus a union type, so both ViewType.Week and view: ViewType work.

Slots in the day view

The day view is divided into slots. The week view and longer use whole days.

• slotDuration: minutes per slot. Default 60. Try 15 or 30.
• dayStartHour: first visible hour, 0 to 23. Default 0.
• dayEndHour: where the range ends (exclusive), 1 to 24. Default 24.

Dragging, resizing, selecting and scroll-to-time all snap to these slots. Events entirely outside the visible hours are not drawn; ones that cross the edge are clipped. Invalid values fall back to the defaults.

<ResourceScheduler
  resources={resources}
  initialView={ViewType.Day}
  slotDuration={30}
  dayStartHour={8}
  dayEndHour={18}
/>

Week start and weekends

The week view starts on Sunday. Set weekStartsOn (0 Sunday to 6 Saturday) to change it, and hideWeekends to leave Saturday and Sunday out of the week, month, quarter and year views. The title, keyboard navigation and drag all follow the days that are shown. An event that only falls on hidden days is not drawn; one that spans a weekend simply continues over the gap.

<ResourceScheduler
  resources={resources}
  initialView={ViewType.Week}
  weekStartsOn={1}
  hideWeekends
/>

Column widths

resourceColumnWidth, timeColumnWidth (day view) and dateColumnWidth (other views) take pixel values such as "140px". On narrow screens the defaults shrink.