Mini Calendar

import { MiniCalendarDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.MiniCalendar);

Usage

Number of days

Use numberOfDays prop to control how many days are displayed at once. The default value is 7.

getDayProps

Use getDayProps to add custom props to days, for example, assign styles to weekends:

Min and max dates

Use minDate and maxDate props to limit date selection:

Localization

You can change localization both on component level with locale prop and globally with DatesProvider.

Alternatively, pass a function to the monthLabelFormat prop to format month labels with Intl.DateTimeFormat instead of dayjs – see formatting without dayjs.

Accessibility

Use nextControlProps and previousControlProps to add aria-label and other props to navigation buttons:

import { MiniCalendar } from '@mantine/dates';

function Demo() {
  return (
    <MiniCalendar
      nextControlProps={{ 'aria-label': 'Next range' }}
      previousControlProps={{ 'aria-label': 'Previous range' }}
    />
  );
}