Calendar

Display calendar with selected date

Import

Source

View source code

Docs

Edit this page

Package

@mantine/dates

Usage

Calendar component allows you either to show static calendar or to capture date input from user. If you need to capture date range use RangeCalendar component.

November 2021

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

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

Controlled month

You can 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 you can set initialMonth prop to set initial month in uncontrolled component:

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

Year and month picker

You can replace calendar label with year and month selects. To use this option provide props:

withSelect – replace label with month and year select
yearsRange – years range that should be used to generate years select options

<Calendar
  withSelect
  minDate={new Date(2020, 0, 1)}
  maxDate={new Date(2025, 11, 31)}
  yearsRange={{ from: 2020, to: 2025 }}
/>

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:

<Calendar
  withSelect
  locale="ru"
  minDate={new Date(2020, 0, 1)}
  maxDate={new Date(2025, 11, 31)}
  yearsRange={{ from: 2020, to: 2025 }}
/>

Label format

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

11/2021

<Calendar 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:

November 2021

<Calendar
  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 excludeDates 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:

November 2021

<Calendar
  excludeDate={(date) => date.getDay() === 0 || date.getDay() === 6}
/>

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
modifiers – modifiers that are applied to day

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;
}

Styles based on date

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):

August 2021

<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):

August 2021

import cx from 'clsx';
import { createUseStyles } from 'react-jss';
import { theming } from '@mantine/core';
import { Calendar } from '@mantine/dates';

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

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


function Demo() {
  const classes = 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

You can customize any part of the calendar with Styles API:

November 2021

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

function Demo() {
  const theme = useMantineTheme();
  const [value, setValue] = useState(new Date());

  return (
    <Calendar
      value={value}
      onChange={setValue}
      month={value}
      fullWidth
      size="xl"
      styles={{
        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,
        },
      }}
    />
  );
}

Accessibility and usability

To make all component controls visible to screen reader set following props:

// When withSelect prop set to false
<Calendar
  withSelect={false}
  nextMonthLabel="Next month" // -> aria-label for button that switches to next month
  previousMonthLabel="Previous month" // -> aria-label for button that switches to previous month
/>

// When withSelect prop set to true
<Calendar
  withSelect
  nextMonthLabel="Next month" // -> aria-label for button that switches to next month
  previousMonthLabel="Previous month" // -> aria-label for button that switches to previous month
  yearLabel="Select year" // -> year select aria-label
  monthLabel="Select month" // -> month select aria-label
/>

Build fully functional accessible web applications with ease

Project

Contribute to Mantine Changelog Releases

Community

Join Discord community Follow on Twitter Email newsletter Github discussions

Feedback

Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good

Leave feedback

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter

Mo	Tu	We	Th	Fr	Sa	Su
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	1	2	3	4	5

Mo	Tu	We	Th	Fr	Sa	Su
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	1	2	3	4	5

Пн	Вт	Ср	Чт	Пт	Сб	Вс
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	1	2	3	4	5

Mo	Tu	We	Th	Fr	Sa	Su
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	1	2	3	4	5

Mo	Tu	We	Th	Fr	Sa	Su
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	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

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