WeeklyHoursEditor

Controlled with validation

Weekly hours

Times in Europe/London

Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Unavailable
Sunday
Unavailable

37.5 hours a week

import { useState } from 'react';
import { WeeklyHoursEditor, validateWeeklyHours, type WeeklyHoursInterval } from '@rookcom/monarch-react/scheduling';

const WEEKDAYS: WeeklyHoursInterval[] = [1, 2, 3, 4, 5].flatMap((day) => [
  { day, start: 540, end: 750 },
  { day, start: 810, end: 1050 },
]);

function ControlledDemo() {
  const [value, setValue] = useState<WeeklyHoursInterval[]>(WEEKDAYS);
  const invalid = Object.keys(validateWeeklyHours(value)).length > 0;
  const hours = value.reduce((sum, r) => sum + Math.max(0, r.end - r.start), 0) / 60;
  return (
    <div style={{ display: 'grid', gap: 8, width: '100%', maxWidth: 640 }}>
      <WeeklyHoursEditor
        locale="en-GB"
        value={value}
        onValueChange={setValue}
        timeZoneLabel="Times in Europe/London"
      />
      <p style={{ margin: 0, fontSize: 13 }} aria-live="polite">
        {invalid ? 'Fix the highlighted days to save.' : `${hours} hours a week`}
      </p>
    </div>
  );
}

<ControlledDemo />

Usage examples

Uncontrolled, 12-hour clock, week from Sunday

import { WeeklyHoursEditor } from '@rookcom/monarch-react/scheduling';

<div style={{ width: '100%', maxWidth: 640 }}>
  <WeeklyHoursEditor
    locale="en-US"
    hourCycle="12"
    weekStartsOn={0}
    legend="Support hours"
    defaultValue={[{ day: 1, start: 480, end: 1440 }]}
    step={30}
    name="supportHours"
  />
</div>

Read-only

import { WeeklyHoursEditor, type WeeklyHoursInterval } from '@rookcom/monarch-react/scheduling';

const WEEKDAYS: WeeklyHoursInterval[] = [1, 2, 3, 4, 5].flatMap((day) => [
  { day, start: 540, end: 750 },
  { day, start: 810, end: 1050 },
]);

<div style={{ width: '100%', maxWidth: 480 }}>
  <WeeklyHoursEditor
    locale="en-GB"
    legend="Business hours"
    readOnly
    defaultValue={WEEKDAYS}
    timeZoneLabel="Times in Asia/Kolkata"
  />
</div>

Purpose

Lets people set the hours they (or a team, or a support desk) are available each week. Needed by: calendar, tickets.

Use when

Booking availability, business hours, support or on-call hours.
Any setting that is "these times on these weekdays".

Avoid when

One-off dates (holidays, time off): use a date list next to it.
Shift rotas that differ week to week: that is a scheduling grid, not a weekly pattern.

Design principles

The value is plain data, { day, start, end }[] in minutes, a plain, serialisable shape, so it goes to the API and to TimeGrid workingHours unchanged.
Each day is switched on or off; switching off and on again restores the day’s intervals.
Times are picked from a list (step minutes), never typed free-hand, so there are no parse errors.
Validation is shown under the day and exported as validateWeeklyHours; the product decides whether to block saving.
The time zone is shown, not assumed: timeZoneLabel holds text or the product’s timezone picker.

API reference

import { WeeklyHoursEditor, validateWeeklyHours } from '@rookcom/monarch-react/scheduling';

Export	Kind	Rendering	Root class
`WeeklyHoursEditor`	component	client	`.mn-weekly-hours-editor`
`validateWeeklyHours`	utility	client	–

Renders a <fieldset> (ref) with the legend, the zone slot and one row per weekday in weekStartsOn order (0 = Sunday … 6 = Saturday, as in the date pickers). Interval day values are ISO weekdays (1 = Monday … 7 = Sunday), Rook Calendar’s stored shape.

Controlled with value + onValueChange(value, errors), or uncontrolled with defaultValue. onValueChange emits intervals ordered by weekday, each day’s intervals in the order the user arranged them.

name adds a hidden input holding the value as JSON, for plain form posts.

validateWeeklyHours(value) returns { [weekday]: "range" | "order" | "overlap" } for invalid days.

Times use Monarch NativeSelect (the platform list works well on phones and with 97 options); a separate TimeInput/TimeSelect component is not part of this wave.

Generated from the TypeScript declarations of packages/react/src/components/scheduling/weekly-hours-editor.

Properties