Primitiveselection

Calendar

Stable

Grade de datas para escolher um dia, um período ou várias datas. Composto sobre React DayPicker 10, cuja API é a do componente: `mode` single, range ou multiple, `disabled` com matchers, `captionLayout="dropdown"` para mês e ano, `numberOfMonths`, números de semana. Mantém os padrões do Coss — dias dos meses vizinhos visíveis e modo single — e traduz pelo `locale` do DayPicker, que nomeia meses, dias da semana, cada dia e as setas. `classNames`, `formatters` e `components` passados somam aos padrões em vez de substituí-los. Use para escolher data dentro de uma página ou de um Popover; para ler uma agenda de entregas por mês, use Roadmap Calendar.

Instalação

npx up-web-ds add calendar

Gera chevron-left, chevron-right, chevrons-up-down para a biblioteca de ícones do projeto (components.json → iconLibrary).

Preview

Basic

October 2026

Localized

outubro 2026

Entrega em quinta-feira, 1 de outubro.

Range

outubro 2026
novembro 2026

4 de out. a 8 de out. · 4 noites.

Multiple

outubro 2026

2 de 3 sessões de mentoria marcadas.

Dropdowns

outubro 2026

Escolha o mês e o ano, depois o dia.

Disabled Days

outubro 2026

Visitas só em dias úteis, a partir de hoje.

Week Numbers

outubro 2026
40
41
42
43
44
45

Escolha o dia da revisão da sprint.

Date Picker

Date Range Picker

Two Month Range Picker

Escolha a data de entrada e a de saída.

Birth Date Picker

Appointment Date Picker

Atendimento de segunda a sexta, a partir de hoje.

Multiple Date Picker

0 de 5 dias escolhidos.

Date Range Picker With Presets

Typed Date Picker

Digite a data ou escolha no calendário.

Typed Date Range Fields

Período do contrato

Informe o início e o fim.

Typed Date Time Picker

Agendamento

Segunda a sexta, a partir de hoje.

All states

Basic

October 2026

Localized

outubro 2026

Entrega em quinta-feira, 1 de outubro.

Range

outubro 2026
novembro 2026

4 de out. a 8 de out. · 4 noites.

Multiple

outubro 2026

2 de 3 sessões de mentoria marcadas.

Dropdowns

outubro 2026

Escolha o mês e o ano, depois o dia.

Disabled Days

outubro 2026

Visitas só em dias úteis, a partir de hoje.

Week Numbers

outubro 2026
40
41
42
43
44
45

Escolha o dia da revisão da sprint.

Date Picker

Date Range Picker

Two Month Range Picker

Escolha a data de entrada e a de saída.

Birth Date Picker

Appointment Date Picker

Atendimento de segunda a sexta, a partir de hoje.

Multiple Date Picker

0 de 5 dias escolhidos.

Date Range Picker With Presets

Typed Date Picker

Digite a data ou escolha no calendário.

Typed Date Range Fields

Período do contrato

Informe o início e o fim.

Typed Date Time Picker

Agendamento

Segunda a sexta, a partir de hoje.

Usage

@/components/ui/calendar
import { Calendar } from '@/components/ui/calendar'
Calendar
<Calendar />

Props

Props de Calendar
PropTypeDefaultDescription
animatebooleansem valor padrãoAnimate navigating between months.
aria-labelstringsem valor padrãoThe aria-label attribute to add to the container element.
aria-labelledbystringsem valor padrãoThe aria-labelledby attribute to add to the container element.
autoFocusbooleansem valor padrãoWhen a selection mode is set, DayPicker will focus the first selected day (if set) or today's date (if not disabled). Use this prop when you need to focus DayPicker after a user action, for improved accessibility.
broadcastCalendarbooleansem valor padrãoDisplay the weeks in the month following the broadcast calendar. Setting this prop will ignore {@link weekStartsOn} (always Monday) and {@link showOutsideDays} will default to true.
captionLayout"label" | "dropdown" | "dropdown-months" | "dropdown-years"sem valor padrãoShow dropdowns to navigate between months or years. - `label`: Displays the month and year as a label. Default value. - `dropdown`: Displays dropdowns for both month and year navigation. - `dropdown-months`: Displays a dropdown only for the month navigation. - `dropdown-years`: Displays a dropdown only for the year navigation. **Note:** By default, showing the dropdown will set the {@link startMonth} to 100 years ago and {@link endMonth} to the end of the current year. You can override this behavior by explicitly setting `startMonth` and `endMonth`.
classNamestringsem valor padrãoClass name to add to the root element.
classNamesPartial<ClassNames>sem valor padrãoChange the class names used by DayPicker. Use this prop when you need to change the default class names — for example, when importing the style via CSS modules or when using a CSS framework.
componentsPartial<CustomComponents>sem valor padrãoChange the components used for rendering the calendar elements.
dateLibPartial<DateLib>sem valor padrãoReplace the default date library with a custom one. Experimental: not guaranteed to be stable (may not respect semver).
defaultMonthDateThe current monthThe initial month to show in the calendar. Use this prop to let DayPicker control the current month. If you need to set the month programmatically, use {@link month} and {@link onMonthChange}.
dirstringsem valor padrãoThe text direction of the calendar. Use `ltr` for left-to-right (default) or `rtl` for right-to-left.
disabledMatcher | Matcher[]sem valor padrãoApply the `disabled` modifier to the matching days. Disabled days cannot be selected when in a selection mode is set.
disableNavigationbooleansem valor padrãoDisable the navigation between months. This prop won't hide the navigation: to hide the navigation, use {@link hideNavigation}.
endMonthDatesem valor padrãoThe latest month to end the month navigation.
firstWeekContainsDate1 | 4sem valor padrãoThe day of January that is always in the first week of the year.
fixedWeeksbooleansem valor padrãoDisplay always 6 weeks per each month, regardless of the month’s number of weeks. Weeks will be filled with the days from the next month.
footerReact.ReactNodesem valor padrãoAdd a footer to the calendar, acting as a live region. Use this prop to communicate the calendar's status to screen readers. Prefer strings over complex UI elements.
formattersPartial<Formatters>sem valor padrãoFormatters used to format dates to strings. Use this prop to override the default functions.
hiddenMatcher | Matcher[]sem valor padrãoApply the `hidden` modifier to the matching days. Will hide them from the calendar.
hideNavigationbooleansem valor padrãoHide the navigation buttons. This prop won't disable the navigation: to disable the navigation, use {@link disableNavigation}.
hideWeekdaysbooleansem valor padrãoHide the row displaying the weekday row header.
idstringsem valor padrãoA unique id to add to the root element.
ISOWeekbooleansem valor padrãoUse ISO week dates instead of the locale setting. Setting this prop will ignore `weekStartsOn` and `firstWeekContainsDate`.
labelsPartial<Labels>sem valor padrãoLabels creators to override the defaults. Use this prop to customize the aria-label attributes in DayPicker.
langstringsem valor padrãoAdd the language tag to the container element. When omitted, DayPicker uses the active locale code (`locale.code`). Set this prop to override the language tag.
localePartial<DayPickerLocale>enUS - The English locale default of `date-fns`.The locale object used to localize dates. Pass a locale from `react-day-picker/locale` to localize the calendar.
mode"multiple" | "single" | "range"'single'Enable the selection of a single day, multiple days, or a range of days.
modifiersRecord<string, Matcher | Matcher[] | undefined>sem valor padrãoAdd modifiers to the matching days.
modifiersClassNamesModifiersClassNamessem valor padrãoChange the class name for the day matching the `modifiers`.
modifiersStylesModifiersStylessem valor padrãoChange the class name for the day matching the {@link modifiers}.
monthDatesem valor padrãoThe month displayed in the calendar. As opposed to `defaultMonth`, use this prop with `onMonthChange` to change the month programmatically.
navLayout"around" | "after"sem valor padrãoAdjust the positioning of the navigation buttons. - `around`: Displays the buttons on either side of the caption. - `after`: Displays the buttons after the caption. This ensures the tab order matches the visual order. If not set, DayPicker preserves its legacy layout, but the tab order may not align with the visual order when using `captionLayout="dropdown"`.
noncestringsem valor padrãoA cryptographic nonce ("number used once") which can be used by Content Security Policy for the inline `style` attributes.
noonSafebooleansem valor padrãoKeep calendar math at noon in the configured {@link timeZone} to avoid historical second-level offsets drifting dates across midnight. This prop sets the time of the dates to noon (12:00).
numberOfMonthsnumber1The number of displayed months.
numeralsNumerals`latn` Latin (Western Arabic)The numeral system to use when formatting dates. - `latn`: Latin (Western Arabic) - `arab`: Arabic-Indic - `arabext`: Eastern Arabic-Indic (Persian) - `deva`: Devanagari - `beng`: Bengali - `guru`: Gurmukhi - `gujr`: Gujarati - `orya`: Oriya - `tamldec`: Tamil - `telu`: Telugu - `knda`: Kannada - `mlym`: Malayalam
onDayBlurDayEventHandler<React.FocusEvent<Element, Element>>sem valor padrãoEvent handler when a day is blurred.
onDayClickDayEventHandler<React.MouseEvent<Element, MouseEvent>>sem valor padrãoEvent handler when a day is clicked.
onDayFocusDayEventHandler<React.FocusEvent<Element, Element>>sem valor padrãoEvent handler when a day is focused.
onDayKeyDownDayEventHandler<React.KeyboardEvent<Element>>sem valor padrãoEvent handler when a key is pressed on a day.
onDayMouseEnterDayEventHandler<React.MouseEvent<Element, MouseEvent>>sem valor padrãoEvent handler when the mouse enters a day.
onDayMouseLeaveDayEventHandler<React.MouseEvent<Element, MouseEvent>>sem valor padrãoEvent handler when the mouse leaves a day.
onMonthChangeMonthChangeEventHandlersem valor padrãoEvent fired when the user navigates between months.
onNextClickMonthChangeEventHandlersem valor padrãoEvent handler when the next month button is clicked.
onPrevClickMonthChangeEventHandlersem valor padrãoEvent handler when the previous month button is clicked.
pagedNavigationbooleansem valor padrãoPaginate the month navigation displaying the `numberOfMonths` at a time.
requiredbooleansem valor padrãoWhether the selection is required.
reverseMonthsbooleansem valor padrãoRender the months in reversed order (when {@link numberOfMonths} is set) to display the most recent month first.
reverseYearsbooleansem valor padrãoReverse the order of years in the dropdown when using `captionLayout="dropdown"` or `captionLayout="dropdown-years"`.
role"dialog" | "application"sem valor padrãoThe role attribute to add to the container element.
showOutsideDaysbooleantrueShow the outside days (days falling in the next or the previous month). **Note:** when a {@link broadcastCalendar} is set, this prop defaults to true.
showWeekNumberbooleansem valor padrãoShow the week numbers column. Weeks are numbered according to the local week index.
startMonthDatesem valor padrãoThe earliest month to start the month navigation.
styleReact.CSSPropertiessem valor padrãoStyle to apply to the root element.
stylesPartial<Styles>sem valor padrãoChange the inline styles of the HTML elements.
timeZonestringsem valor padrãoThe time zone (IANA or UTC offset) to use in the calendar (experimental). See [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) for the possible values.
titlestringsem valor padrãoAdd a `title` attribute to the container element.
todayDatesem valor padrãoThe today’s date. Default is the current date. This date will get the `today` modifier to style the day.
useAdditionalDayOfYearTokensbooleansem valor padrãoEnable `YY` and `YYYY` for day of year tokens when formatting or parsing dates.
useAdditionalWeekYearTokensbooleansem valor padrãoEnable `DD` and `DDDD` for week year tokens when formatting or parsing dates.
weekStartsOn0 | 1 | 2 | 3 | 4 | 5 | 6sem valor padrãoThe index of the first day of the week (0 - Sunday). Overrides the locale's default.

Estende React.ComponentProps<typeof DayPicker>.

Metadata

Notas de acessibilidade

Verificado em calendar.test.tsx e em tests/e2e/calendar.spec.ts no Chromium desktop e mobile, em light e dark, com Axe sem violações WCAG 2.2 AA em todos os exemplos. Teclado: as setas de mês são botões alcançados por Tab com foco visível; a grade inteira é um único Tab stop que entra no dia selecionado (ou em hoje), as setas andam por dia e por semana pulando dias desabilitados, PageUp/PageDown trocam o mês mantendo o foco na grade, Enter e Space escolhem; em captionLayout="dropdown" mês e ano são selects nativos, com anel de foco no contorno, e a seta sem mês para onde ir fica aria-disabled e esmaecida. Leitor de tela: cada grade é nomeada pelo mês e ano, cada dia pela data completa no locale do calendário — com "Hoje" e "selecionado" no nome —, aria-selected na célula e aria-multiselectable na grade em range e multiple; a linha de iniciais dos dias da semana fica fora da árvore, porque o nome de cada dia já começa pelo dia da semana; os números de semana são rowheaders nomeados ("Semana 38"); os chevrons são aria-hidden. Com o locale ptBR do DayPicker, setas, selects e datas falam português; sem locale, o inglês padrão, e o lang da raiz acompanha. Contraste: cabeçalhos, números de semana e dias dos meses vizinhos usam muted-foreground pleno, porque a /72 do upstream reprovava 4.5:1 no light; dias desabilitados mantêm /72, isentos por serem controles desabilitados, e são também riscados. Toque verificado em 375px com emulação de toque: cada dia e cada seta mede 40x40 (36x36 a partir de sm), dois meses empilham em vez de estourar a largura, e o toque num dia o escolhe. Reduced motion verificado com prefers-reduced-motion: reduce — a única transição é o canto e o anel do dia selecionado, que não é deslocamento e permanece; o calendário não anima a troca de mês.

Classificação

Layer
Primitive
Domínio
Domain-free (compartilhado)
Categoria
selection
Status
Stable

Origem e distribuição

Fonte
coss registry / calendar
Licença
MIT
URL
https://coss.com/ui/r/calendar.json
Distribuição
Interna

Acessibilidade

  • Teclado: revisado
  • Leitor de tela: revisado
  • Touch: revisado
  • Reduced motion: revisado

Dependências

Pacotes
@daypicker/react
Ícones
chevron-left, chevron-right, chevrons-up-down
Construído sobre
Nenhum
Usado por
Nenhum ainda