Formulário

Calendar

/componentes/calendar.mdmarkdown cru, para quem lê com agent em vez de olho

Data única

março 2026

D	S	T	Q	Q	S	S

Intervalo

março 2026

D	S	T	Q	Q	S	S

Importar

import { Calendar } from '@rivocode/ui'

Quando usar

O mes cru, para quem quer o calendário na própria tela.

E a única peça do catalogo com fundacao de fora, a react-day-picker, e ela entra só como motor: nenhuma folha de estilo dela e importada, todo o desenho vem dos nossos tokens. O locale padrão e pt-BR.

Em largura de celular mostra um mes só, mesmo quando pedem mais, e o dia ganha 44px de alvo.

A troca de mês anima: o mês novo entra pelo lado para onde a pessoa andou, em 200ms, e com "reduzir movimento" ligado a troca é instantânea. animate={false} desliga.

No React Native

Traduz: o @rivocode/ui-native exporta Calendar - mês desenhado à mão; valor ISO aaaa-mm-dd, exibição dd/mm/aaaa; o mês novo entra por fade. A API não é a mesma do web (no nativo tudo é controlado), e a tabela de paridade diz o que muda peça a peça.

API

Prop	Tipo
`animate`0.4.0 Animate navigating between months.	`boolean`
`aria-label`0.4.0 The aria-label attribute to add to the container element.	`string`
`aria-labelledby`0.4.0 The aria-labelledby attribute to add to the container element.	`string`
`autoFocus`0.4.0 When a selection mode is set, DayPicker will focus the first selected day (if set) or today's date (if not disabled).	`boolean`
`broadcastCalendar`0.4.0 Display the weeks in the month following the broadcast calendar.	`boolean`
`captionLayout`0.4.0 Show dropdowns to navigate between months or years.	`"dropdown""dropdown-months""dropdown-years""label"`
`classNames`0.4.0 Change the class names used by DayPicker.	`Partial<ClassNames>`
`components`0.4.0 Change the components used for rendering the calendar elements.	`Partial<CustomComponents>`
`dateLib`0.4.0 Replace the default date library with a custom one.	`Partial<DateLib>`
`defaultMonth`0.4.0 The initial month to show in the calendar.	`Date`
`dir`0.4.0 The text direction of the calendar.	`string`
`disabled`0.4.0 Apply the `disabled` modifier to the matching days.	`Matcher[] \| Matcher`
`disableNavigation`0.4.0 Disable the navigation between months.	`boolean`
`endMonth`0.4.0 The latest month to end the month navigation.	`Date`
`firstWeekContainsDate`0.4.0 The day of January that is always in the first week of the year.	`1 \| 4`
`fixedWeeks`0.4.0 Display always 6 weeks per each month, regardless of the month’s number of weeks.	`boolean`
`footer`0.4.0 Add a footer to the calendar, acting as a live region.	`ReactNode`
`formatters`0.4.0 Formatters used to format dates to strings.	`Partial<Formatters>`
`hidden`0.4.0 Apply the `hidden` modifier to the matching days.	`Matcher[] \| Matcher`
`hideNavigation`0.4.0 Hide the navigation buttons.	`boolean`
`hideWeekdays`0.4.0 Hide the row displaying the weekday row header.	`boolean`
`ISOWeek`0.4.0 Use ISO week dates instead of the locale setting.	`boolean`
`labels`0.4.0 Labels creators to override the defaults.	`Partial<Labels>`
`lang`0.4.0 Add the language tag to the container element.	`string`
`locale`0.4.0 The locale object used to localize dates.	`Partial<DayPickerLocale>`
`mode`0.4.0 Enable the selection of a single day, multiple days, or a range of days.	`"multiple""range""single"`
`modifiers`0.4.0 Add modifiers to the matching days.	`Record<string, Matcher[]Matcherundefined>`
`modifiersClassNames`0.4.0 Change the class name for the day matching the `modifiers`.	`ModifiersClassNames`
`modifiersStyles`0.4.0 Change the class name for the day matching the modifiers.	`ModifiersStyles`
`month`0.4.0 The month displayed in the calendar.	`Date`
`navLayout`0.4.0 Adjust the positioning of the navigation buttons.	`"after" \| "around"`
`nonce`0.4.0 A cryptographic nonce ("number used once") which can be used by Content Security Policy for the inline `style` attributes.	`string`
`noonSafe`0.4.0 Keep calendar math at noon in the configured timeZone to avoid historical second-level offsets drifting dates across midnight.	`boolean`
`numberOfMonths`0.4.0 The number of displayed months.	`number`
`numerals`0.4.0 The numeral system to use when formatting dates.	`Numerals`
`onDayBlur`0.4.0 Event handler when a day is blurred.	`DayEventHandler<FocusEvent<Element, Element>>`
`onDayClick`0.4.0 Event handler when a day is clicked.	`DayEventHandler<MouseEvent<Element, MouseEvent>>`
`onDayFocus`0.4.0 Event handler when a day is focused.	`DayEventHandler<FocusEvent<Element, Element>>`
`onDayKeyDown`0.4.0 Event handler when a key is pressed on a day.	`DayEventHandler<KeyboardEvent<Element>>`
`onDayMouseEnter`0.4.0 Event handler when the mouse enters a day.	`DayEventHandler<MouseEvent<Element, MouseEvent>>`
`onDayMouseLeave`0.4.0 Event handler when the mouse leaves a day.	`DayEventHandler<MouseEvent<Element, MouseEvent>>`
`onMonthChange`0.4.0 Event fired when the user navigates between months.	`MonthChangeEventHandler`
`onNextClick`0.4.0 Event handler when the next month button is clicked.	`MonthChangeEventHandler`
`onPrevClick`0.4.0 Event handler when the previous month button is clicked.	`MonthChangeEventHandler`
`pagedNavigation`0.4.0 Paginate the month navigation displaying the `numberOfMonths` at a time.	`boolean`
`required`0.4.0 Whether the selection is required.	`boolean`
`reverseMonths`0.4.0 Render the months in reversed order (when numberOfMonths is set) to display the most recent month first.	`boolean`
`reverseYears`0.4.0 Reverse the order of years in the dropdown when using `captionLayout="dropdown"` or `captionLayout="dropdown-years"`.	`boolean`
`role`0.4.0 The role attribute to add to the container element.	`"application" \| "dialog"`
`showOutsideDays`0.4.0 Show the outside days (days falling in the next or the previous month).	`boolean`
`showWeekNumber`0.4.0 Show the week numbers column.	`boolean`
`startMonth`0.4.0 The earliest month to start the month navigation.	`Date`
`styles`0.4.0 Change the inline styles of the HTML elements.	`Partial<Styles>`
`timeZone`0.4.0 The time zone (IANA or UTC offset) to use in the calendar (experimental).	`string`
`title`0.4.0 Add a `title` attribute to the container element.	`string`
`today`0.4.0 The today’s date.	`Date`
`useAdditionalDayOfYearTokens`0.4.0 Enable `YY` and `YYYY` for day of year tokens when formatting or parsing dates.	`boolean`
`useAdditionalWeekYearTokens`0.4.0 Enable `DD` and `DDDD` for week year tokens when formatting or parsing dates.	`boolean`
`weekStartsOn`0.4.0 The index of the first day of the week (0 - Sunday).	`0123456`

Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.

Partes

Calendar se monta com estas peças. Todas vivem nesta página, porque separar cada uma num endereço obrigaria a abrir seis abas para montar uma tela.

CalendarPanel

/calendar-panel.md

A casca do calendário: painel ancorado na mesa, folha de baixo no celular.

O DatePicker e o DateRangePicker já a usam por dentro. Ela sai exportada para o seletor de data que a sua tela inventa (o filtro de período de um relatório, o calendário de agendamento) continuar trocando de formato do mesmo jeito que os da casa.

A troca é de formato e não de conteúdo. Calendário ancorado num campo perto do rodapé do celular abre para fora da tela ou por cima do teclado, e a pessoa precisa rolar a página com o painel aberto. A folha resolve isso sem mexer em nada do que vai dentro.

const [aberto, setAberto] = useState(false)

<CalendarPanel
  open={aberto}
  onOpenChange={setAberto}
  title="Período do relatório"
  trigger={<Button variant="secondary">Escolher período</Button>}
  footer={<Button onClick={aplicar}>Aplicar</Button>}
>
  <Calendar mode="range" selected={faixa} onSelect={setFaixa} />
</CalendarPanel>

open, onOpenChange e title são obrigatórios, e os três pelo mesmo motivo. A abertura é controlada porque quem confirma com um rodapé precisa fechar o painel no momento certo, e não no clique. O title é o nome que o leitor de tela anuncia no celular, onde o painel vira folha e perde o campo ao lado que dava o contexto.

Prop	Tipo
`onOpenChange`obrigatória0.4.0	`(isOpen: boolean) => void`
`open`obrigatória0.4.0	`boolean`
`title`obrigatória0.4.0 Titulo lido no celular, onde o painel vira folha e perde o contexto.	`string`
`trigger`obrigatória0.4.0 O elemento que abre.	`ReactElement<unknown, string \| JSXElementConstructor<any>>`
`align`0.4.0	`"end" \| "start"`
`footer`0.4.0	`ReactNode`

Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.

Quando usar

O mes cru, para quem quer o calendário na própria tela.

Em largura de celular mostra um mes só, mesmo quando pedem mais, e o dia ganha 44px de alvo.

A troca de mês anima: o mês novo entra pelo lado para onde a pessoa andou, em 200ms, e com "reduzir movimento" ligado a troca é instantânea. animate={false} desliga.

No React Native

API

Prop	Tipo
`animate`0.4.0 Animate navigating between months.	`boolean`
`aria-label`0.4.0 The aria-label attribute to add to the container element.	`string`
`aria-labelledby`0.4.0 The aria-labelledby attribute to add to the container element.	`string`
`autoFocus`0.4.0 When a selection mode is set, DayPicker will focus the first selected day (if set) or today's date (if not disabled).	`boolean`
`broadcastCalendar`0.4.0 Display the weeks in the month following the broadcast calendar.	`boolean`
`captionLayout`0.4.0 Show dropdowns to navigate between months or years.	`"dropdown""dropdown-months""dropdown-years""label"`
`classNames`0.4.0 Change the class names used by DayPicker.	`Partial<ClassNames>`
`components`0.4.0 Change the components used for rendering the calendar elements.	`Partial<CustomComponents>`
`dateLib`0.4.0 Replace the default date library with a custom one.	`Partial<DateLib>`
`defaultMonth`0.4.0 The initial month to show in the calendar.	`Date`
`dir`0.4.0 The text direction of the calendar.	`string`
`disabled`0.4.0 Apply the `disabled` modifier to the matching days.	`Matcher[] \| Matcher`
`disableNavigation`0.4.0 Disable the navigation between months.	`boolean`
`endMonth`0.4.0 The latest month to end the month navigation.	`Date`
`firstWeekContainsDate`0.4.0 The day of January that is always in the first week of the year.	`1 \| 4`
`fixedWeeks`0.4.0 Display always 6 weeks per each month, regardless of the month’s number of weeks.	`boolean`
`footer`0.4.0 Add a footer to the calendar, acting as a live region.	`ReactNode`
`formatters`0.4.0 Formatters used to format dates to strings.	`Partial<Formatters>`
`hidden`0.4.0 Apply the `hidden` modifier to the matching days.	`Matcher[] \| Matcher`
`hideNavigation`0.4.0 Hide the navigation buttons.	`boolean`
`hideWeekdays`0.4.0 Hide the row displaying the weekday row header.	`boolean`
`ISOWeek`0.4.0 Use ISO week dates instead of the locale setting.	`boolean`
`labels`0.4.0 Labels creators to override the defaults.	`Partial<Labels>`
`lang`0.4.0 Add the language tag to the container element.	`string`
`locale`0.4.0 The locale object used to localize dates.	`Partial<DayPickerLocale>`
`mode`0.4.0 Enable the selection of a single day, multiple days, or a range of days.	`"multiple""range""single"`
`modifiers`0.4.0 Add modifiers to the matching days.	`Record<string, Matcher[]Matcherundefined>`
`modifiersClassNames`0.4.0 Change the class name for the day matching the `modifiers`.	`ModifiersClassNames`
`modifiersStyles`0.4.0 Change the class name for the day matching the modifiers.	`ModifiersStyles`
`month`0.4.0 The month displayed in the calendar.	`Date`
`navLayout`0.4.0 Adjust the positioning of the navigation buttons.	`"after" \| "around"`
`nonce`0.4.0 A cryptographic nonce ("number used once") which can be used by Content Security Policy for the inline `style` attributes.	`string`
`noonSafe`0.4.0 Keep calendar math at noon in the configured timeZone to avoid historical second-level offsets drifting dates across midnight.	`boolean`
`numberOfMonths`0.4.0 The number of displayed months.	`number`
`numerals`0.4.0 The numeral system to use when formatting dates.	`Numerals`
`onDayBlur`0.4.0 Event handler when a day is blurred.	`DayEventHandler<FocusEvent<Element, Element>>`
`onDayClick`0.4.0 Event handler when a day is clicked.	`DayEventHandler<MouseEvent<Element, MouseEvent>>`
`onDayFocus`0.4.0 Event handler when a day is focused.	`DayEventHandler<FocusEvent<Element, Element>>`
`onDayKeyDown`0.4.0 Event handler when a key is pressed on a day.	`DayEventHandler<KeyboardEvent<Element>>`
`onDayMouseEnter`0.4.0 Event handler when the mouse enters a day.	`DayEventHandler<MouseEvent<Element, MouseEvent>>`
`onDayMouseLeave`0.4.0 Event handler when the mouse leaves a day.	`DayEventHandler<MouseEvent<Element, MouseEvent>>`
`onMonthChange`0.4.0 Event fired when the user navigates between months.	`MonthChangeEventHandler`
`onNextClick`0.4.0 Event handler when the next month button is clicked.	`MonthChangeEventHandler`
`onPrevClick`0.4.0 Event handler when the previous month button is clicked.	`MonthChangeEventHandler`
`pagedNavigation`0.4.0 Paginate the month navigation displaying the `numberOfMonths` at a time.	`boolean`
`required`0.4.0 Whether the selection is required.	`boolean`
`reverseMonths`0.4.0 Render the months in reversed order (when numberOfMonths is set) to display the most recent month first.	`boolean`
`reverseYears`0.4.0 Reverse the order of years in the dropdown when using `captionLayout="dropdown"` or `captionLayout="dropdown-years"`.	`boolean`
`role`0.4.0 The role attribute to add to the container element.	`"application" \| "dialog"`
`showOutsideDays`0.4.0 Show the outside days (days falling in the next or the previous month).	`boolean`
`showWeekNumber`0.4.0 Show the week numbers column.	`boolean`
`startMonth`0.4.0 The earliest month to start the month navigation.	`Date`
`styles`0.4.0 Change the inline styles of the HTML elements.	`Partial<Styles>`
`timeZone`0.4.0 The time zone (IANA or UTC offset) to use in the calendar (experimental).	`string`
`title`0.4.0 Add a `title` attribute to the container element.	`string`
`today`0.4.0 The today’s date.	`Date`
`useAdditionalDayOfYearTokens`0.4.0 Enable `YY` and `YYYY` for day of year tokens when formatting or parsing dates.	`boolean`
`useAdditionalWeekYearTokens`0.4.0 Enable `DD` and `DDDD` for week year tokens when formatting or parsing dates.	`boolean`
`weekStartsOn`0.4.0 The index of the first day of the week (0 - Sunday).	`0123456`

Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.

Partes

Calendar se monta com estas peças. Todas vivem nesta página, porque separar cada uma num endereço obrigaria a abrir seis abas para montar uma tela.

CalendarPanel

/calendar-panel.md

A casca do calendário: painel ancorado na mesa, folha de baixo no celular.

const [aberto, setAberto] = useState(false)

<CalendarPanel
  open={aberto}
  onOpenChange={setAberto}
  title="Período do relatório"
  trigger={<Button variant="secondary">Escolher período</Button>}
  footer={<Button onClick={aplicar}>Aplicar</Button>}
>
  <Calendar mode="range" selected={faixa} onSelect={setFaixa} />
</CalendarPanel>

Prop	Tipo
`onOpenChange`obrigatória0.4.0	`(isOpen: boolean) => void`
`open`obrigatória0.4.0	`boolean`
`title`obrigatória0.4.0 Titulo lido no celular, onde o painel vira folha e perde o contexto.	`string`
`trigger`obrigatória0.4.0 O elemento que abre.	`ReactElement<unknown, string \| JSXElementConstructor<any>>`
`align`0.4.0	`"end" \| "start"`
`footer`0.4.0	`ReactNode`

Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.