Calendar

Calendar é a primitiva de grade de datas para um campo de data ou intervalo. Escolha-o quando a grade pertence ao layout; use DatePicker ou DateRangePicker quando ela deve abrir a partir de um campo compacto.

Exemplos

Uma data selecionada e atalho para hoje

Use uma string ISO só de data para uma data local inicial. todayButton adiciona um atalho que seleciona hoje e retorna a grade ao mês correspondente.

SMTWTFS

Um intervalo completo

Defina range para que a primeira seleção inicie o intervalo e a segunda o conclua. Selecionar uma data anterior ao início inverte os limites, mantendo o resultado em ordem cronológica.

SMTWTFS

Datas em português do Brasil

locale="pt-BR" usa Intl para o nome do mês, os cabeçalhos dos dias da semana e os labels de data falados. Passe também labels quando os controles do calendário precisarem de tradução.

DSTQQSS

Quando usar

Use Calendar quando uma grade de datas visível é a parte certa do formulário ou da interface de agenda, inclusive quando a pessoa precisa comparar datas próximas antes de escolher uma.

Prefira outro componente quando:

A grade deve ficar oculta até a ativação de um campo — use DatePicker para uma data ou DateRangePicker para data inicial e final.
A pessoa conhece a data exata e precisa digitá-la rapidamente — use um input de texto com validação clara, em vez de exigir navegação pela grade.
A seleção é apenas de horário — use TimePicker para uma lista de horários disponíveis ou TimeInput para entrada de 24 horas digitada.

Acessibilidade

A célula do dia ativo é a única parada de tabulação da grade: os outros botões de dia usam tabIndex="-1". As setas movem por dia ou semana; Home e End movem para as extremidades da semana atual; PageUp e PageDown movem por mês.
Cada dia tem um nome acessível formatado pelo locale. Os cabeçalhos dos dias expõem o nome completo, enquanto o texto visível usa a forma curta do locale.
Os dias inicial e final selecionados usam aria-pressed. O botão de cabeçalho alterna entre dias, meses e anos; a seleção de mês ou ano retorna à próxima visualização mais específica.
Datas indisponíveis permanecem focáveis intencionalmente e usam aria-disabled="true", em vez do disabled nativo. Assim, quem usa teclado descobre datas indisponíveis e continua a navegação por setas; a ativação não altera a seleção.
labels fornece as strings de navegação, troca de visualização e hoje. A formatação de datas usa Intl, portanto a grade não tem strings fixas de mês, dia da semana ou data.

API e código

Nome	Tipo	Obrigatória	Descrição
`range`	`boolean`	—	Whether selection is a date range. Default: `false`.
`value`	`Date \| string \| CalendarRange \| null`	—	Controlled selected local date, ISO `YYYY-MM-DD` string, or range.
`defaultValue`	`Date \| string \| CalendarRange`	—	Initial selected local date, ISO `YYYY-MM-DD` string, or range when uncontrolled.
`onChange`	`(value: Date \| CalendarRange) => void`	—	Called after a date or range is selected.
`min`	`Date \| string`	—	Inclusive lower selection limit as a local date or ISO `YYYY-MM-DD` string.
`max`	`Date \| string`	—	Inclusive upper selection limit as a local date or ISO `YYYY-MM-DD` string.
`isDateDisabled`	`(date: Date) => boolean`	—	Returns whether a local date cannot be selected. Disabled dates remain visible.
`renderDayMarker`	`(date: Date) => ReactNode`	—	Renders extra content inside each day cell, such as a `.lyra-cal__dot` availability marker.
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`	—	First weekday, where `0` is Sunday and `6` is Saturday. Default: `0`.
`size`	`'sm' \| 'md'`	—	Calendar cell size. Default: `"sm"`.
`todayButton`	`boolean`	—	Whether to render the today shortcut. Default: `false`.
`locale`	`string`	—	BCP 47 locale used for month names, weekday headings, and date labels. Default: `"en-US"`.
`labels`	`CalendarLabels`	—	Translatable control labels, merged over the English defaults.

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

Opção	Tipo	Obrigatória	Descrição
`range`	`boolean`	—	Whether selection is a date range. Default: `false`.
`defaultValue`	`string \| { start?: string \| null; end?: string \| null; } \| null`	—	Initial ISO date, or range of ISO dates.
`min`	`string`	—	Inclusive lower selection limit as ISO `YYYY-MM-DD`.
`max`	`string`	—	Inclusive upper selection limit as ISO `YYYY-MM-DD`.
`disabledDates`	`string[]`	—	ISO dates that cannot be selected; this replaces React's function-only data API.
`isDateDisabled`	`(date: Date) => boolean`	—	Optional JavaScript-only disabled-date predicate; it combines with `disabledDates`.
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`	—	First weekday, where `0` is Sunday and `6` is Saturday. Default: `0`.
`locale`	`string`	—	BCP 47 locale used for labels and names. Default: `"en-US"`.
`labels`	`LyraCalendarLabels`	—	Translatable labels merged over English defaults.

Sem React, componha as classes do calendário e implemente interpretação de data local, foco rotativo, seleção e mudanças de visualização:

html

<div class="lyra-cal">
  <div class="lyra-cal__head">
    <button class="lyra-cal__nav" type="button" aria-label="Mês anterior">‹</button>
    <button class="lyra-cal__label" type="button" aria-label="Alterar mês ou ano">
      Agosto de 2026
    </button>
    <button class="lyra-cal__nav" type="button" aria-label="Próximo mês">›</button>
  </div>
  <div class="lyra-cal__grid">
    <span class="lyra-cal__wd" aria-label="Domingo">D</span>
    <button
      class="lyra-cal__day"
      type="button"
      tabindex="0"
      aria-label="terça-feira, 4 de agosto de 2026"
      aria-pressed="true"
    >
      4
    </button>
    <button
      class="lyra-cal__day"
      type="button"
      tabindex="-1"
      aria-disabled="true"
      aria-label="quarta-feira, 5 de agosto de 2026"
    >
      5
    </button>
  </div>
  <div class="lyra-cal__foot"><button class="lyra-cal__today" type="button">Hoje</button></div>
</div>

<lyra:calendar> Gerado do lyra-ds/blade v0.10.0.

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

Prop	Padrão	Obrigatória	Valores de exemplo
`range`	`false`	—	—
`defaultValue`	`null`	—	—
`min`	`null`	—	—
`max`	`null`	—	—
`disabledDates`	`[]`	—	—
`weekStartsOn`	`0`	—	—
`size`	`'sm'`	—	`md`
`todayButton`	`false`	—	—
`locale`	`'en-US'`	—	—
`labels`	`[]`	—	—
`dateDisabledPredicate`	`null`	—	—

blade

<lyra:calendar
    default-value="2026-03-17"
    min="2026-01-01"
    max="2026-12-31"
    :week-starts-on="1"
    locale="en-US"
    today-button
/>