Month

Most basic date related component, displays given month with optional weekdays row
Import

Usage

Month is the most basic @mantine/dates component, it displays single month without any controls to change current month. Component is used as base for Calendar, DatePicker and other components. You can use Month to build custom date or date range pickers that are not included in @mantine/dates but in most cases other components will be more suitable in your application.

Mo
Tu
We
Th
Fr
Sa
Su
import { useState } from 'react';
import { Month } from '@mantine/dates';
function Demo() {
const [value, setValue] = useState(new Date());
return <Month month={value} value={value} onChange={setValue} />;
}

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 { Month } from '@mantine/dates';
function Demo() {
const [value, setValue] = useState(new Date());
return <Month locale="ru" month={value} value={value} onChange={setValue} />;
}

First day of the week

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

Su
Mo
Tu
We
Th
Fr
Sa
import { Month } from '@mantine/dates';
function Demo() {
return <Month month={new Date()} firstDayOfWeek="sunday" />;
}

Weekend days

You can set days of week that should be treated as weekend with weekendDays prop:

Mo
Tu
We
Th
Fr
Sa
Su
import { useState } from 'react';
import { Month } from '@mantine/dates';
function Demo() {
const [value, setValue] = useState(new Date());
return (
<Month
month={value}
value={value}
onChange={setValue}
weekendDays={[5, 6]}
/>
);
}

Range

Highlight date range with range prop. Prop accepts an array with two dates, later date must always go last:

Mo
Tu
We
Th
Fr
Sa
Su
import dayjs from 'dayjs';
import { Month } from '@mantine/dates';
function Demo() {
return (
<Month
month={new Date()}
range={[
dayjs(new Date()).startOf('month').toDate(),
dayjs(new Date()).startOf('month').add(4, 'days').toDate(),
]}
/>
);
}

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:

Mo
Tu
We
Th
Fr
Sa
Su
import dayjs from 'dayjs';
import { useState } from 'react';
import { Month } from '@mantine/dates';
function Demo() {
const initialDate = dayjs(new Date()).startOf('month').add(10, 'days').toDate();
const [value, setValue] = useState(initialDate);
return (
<Month
month={value}
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:

Mo
Tu
We
Th
Fr
Sa
Su
import { useState } from 'react';
import { Month } from '@mantine/dates';
function Demo() {
const [value, setValue] = useState(new Date());
return (
<Month
month={value}
value={value}
onChange={setValue}
excludeDate={(date) => date.getDay() === 0 || date.getDay() === 6}
/>
);
}

Hide weekdays names

To hide weekdays names row set hideWeekdays prop:

import { Month } from '@mantine/dates';
function Demo() {
return <Month hideWeekdays month={new Date()} />;
}

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

Mo
Tu
We
Th
Fr
Sa
Su
import { useMantineTheme } from '@mantine/core';
import { Month } from '@mantine/dates';
function Demo() {
const theme = useMantineTheme();
return (
<Month
month={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):

Mo
Tu
We
Th
Fr
Sa
Su
import { createStyles } from '@mantine/core';
import { Month } from '@mantine/dates';
const useStyles = createStyles((theme) => ({
outside: {
opacity: 0,
},
weekend: {
color: `${theme.colors.blue[6]} !important`,
},
}));
function Demo() {
const { classes, cx } = useStyles();
return (
<Month
disableOutsideEvents
month={new Date(2021, 7)}
dayClassName={(date, modifiers) =>
cx({ [classes.outside]: modifiers.outside, [classes.weekend]: modifiers.weekend })
}
/>
);
}

Add styles to days with Styles API

All components that use Month under the hood also support day styles customization with Styles API. day selector has the following data- attributes:

  • data-outside
  • data-weekend
  • data-selected
  • data-in-range
  • data-first-in-range
  • data-last-in-range

RangeCalendar example:

Mo
Tu
We
Th
Fr
Sa
Su
import { useState } from 'react';
import { RangeCalendar } from '@mantine/dates';
import { Group } from '@mantine/core';
function Demo() {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
return (
<Group position="center">
<RangeCalendar
value={value}
onChange={setValue}
styles={(theme) => ({
day: {
'&[data-selected]': {
backgroundColor: theme.colors.cyan[4],
borderRadius: 100,
position: 'relative',
},
'&[data-in-range]': {
backgroundColor:
theme.colorScheme === 'dark'
? theme.fn.rgba(theme.colors.cyan[7], 0.2)
: theme.colors.cyan[0],
},
'&[data-first-in-range]': {
backgroundColor: theme.colors.cyan[4],
borderRadius: 100,
position: 'relative',
'&::after': {
content: '""',
backgroundColor:
theme.colorScheme === 'dark'
? theme.fn.rgba(theme.colors.cyan[7], 0.2)
: theme.colors.cyan[0],
position: 'absolute',
right: 0,
left: 20,
top: 0,
bottom: 0,
zIndex: -1,
},
},
'&[data-last-in-range]': {
backgroundColor: theme.colors.cyan[4],
borderRadius: 100,
'&::after': {
content: '""',
backgroundColor:
theme.colorScheme === 'dark'
? theme.fn.rgba(theme.colors.cyan[7], 0.2)
: theme.colors.cyan[0],
position: 'absolute',
left: 0,
right: 20,
top: 0,
bottom: 0,
zIndex: -1,
},
},
},
})}
/>
</Group>
);
}

Month component props

NameTypeDescription
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
daysRefs
HTMLButtonElement[][]
Get days buttons refs
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
isDateFirstInRange
(date: Date, modifiers: DayModifiers) => boolean
Should date be displayed as first in range
isDateInRange
(date: Date, modifiers: DayModifiers) => boolean
Should date be displayed as in range
isDateLastInRange
(date: Date, modifiers: DayModifiers) => boolean
Should date be displayed as last in range
locale
string
Locale is used to get weekdays names with dayjs format
maxDate
Date
Maximum possible date
minDate
Date
Minimum possible date
month *
Date
Date at which month should be shown
onChange
(value: Date) => void
Called when day is selected
onDayKeyDown
(payload: DayKeydownPayload, event: KeyboardEvent<HTMLButtonElement>) => void
Called when keydown event is registered on day
onDayMouseEnter
(date: Date, event: MouseEvent<Element, MouseEvent>) => void
Called when onMouseEnter event fired on day button
preventFocus
boolean
Prevent focusing upon clicking
range
[Date, Date]
Selected range
renderDay
(date: Date) => ReactNode
Render day based on the date
size
"xs" | "sm" | "md" | "lg" | "xl"
Controls month days font-size and height
value
Date | Date[]
Selected date or an array of selected dates
weekdayLabelFormat
string
dayjs label format for weekday heading
weekendDays
number[]
Indices of weekend days

Month component Styles API

NameStatic selectorDescription
month.mantine-Month-monthRoot element
weekdayCell.mantine-Month-weekdayCellTable th element, wraps weekday
weekday.mantine-Month-weekdayWeekday title
cell.mantine-Month-cellTable cell, wraps day
day.mantine-Month-dayDay button