Calendar

Display inline calendar to pick single date or dates range

Import

Source

View source code

Docs

Edit this page

Package

@mantine/dates

Usage

Calendar component:

import { useState } from 'react';
import { Calendar } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState(null);
  return <Calendar value={value} onChange={setValue} />;
}

RangeCalendar component (supports the same props as Calendar component):

import { useState } from 'react';
import { RangeCalendar } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<[Date | null, Date | null]>([
    new Date(2021, 11, 1),
    new Date(2021, 11, 5),
  ]);

  return <RangeCalendar value={value} onChange={setValue} />;
}

Multiple selected dates

Set multiple on Calendar component to allow multiple dates selection:

import { useState } from 'react';
import { Calendar } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<Date[]>([]);
  return <Calendar multiple value={value} onChange={setValue} />;
}

Custom day renderer

You can provide your own day renderer function with renderDay prop. For example, it can be used to wrap day with Indicator:

import { useState } from 'react';
import { Calendar } from '@mantine/dates';
import { Indicator } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState(null);

  return (
    <Calendar
      value={value}
      onChange={setValue}
      renderDay={(date) => {
        const day = date.getDate();
        return (
          <Indicator size={6} color="red" offset={8} disabled={day !== 16}>
            <div>{day}</div>
          </Indicator>
        );
      }}
    />
  );
}

Controlled month

Control month that is currently displayed with month and onMonthChange props:

import { useState } from 'react';
import { Calendar } from '@mantine/dates';

function Demo() {
  const [month, onMonthChange] = useState(new Date());
  return <Calendar month={month} onMonthChange={onMonthChange} />;
}

Alternatively, set initialMonth prop to leave it uncontrolled:

<Calendar initialMonth={new Date()} />

Level change

Calendar supports three levels: date, month and year. User can access next level by clicking label between next/previous controls. To disable that, set allowLevelChange prop to false:

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

function Demo() {
  return <Calendar allowLevelChange={false} />;
}

Localization

All @mantine/dates components are built with dayjs library. Default locale is en, to change this follow dayjs localization guide:

// First import locale data
import 'dayjs/locale/ru';

Then set locale prop in component:

import 'dayjs/locale/ru';
import { useState } from 'react';
import { Calendar } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState(null);
  return <Calendar value={value} onChange={setValue} locale="ru" />;
}

First day of the week

Change first day of week with firstDayOfWeek prop. It accepts either sunday or monday as values:

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

function Demo() {
  return <Calendar firstDayOfWeek="sunday" />;
}

Multiple months

Demo is not available, increase viewport size to see it

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

function Demo() {
  return <Calendar amountOfMonths={2} />;
}

Label format

By default, Calendar will display dates in human-readable format. To change that, provide dayjs format string to the labelFormat prop:

import { useState } from 'react';
import { Calendar } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState(null);
  return <Calendar value={value} onChange={setValue} labelFormat="MM/YYYY" />;
}

Min and max dates

Set minDate and maxDate props to define minimum and maximum possible dates. Dates which are not included in available interval will be disabled:

import dayjs from 'dayjs';
import { useState } from 'react';
import { Calendar } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState(null);

  return (
    <Calendar
      value={value}
      onChange={setValue}
      minDate={dayjs(new Date()).startOf('month').add(5, 'days').toDate()}
      maxDate={dayjs(new Date()).endOf('month').subtract(5, 'days').toDate()}
    />
  );
}

Exclude dates

To exclude dates set excludeDate prop with function that receives date as an argument and returns true if date should be disabled. For example, to disable weekends, check if date day is 0 or 6:

import { useState } from 'react';
import { Calendar } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState(null);
  return (
    <Calendar
      value={value}
      onChange={setValue}
      excludeDate={(date) => date.getDay() === 0 || date.getDay() === 6}
    />
  );
}

Render day as props

You can render a custom component with renderDay. The function receives one argument:

date – date object which is used to render day component

Add styles to days

You can apply styles to any day with dayStyle or dayClassName callbacks. Both functions receive two arguments:

date – date object which is used to render day component
modifiers – modifiers that are applied to the day component

Modifiers

interface DayModifiers {
  /** Is date selected and is first or last in range? */
  selectedInRange: boolean;

  /** Is date equal to value? */
  selected: boolean;

  /** Based on minDate, maxDate, excludeDate and disableOutsideEvents props */
  disabled: boolean;

  /** Is date is range? */
  inRange: boolean;

  /** Is date first or last in given range? */
  firstInRange: boolean;
  lastInRange: boolean;

  /** Is date Saturday or Sunday? */
  weekend: boolean;

  /** Is date outside of given month? */
  outside: boolean;
}

dayStyle callback allows you to add inline styles to days. Function must return either styles object or null. In this example, we will add red background to each Friday 13th based on date (first argument):

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

function Demo() {
  const theme = useMantineTheme();

  return (
    <Calendar
      initialMonth={new Date(2021, 7)}
      dayStyle={(date) =>
        date.getDay() === 5 && date.getDate() === 13
          ? { backgroundColor: theme.colors.red[9], color: theme.white }
          : null
      }
    />
  );
}

Styles based on modifiers

dayClassName callback allows you to add className to days. Function must return either className string or null. In this example, we will hide all outside dates and change color of weekends based on modifiers (second argument):

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

const useStyles = createStyles((theme) => ({
  outside: {
    opacity: 0,
  },

  weekend: {
    color: `${theme.colors.blue[6]} !important`,
  },
}));


function Demo() {
  const { classes, cx } = useStyles();

  return (
    <Calendar
      disableOutsideEvents
      initialMonth={new Date(2021, 7)}
      dayClassName={(date, modifiers) =>
        cx({ [classes.outside]: modifiers.outside, [classes.weekend]: modifiers.weekend })
      }
    />
  );
}

Customize with styles API

To customize any part of the calendar use Styles API:

import { useState } from 'react';
import { Calendar } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<Date | null>(new Date());

  return (
    <Calendar
      value={value}
      onChange={setValue}
      fullWidth
      size="xl"
      styles={(theme) => ({
        cell: {
          border: `1px solid ${
            theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2]
          }`,
        },
        day: { borderRadius: 0, height: 70, fontSize: theme.fontSizes.lg },
        weekday: { fontSize: theme.fontSizes.lg },
        weekdayCell: {
          fontSize: theme.fontSizes.xl,
          backgroundColor:
            theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[0],
          border: `1px solid ${
            theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2]
          }`,
          height: 70,
        },
      })}
    />
  );
}

Go back

Getting started – @mantine/dates

Up next

DatePicker – @mantine/dates

Calendar component props

Name	Type	Description
allowLevelChange	boolean	Allow to change level (date – month – year)
amountOfMonths	number	Amount of months
dayClassName	(date: Date, modifiers: DayModifiers) => string	Adds className to day button based on date and modifiers
dayStyle	(date: Date, modifiers: DayModifiers) => CSSProperties	Adds style to day button based on date and modifiers
disableOutsideEvents	boolean	When true dates that are outside of given month cannot be clicked or focused
excludeDate	(date: Date) => boolean	Callback function to determine if day should be disabled
firstDayOfWeek	"sunday" \| "monday"	Set first day of the week
focusable	boolean	Should focusable days have tabIndex={0}?
fullWidth	boolean	Set to true to make calendar take 100% of container width
hideOutsideDates	boolean	Remove outside dates
hideWeekdays	boolean	Set to false to remove weekdays row
initialLevel	"date" \| "month" \| "year"	Initial date selection level
initialMonth	Date	Initial month for uncontrolled calendar
labelFormat	string	dayjs Calendar month label format
locale	string	Locale used for labels formatting, defaults to theme.datesLocale
maxDate	Date	Maximum possible date
minDate	Date	Minimum possible date
month	Date	Month for controlled calendar
multiple	boolean
nextDecadeLabel	string	Next decade control aria-label
nextMonthLabel	string	Next month control aria-label
nextYearLabel	string	Next year control aria-label
onChange	(value: Multiple extends true ? Date[] : Date) => void
onDayMouseEnter	(date: Date, event: MouseEvent<Element, MouseEvent>) => void	Called when onMouseEnter event fired on day button
onMonthChange	(month: Date) => void	Called when month changes
paginateBy	number	Paginate by amount of months
preventFocus	boolean	Prevent focusing upon clicking
previousDecadeLabel	string	Previous decade control aria-label
previousMonthLabel	string	Previous month control aria-label
previousYearLabel	string	Previous year control aria-label
range	[Date, Date]	Selected range
renderDay	(date: Date) => ReactNode	Render day based on the date
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	Calendar size
value	Date \| Date[]
weekdayLabelFormat	string	dayjs label format for weekday heading
weekendDays	number[]	Indices of weekend days
yearLabelFormat	string	dayjs Calendar year label format

RangeCalendar component props

Name	Type	Description
allowLevelChange	boolean	Allow to change level (date – month – year)
allowSingleDateInRange	boolean	Allow one date to be selected as range
amountOfMonths	number	Amount of months
dayClassName	(date: Date, modifiers: DayModifiers) => string	Adds className to day button based on date and modifiers
dayStyle	(date: Date, modifiers: DayModifiers) => CSSProperties	Adds style to day button based on date and modifiers
disableOutsideEvents	boolean	When true dates that are outside of given month cannot be clicked or focused
excludeDate	(date: Date) => boolean	Callback function to determine if day should be disabled
firstDayOfWeek	"sunday" \| "monday"	Set first day of the week
focusable	boolean	Should focusable days have tabIndex={0}?
fullWidth	boolean	Set to true to make calendar take 100% of container width
hideOutsideDates	boolean	Remove outside dates
hideWeekdays	boolean	Set to false to remove weekdays row
initialLevel	"date" \| "month" \| "year"	Initial date selection level
initialMonth	Date	Initial month for uncontrolled calendar
labelFormat	string	dayjs Calendar month label format
locale	string	Locale used for labels formatting, defaults to theme.datesLocale
maxDate	Date	Maximum possible date
minDate	Date	Minimum possible date
month	Date	Month for controlled calendar
nextDecadeLabel	string	Next decade control aria-label
nextMonthLabel	string	Next month control aria-label
nextYearLabel	string	Next year control aria-label
onChange^*	(value: [Date, Date]) => void	Called when selected date changes
onDayMouseEnter	(date: Date, event: MouseEvent<Element, MouseEvent>) => void	Called when onMouseEnter event fired on day button
onMonthChange	(month: Date) => void	Called when month changes
paginateBy	number	Paginate by amount of months
preventFocus	boolean	Prevent focusing upon clicking
previousDecadeLabel	string	Previous decade control aria-label
previousMonthLabel	string	Previous month control aria-label
previousYearLabel	string	Previous year control aria-label
range	[Date, Date]	Selected range
renderDay	(date: Date) => ReactNode	Render day based on the date
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	Calendar size
value^*	[Date, Date]	Selected dates
weekdayLabelFormat	string	dayjs label format for weekday heading
weekendDays	number[]	Indices of weekend days
yearLabelFormat	string	dayjs Calendar year label format

Calendar component Styles API

Name	Static selector	Description
calendarBase	.mantine-Calendar-calendarBase	Root element
calendarHeader	.mantine-Calendar-calendarHeader	Calendar header, contains next/previous and level change controls
calendarHeaderControl	.mantine-Calendar-calendarHeaderControl	Next/previous controls
calendarHeaderLevel	.mantine-Calendar-calendarHeaderLevel	Level change control (year, month, date)
calendarHeaderLevelIcon	.mantine-Calendar-calendarHeaderLevelIcon	Level control icon (caret)
yearPicker	.mantine-Calendar-yearPicker	Year picker root element
yearPickerControls	.mantine-Calendar-yearPickerControls	Year picker controls wrapper
yearPickerControl	.mantine-Calendar-yearPickerControl	Year picker control button
yearPickerControlActive	.mantine-Calendar-yearPickerControlActive	Year picker control active modifier (currently selected year)
monthPicker	.mantine-Calendar-monthPicker	Month picker root element
monthPickerControls	.mantine-Calendar-monthPickerControls	Month picker controls wrapper
monthPickerControl	.mantine-Calendar-monthPickerControl	Month picker control button
monthPickerControlActive	.mantine-Calendar-monthPickerControlActive	Month picker control active modifier (currently selected month)
month	.mantine-Calendar-month	Root element
weekdayCell	.mantine-Calendar-weekdayCell	Table th element, wraps weekday
weekday	.mantine-Calendar-weekday	Weekday title
cell	.mantine-Calendar-cell	Table cell, wraps day
day	.mantine-Calendar-day	Day button

RangeCalendar component Styles API

Name	Static selector	Description
calendarBase	.mantine-RangeCalendar-calendarBase	Root element
calendarHeader	.mantine-RangeCalendar-calendarHeader	Calendar header, contains next/previous and level change controls
calendarHeaderControl	.mantine-RangeCalendar-calendarHeaderControl	Next/previous controls
calendarHeaderLevel	.mantine-RangeCalendar-calendarHeaderLevel	Level change control (year, month, date)
calendarHeaderLevelIcon	.mantine-RangeCalendar-calendarHeaderLevelIcon	Level control icon (caret)
yearPicker	.mantine-RangeCalendar-yearPicker	Year picker root element
yearPickerControls	.mantine-RangeCalendar-yearPickerControls	Year picker controls wrapper
yearPickerControl	.mantine-RangeCalendar-yearPickerControl	Year picker control button
yearPickerControlActive	.mantine-RangeCalendar-yearPickerControlActive	Year picker control active modifier (currently selected year)
monthPicker	.mantine-RangeCalendar-monthPicker	Month picker root element
monthPickerControls	.mantine-RangeCalendar-monthPickerControls	Month picker controls wrapper
monthPickerControl	.mantine-RangeCalendar-monthPickerControl	Month picker control button
monthPickerControlActive	.mantine-RangeCalendar-monthPickerControlActive	Month picker control active modifier (currently selected month)
month	.mantine-RangeCalendar-month	Root element
weekdayCell	.mantine-RangeCalendar-weekdayCell	Table th element, wraps weekday
weekday	.mantine-RangeCalendar-weekday	Weekday title
cell	.mantine-RangeCalendar-cell	Table cell, wraps day
day	.mantine-RangeCalendar-day	Day button

Learn more about Styles API

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter

Mo	Tu	We	Th	Fr	Sa	Su
30	31	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	1	2	3	4	5

Mo	Tu	We	Th	Fr	Sa	Su
30	31	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	1	2	3	4	5

Mo	Tu	We	Th	Fr	Sa	Su
30	31	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	1	2	3	4	5

Пн	Вт	Ср	Чт	Пт	Сб	Вс
30	31	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	1	2	3	4	5

Su	Mo	Tu	We	Th	Fr	Sa
29	30	31	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	1	2	3	4

Mo	Tu	We	Th	Fr	Sa	Su
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Mo	Tu	We	Th	Fr	Sa	Su
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Mo	Tu	We	Th	Fr	Sa	Su
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Mo	Tu	We	Th	Fr	Sa	Su
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Mo	Tu	We	Th	Fr	Sa	Su
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Mo	Tu	We	Th	Fr	Sa	Su
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5