WeeklyScheduleEditor

WeeklyScheduleEditor records when someone is available in their local wall-clock time. Choose it for an availability policy that stays expressed as HH:mm windows and local YYYY-MM-DD exceptions; convert to UTC only at the consumer boundary, where the applicable time zone is known.

Examples

A regular work week

Each enabled weekday has one or more local time ranges. Add another interval for a split day, or use the copy control to clone a day's ranges to selected weekdays.

Override a specific date

Exceptions override their weekday. An empty ranges array makes that entire local date unavailable; a non-empty array replaces the normal weekday windows for that date.

Monday

–

Tuesday

Unavailable

Wednesday

Unavailable

Thursday

Unavailable

Friday

Unavailable

Saturday

Unavailable

Sunday

Unavailable

Exceptions

Dec 25, 2026Unavailable all day

Dec 31, 202610:00–13:00

When to use

Use WeeklyScheduleEditor to define a person's ordinary weekly local-time availability with occasional date overrides.

Reach for something else when:

One event repeats on a schedule — use RecurrenceSelector, which describes a single recurring series.
People are choosing a bookable UTC slot — use SlotPicker, which converts those instants for display.
The application needs to visualize concrete events — use CalendarView.

Accessibility

Every weekday switch has its weekday as its label. Enabled ranges expose labelled start and end TimeInput controls, and an invalid end time is marked invalid with an inline explanation.
The copy action opens Popover as a labelled dialog. Its checkboxes are reachable by keyboard and Apply is disabled until a destination is selected.
The exception picker cannot add a date before today. Its add and remove controls, along with all weekday and range strings, come from labels.

API and code

Name	Type	Required	Description
`value`	`WeeklySchedule`	—	Controlled weekly local-time availability.
`defaultValue`	`WeeklySchedule`	—	Initial weekly local-time availability in uncontrolled mode.
`onChange`	`(value: WeeklySchedule) => void`	—	Called after a weekday availability change.
`exceptions`	`DateException[]`	—	Controlled date exceptions.
`onExceptionsChange`	`(exceptions: DateException[]) => void`	—	Called after date exceptions change.
`defaultRange`	`TimeRange`	—	Range created when enabling a weekday. Default: 09:00–17:00.
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`	—	First displayed weekday, where 0 is Sunday. Default: 1.
`showExceptions`	`boolean`	—	Whether to render date exceptions. Default: true.
`labels`	`WeeklyScheduleEditorLabels`	—	Translatable visible and accessible labels, merged over English defaults.

x-data="lyraWeeklyScheduleEditor({ … })"

Option	Type	Required	Description
`value`	`Partial<WeeklySchedule>`	—	Weekly local-time availability, merged over the empty seven-day schedule.
`exceptions`	`DateException[]`	—	Date-specific availability overrides.
`defaultRange`	`TimeRange`	—	Range created when enabling a weekday. Default: 09:00–17:00.
`weekStartsOn`	`Weekday`	—	First displayed weekday, where 0 is Sunday. Default: 1.
`showExceptions`	`boolean`	—	Whether to render date exceptions. Default: true.
`labels`	`WeeklyScheduleEditorLabels`	—	Translatable labels merged over English defaults.

Without React, own range validation, copying and the exception override rules yourself:

html

<div class="lyra-sched">
  <div class="lyra-sched__row">
    <div class="lyra-sched__daycell">
      <label>Monday <input type="checkbox" checked /></label>
    </div>
    <div class="lyra-sched__ranges">
      <div class="lyra-sched__range">
        <input class="lyra-input" value="09:00" /><span class="lyra-sched__dash">–</span
        ><input class="lyra-input" value="17:00" />
      </div>
      <button class="lyra-sched__addrange" type="button">+ Add interval</button>
    </div>
  </div>
</div>

<lyra:weekly-schedule-editor> Generated from lyra-ds/blade v0.10.0.

The behavior comes from lyraWeeklyScheduleEditor() — install @lyra-ds/alpine and see the HTML + Alpine tab.

Prop	Default	Required	Example values
`value`	`null`	—	—
`exceptions`	`[]`	—	—
`defaultRange`	`null`	—	—
`weekStartsOn`	`1`	—	—
`showExceptions`	`true`	—	—
`labels`	`[]`	—	—
`name`	`null`	—	—

blade

<lyra:weekly-schedule-editor
    name="availability"
    :week-starts-on="1"
    :value="[
        1 => [['start' => '09:00', 'end' => '12:00'], ['start' => '13:00', 'end' => '18:00']],
        2 => [['start' => '09:00', 'end' => '18:00']],
        3 => [['start' => '09:00', 'end' => '18:00']],
    ]"
    :default-range="['start' => '09:00', 'end' => '17:00']"
/>