Forma 36 - Calendar

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.


function BasicExample() {
  const [selectedDay, setSelectedDay] = useState(new Date());

  return (
    <Calendar mode="single" selected={selectedDay} onSelect={setSelectedDay} />
  );
}function BasicExample() {
  const [selectedDay, setSelectedDay] = useState(new Date());

  return (
    <Calendar mode="single" selected={selectedDay} onSelect={setSelectedDay} />
  );
}
Open in Playground

Limiting the date range

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

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


function LimitingTheDateRangeExample() {
  const [selectedDay, setSelectedDay] = useState(new Date());
  const fromDate = new Date();
  const fiveYearsFromNow = selectedDay.getFullYear() + 5;

  return (
    <Calendar
      mode="single"
      fromDate={fromDate}
      toYear={fiveYearsFromNow}
      selected={selectedDay}
      onSelect={setSelectedDay}
    />
  );
}function LimitingTheDateRangeExample() {
  const [selectedDay, setSelectedDay] = useState(new Date());
  const fromDate = new Date();
  const fiveYearsFromNow = selectedDay.getFullYear() + 5;

  return (
    <Calendar
      mode="single"
      fromDate={fromDate}
      toYear={fiveYearsFromNow}
      selected={selectedDay}
      onSelect={setSelectedDay}
    />
  );
}
Open in Playground

Multiple months

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

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


function WithMultipleMonthsExample() {
  const [selectedDay, setSelectedDay] = useState(new Date());

  return (
    <Calendar
      mode="single"
      selected={selectedDay}
      onSelect={setSelectedDay}
      numberOfMonths={2}
    />
  );
}function WithMultipleMonthsExample() {
  const [selectedDay, setSelectedDay] = useState(new Date());

  return (
    <Calendar
      mode="single"
      selected={selectedDay}
      onSelect={setSelectedDay}
      numberOfMonths={2}
    />
  );
}
Open in Playground

Indicators

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

Read more about modifiers: https://daypicker.dev/guides/custom-modifiers


function IndicatorExample() {
  const today = new Date();
  const tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  const yesterday = new Date();
  yesterday.setDate(yesterday.getDate() - 1);

  const daysWithSchedule = [yesterday, tomorrow];
  const [selectedDay, setSelectedDay] = useState(today);

  const styles = {
    daysWithSchedule: css({
      '&::before': {
        content: '""',
        width: tokens.spacingS,
        height: tokens.spacing2Xs,
        borderRadius: tokens.borderRadiusSmall,
        backgroundColor: tokens.green400,
        position: 'absolute',
        bottom: '11%',
        left: '50%',
        transform: 'translate(-50%, -11%)',
      },
    }),
  };

  return (
    <Calendar
      mode="single"
      selected={selectedDay}
      onSelect={setSelectedDay}
      modifiers={{
        scheduled: daysWithSchedule,
      }}
      modifiersClassNames={{
        scheduled: styles.daysWithSchedule,
      }}
    />
  );
}function IndicatorExample() {
  const today = new Date();
  const tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  const yesterday = new Date();
  yesterday.setDate(yesterday.getDate() - 1);

  const daysWithSchedule = [yesterday, tomorrow];
  const [selectedDay, setSelectedDay] = useState(today);

  const styles = {
    daysWithSchedule: css({
      '&::before': {
        content: '""',
        width: tokens.spacingS,
        height: tokens.spacing2Xs,
        borderRadius: tokens.borderRadiusSmall,
        backgroundColor: tokens.green400,
        position: 'absolute',
        bottom: '11%',
        left: '50%',
        transform: 'translate(-50%, -11%)',
      },
    }),
  };

  return (
    <Calendar
      mode="single"
      selected={selectedDay}
      onSelect={setSelectedDay}
      modifiers={{
        scheduled: daysWithSchedule,
      }}
      modifiersClassNames={{
        scheduled: styles.daysWithSchedule,
      }}
    />
  );
}
Open in Playground

Custom Day content

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

Read more about custom components: https://daypicker.dev/guides/custom-components


function CustomDayContentExample() {
  const today = new Date();
  const tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  const yesterday = new Date();
  yesterday.setDate(yesterday.getDate() - 1);

  const daysWithSchedule = [yesterday, tomorrow];
  const [selectedDay, setSelectedDay] = useState(today);

  const CustomDayContent = ({ date, displayMonth, activeModifiers }) => {
    const styles = {
      scheduleIndicator: css({
        width: tokens.spacingS,
        height: tokens.spacing2Xs,
        borderRadius: tokens.borderRadiusSmall,
        backgroundColor: tokens.green400,
        position: 'absolute',
        bottom: '11%',
        left: '50%',
        transform: 'translate(-50%, -11%)',
      }),
    };

    return (
      <>
        <DayContent
          date={date}
          displayMonth={displayMonth}
          activeModifiers={activeModifiers}
        />
        {activeModifiers.scheduled && (
          <span
            className={styles.scheduleIndicator}
            data-test-id={`schedule-indicator`}
          />
        )}
      </>
    );
  };

  return (
    <Calendar
      mode="single"
      selected={selectedDay}
      onSelect={setSelectedDay}
      components={{ DayContent: CustomDayContent }}
      modifiers={{ scheduled: daysWithSchedule }}
    />
  );
}function CustomDayContentExample() {
  const today = new Date();
  const tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  const yesterday = new Date();
  yesterday.setDate(yesterday.getDate() - 1);

  const daysWithSchedule = [yesterday, tomorrow];
  const [selectedDay, setSelectedDay] = useState(today);

  const CustomDayContent = ({ date, displayMonth, activeModifiers }) => {
    const styles = {
      scheduleIndicator: css({
        width: tokens.spacingS,
        height: tokens.spacing2Xs,
        borderRadius: tokens.borderRadiusSmall,
        backgroundColor: tokens.green400,
        position: 'absolute',
        bottom: '11%',
        left: '50%',
        transform: 'translate(-50%, -11%)',
      }),
    };

    return (
      <>
        <DayContent
          date={date}
          displayMonth={displayMonth}
          activeModifiers={activeModifiers}
        />
        {activeModifiers.scheduled && (
          <span
            className={styles.scheduleIndicator}
            data-test-id={`schedule-indicator`}
          />
        )}
      </>
    );
  };

  return (
    <Calendar
      mode="single"
      selected={selectedDay}
      onSelect={setSelectedDay}
      components={{ DayContent: CustomDayContent }}
      modifiers={{ scheduled: daysWithSchedule }}
    />
  );
}
Open in Playground

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.
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/main/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}.
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.
firstWeekContainsDate	1 4 The day of January, which is always in the first week of the year. Can be either Monday (`1`) or Thursday (`4`).
fixedWeeks	false true Display six weeks per months, regardless the month’s number of weeks. To use this prop, {@link showOutsideDays} must be set.
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.
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. 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.
lang	string Add the language tag to the container element.
locale	Locale The date-fns locale object used to localize dates.
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.
nonce	string A cryptographic nonce ("number used once") which can be used by Content Security Policy for the inline `style` attributes.
numberOfMonths	number The number of displayed months.
onDayBlur	DayFocusEventHandler Event callback fired when the user blurs from a day.
onDayClick	DayClickEventHandler Event callback fired when the user clicks on a day.
onDayFocus	DayFocusEventHandler Event callback fired when the user focuses on a day.
onDayKeyDown	DayKeyboardEventHandler Event callback fired when the user presses a key on a day.
onDayKeyPress	DayKeyboardEventHandler Event callback fired when the user presses a key on a day.
onDayKeyUp	DayKeyboardEventHandler Event callback fired when the user presses a key on a day.
onDayMouseEnter	DayMouseEventHandler Event callback fired when the user hovers on a day.
onDayMouseLeave	DayMouseEventHandler Event callback fired when the user hovers away from a day.
onDayPointerEnter	DayPointerEventHandler Event callback fired when the pointer enters a day.
onDayPointerLeave	DayPointerEventHandler Event callback fired when the pointer leaves a day.
onDayTouchCancel	DayTouchEventHandler Event callback when a day touch event is canceled.
onDayTouchEnd	DayTouchEventHandler Event callback when a day touch event ends.
onDayTouchMove	DayTouchEventHandler Event callback when a day touch event moves.
onDayTouchStart	DayTouchEventHandler Event callback when a day touch event starts.
onMonthChange	MonthChangeEventHandler Event fired when the user navigates between months.
onNextClick	MonthChangeEventHandler Event callback fired when the next month button is clicked.
onPrevClick	MonthChangeEventHandler Event callback fired when the previous month button is clicked.
onSelect	SelectSingleEventHandler Event fired when a day is selected.
onWeekNumberClick	WeekNumberClickEventHandler Event callback fired when the week number is clicked. Requires `showWeekNumbers` set.
pagedNavigation	false true Paginate the month navigation displaying the {@link numberOfMonths} at time.
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.
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.
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.
styles	Partial<Omit<StyledElement<CSSProperties>, InternalModifiersElement>> Change the inline styles of the HTML elements.
title	string Add a `title` attribute to the container element.
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.

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

Import

Examples

Basic

Limiting the date range

Multiple months

Indicators

Custom Day content

Props (API reference)

Name

Type

Default

Accessibility

Help improve this page