K

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

Range

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

Mo
Tu
We
Th
Fr
Sa
Su
const range = [
dayjs(new Date()).startOf('month').toDate(),
dayjs(new Date()).startOf('month').add(4, 'days').toDate(),
];
<Month range={range} month={new Date()} />

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 { useState } from 'react';
import dayjs from 'dayjs';
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 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:

Mo
Tu
We
Th
Fr
Sa
Su
<Month excludeDate={(date) => date.getDay() === 0 || date.getDay() === 6} />

Hide weekdays names

To hide weekdays names row set hideWeekdays prop:

<Month hideWeekdays />

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
<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 cx from 'clsx';
import { createUseStyles } from 'react-jss';
import { theming } from '@mantine/core';
import { Month } from '@mantine/dates';
const useStyles = createUseStyles(
(theme) => ({
outside: {
opacity: 0,
},
weekend: {
color: `${theme.colors.blue[6]} !important`,
},
}),
{ theming }
);
function Demo() {
const classes = useStyles();
return (
<Month
disableOutsideEvents
month={new Date(2021, 7)}
dayClassName={(date, modifiers) =>
cx({ [classes.outside]: modifiers.outside, [classes.weekend]: modifiers.weekend })
}
/>
);
}
Build fully functional accessible web applications with ease
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