[]
        
(Showing Draft Content)

Configure Working Time

Configure recurring office hours and explicit exceptions so users can distinguish working and non-working periods. These settings affect styling and conflict checks; application permissions remain separate.

Working-time settings mark matching cells as non-working; they do not hide cells. To omit axis items, use a time binding's visible callback in a custom definition. Cells remain interactive unless application code cancels an operation. Use conflictChecked when non-working overlaps must be rejected.

Choose a setting

Requirement

Setting

Same hours every day

workHours

Different hours by weekday

workDays

Holidays or one-time closures

nonworkingTime

Hide axis items

Definition binding visible callback

If both workDays and workHours are null, no recurring working-time restriction is applied. An empty schedule explicitly represents no working range.

Keep the configured time zone consistent with event data. Configure cross-region display separately with the Scheduler timeZone property.

Configure daily hours

Use workHours when one schedule applies every day. Each range uses 24-hour clock text in H:mm or HH:mm format, such as 9:00 or 09:00. The start is inclusive and the end is exclusive; 24:00 is valid only as an end value.

scheduler.workHours = [
  { start: '09:00', end: '12:00' },
  { start: '13:00', end: '18:00' },
];

image

Configure weekday-specific hours

workDays contains seven entries ordered Sunday through Saturday. An empty entry marks that weekday as non-working.

const officeHours = [
  { start: '09:00', end: '12:00' },
  { start: '13:00', end: '18:00' },
];
scheduler.workDays = [
  [], // Sunday
  officeHours, // Monday
  officeHours, // Tuesday
  officeHours, // Wednesday
  officeHours, // Thursday
  [{ start: '09:00', end: '13:00' }], // Friday
  [] // Saturday
];

image

When workDays is configured, it takes priority over workHours; an empty weekday does not fall back to workHours. Set workDays to null to use workHours again.

Configure date-specific exceptions

Use nonworkingTime for holidays, closures, and other concrete date-time exceptions.

scheduler.nonworkingTime = [{
  start: new Date(2026, 7, 24, 12),
  end: new Date(2026, 7, 24, 13),
}];

image

An explicit nonworkingTime range has priority over recurring settings. Use the next day's midnight as the end of a full-day Date range.