Calendar

Usage

Use Calendar component to create custom date pickers if DatePicker component does not meet your requirements. Calendar supports all DatePicker props and some other props that are listed in props table – check it out to learn about all component features.

By default, Calendar works the same way as DatePicker component but does not include any logic of dates selection:

import { Group } from '@mantine/core';
import { Calendar } from '@mantine/dates';

function Demo() {
  return (
    <Group position="center">
      <Calendar />
    </Group>
  );
}

Calendar component props

| Name | Type | Description | | ------------------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | | ariaLabels | CalendarAriaLabels | aria-label attributes for controls on different levels | | columnsToScroll | number | Number of columns to scroll when user clicks next/prev buttons, defaults to numberOfColumns | | date | Date | Date that is displayed, used for controlled component | | decadeLabelFormat | string \| ((startOfDecade: Date, endOfDecade: Date) => ReactNode) | dayjs label format to display decade label or a function that returns decade label based on date value, defaults to "YYYY" | | defaultDate | Date | Initial date that is displayed, used for uncontrolled component | | defaultLevel | "month" \| "year" \| "decade" | Initial level displayed to the user (decade, year, month), used for uncontrolled component | | |