WeeklyScheduleEditor

WeeklyScheduleEditor registra quando alguém está disponível no horário de parede local. Escolha-o para uma política de disponibilidade que permanece em janelas HH:mm e exceções locais YYYY-MM-DD; converta para UTC somente no limite do consumer, onde o fuso aplicável é conhecido.

Exemplos

Uma semana de trabalho regular

Cada dia habilitado tem um ou mais intervalos locais. Adicione outro intervalo para um dia dividido ou use o controle de cópia para clonar os intervalos de um dia nos dias escolhidos.

Substituir uma data específica

Exceções substituem seu dia da semana. Um array ranges vazio torna toda aquela data local indisponível; um array não vazio substitui as janelas normais do dia da semana para aquela data.

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

Quando usar

Use WeeklyScheduleEditor para definir a disponibilidade semanal local habitual de uma pessoa, com exceções ocasionais.

Prefira outro componente quando:

Um evento se repete em uma agenda — use RecurrenceSelector, que descreve uma única série recorrente.
Pessoas escolhem um slot UTC reservável — use SlotPicker, que converte esses instantes para exibição.
A aplicação precisa visualizar eventos concretos — use CalendarView.

Acessibilidade

Cada switch de dia da semana tem o respectivo dia como label. Intervalos habilitados expõem controles TimeInput de início e fim nomeados, e um fim inválido recebe marcação de inválido e explicação inline.
A ação de cópia abre Popover como diálogo nomeado. Suas checkboxes são alcançáveis por teclado e Apply fica desabilitado até que exista um destino selecionado.
O seletor de exceção não adiciona uma data anterior a hoje. Os controles de adicionar e remover, assim como strings de dias e intervalos, vêm de labels.

API e código

Nome	Tipo	Obrigatória	Descrição
`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({ … })"

Opção	Tipo	Obrigatória	Descrição
`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.

Sem React, você controla a validação de intervalos, a cópia e as regras de substituição por exceção:

html

<div class="lyra-sched">
  <div class="lyra-sched__row">
    <div class="lyra-sched__daycell">
      <label>Segunda-feira <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">+ Adicionar intervalo</button>
    </div>
  </div>
</div>

<lyra:weekly-schedule-editor> Gerado do lyra-ds/blade v0.10.0.

O comportamento vem de lyraWeeklyScheduleEditor() — instale @lyra-ds/alpine e veja a aba HTML + Alpine.

Prop	Padrão	Obrigatória	Valores de exemplo
`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']"
/>