Calendar

Calendar component enables users to select and view dates inline.

At Contentful calendar is used to ask user's input to set, edit, or view schedule actions.

The component is built on top of React Day Picker, see full documentation: https://react-day-picker.js.org/

Import

import { Calendar } from '@contentful/f36-components';
// or
import { Calendar } from '@contentful/f36-datepicker';

Examples

Basic

Displays inline calendar to ask for user's action to select a date

Min and max date

Set mininum and/or maximum dates to limit users to choose from a specific period in time

Use from... and to... props to control time frames

Indicators

Use modifiers to modify certain days, for example showing incators for scheduled actions

Read more about modifiers: https://react-day-picker.js.org/basics/modifiers

Custom Day content

Use components to modify certain parts of the calendar, for example modifying day content

Read more about custom components: https://react-day-picker.js.org/guides/custom-components

Multiple months

Display multiple months on the calender for a more convenient way for users to view dates

Use from... and to... props to control time frames

Props (API reference)

Open in Storybook

Name

Type

Default

captionLayout
"dropdown"
"buttons"
"dropdown-buttons"

Change the layout of the caption: - `buttons`: display prev/right buttons - `dropdown`: display drop-downs to change the month and the year **Note:** the `dropdown` layout is available only when `fromDate`, `fromMonth` or`fromYear` and `toDate`, `toMonth` or `toYear` are set. @defaultValue buttons

className
string

The CSS class to add to the container element. To change the name of the class instead, use `classNames.root`.

components
CustomComponents

Map of components used to create the layout. Look at the [components source](https://github.com/gpbl/react-day-picker/tree/master/packages/react-day-picker/src/components) to understand how internal components are built and provide your custom components.

defaultMonth
Date

The 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 [[onMonthChange}. @defaultValue The current month

dir
string

The text direction of the calendar. Use `ltr` for left-to-right (default) or `rtl` for right-to-left.

disabled
false
true
Date
(date: Date) => boolean
Date[]
DateRange
DateBefore
DateAfter
DateInterval
DayOfWeek
Matcher[]

Apply the `disabled` modifier to the matching days.

disableNavigation
false
true

Disable the navigation between months. @defaultValue false

firstWeekContainsDate
1
2
3
4
5
6
7

The day of January, which is always in the first week of the year. See also https://date-fns.org/docs/getWeek and https://en.wikipedia.org/wiki/Week#Numbering See also {@link ISOWeek}.

fixedWeeks
false
true

Display six weeks per months, regardless the month’s number of weeks. To use this prop, {@link showOutsideDays} must be set. @defaultValue false

footer
string
number
false
true
{}
ReactElement<any, string | JSXElementConstructor<any>>
ReactNodeArray
ReactPortal

Content to add to the table footer element.

formatters
Partial<Formatters>

A map of formatters. Use the formatters to override the default formatting functions.

fromDate
Date

The earliest day to start the month navigation.

fromMonth
Date

The earliest month to start the month navigation.

fromYear
number

The earliest year to start the month navigation.

hidden
false
true
Date
(date: Date) => boolean
Date[]
DateRange
DateBefore
DateAfter
DateInterval
DayOfWeek
Matcher[]

Apply the `hidden` modifier to the matching days. Will hide them from the calendar.

hideHead
false
true

Hide the month’s head displaying the weekday names. @defaultValue false

id
string

A unique id to replace the random generated id – used by DayPicker for accessibility.

initialFocus
false
true

When a selection mode is set, DayPicker will focus the first selected day (if set) or the today's date (if not disabled). Use this prop when you need to focus DayPicker after a user actions, for improved accessibility.

ISOWeek
false
true

Use ISO week dates instead of the locale setting. See also https://en.wikipedia.org/wiki/ISO_week_date. Setting this prop will ignore {@link weekStartsOn} and {@link firstWeekContainsDate}.

labels
Partial<Labels>

Labels creators to override the defaults. Use this prop to customize the ARIA labels attributes.

locale
Locale

The date-fns locale object used to localize dates. @defaultValue en-US

mode
"default"
"single"

modifiers
DayModifiers

Add modifiers to the matching days.

modifiersClassNames
ModifiersClassNames

Change the class name for the day matching the {@link modifiers}.

modifiersStyles
ModifiersStyles

Change the inline style for the day matching the {@link modifiers}.

month
Date

The month displayed in the calendar. As opposed to {@link DayPickerBase.defaultMonth}, use this prop with {@link DayPickerBase.onMonthChange} to change the month programmatically.

numberOfMonths
number

The number of displayed months. @defaultValue 1

onDayBlur
DayFocusEventHandler

onDayClick
DayClickEventHandler

onDayFocus
DayFocusEventHandler

onDayKeyDown
DayKeyboardEventHandler

onDayKeyPress
DayKeyboardEventHandler

onDayKeyUp
DayKeyboardEventHandler

onDayMouseEnter
DayMouseEventHandler

onDayMouseLeave
DayMouseEventHandler

onDayPointerEnter
DayPointerEventHandler

onDayPointerLeave
DayPointerEventHandler

onDayTouchCancel
DayTouchEventHandler

onDayTouchEnd
DayTouchEventHandler

onDayTouchMove
DayTouchEventHandler

onDayTouchStart
DayTouchEventHandler

onMonthChange
MonthChangeEventHandler

Event fired when the user navigates between months.

onNextClick
MonthChangeEventHandler

onPrevClick
MonthChangeEventHandler

onSelect
SelectSingleEventHandler

Event fired when a day is selected.

onWeekNumberClick
WeekNumberClickEventHandler

pagedNavigation
false
true

Paginate the month navigation displaying the {@link numberOfMonths} at time. @defaultValue false

required
false
true

Make the selection required.

reverseMonths
false
true

Render the months in reversed order (when {@link numberOfMonths} is greater than `1`) to display the most recent month first. @defaultValue false

selected
false
true
Date
(date: Date) => boolean
Date[]
DateRange
DateBefore
DateAfter
DateInterval
DayOfWeek
Matcher[]

Apply the `selected` modifier to the matching days. The selected day.

showOutsideDays
false
true

Show the outside days. An outside day is a day falling in the next or the previous month. @defaultValue false

showWeekNumber
false
true

Show the week numbers column. Weeks are numbered according to the local week index. - to use ISO week numbering, use the {@link ISOWeek} prop. - to change how the week numbers are displayed, use the {@link Formatters} prop. @see {@link ISOWeek }, {@link weekStartsOn } and {@link firstWeekContainsDate }. @defaultValue false

styles
Partial<Omit<StyledElement<CSSProperties>, InternalModifiersElement>>

Change the inline styles of the HTML elements.

toDate
Date

The latest day to end the month navigation.

today
Date

The today’s date. Default is the current date. This Date will get the `today` modifier to style the day.

toMonth
Date

The latest month to end the month navigation.

toYear
number

The latest year to end the month navigation.

weekStartsOn
0
1
2
3
4
5
6

The index of the first day of the week (0 - Sunday). Overrides the locale's one. See also {@link ISOWeek}.

Accessibility

  • Keyboard navigation is supported
  • Necessary aria roles were added and tested with screen readers
  • When customizing the Calendar HTML elements or providing custom components. keyboard functionality and screen readers must be tested