Month
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 |
---|---|---|---|---|---|---|
Localization
All @mantine/dates components are built with dayjs library.
Default locale is en
, to change this follow dayjs localization guide:
Then set locale
prop in component:
Пн | Вт | Ср | Чт | Пт | Сб | Вс |
---|---|---|---|---|---|---|
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 |
---|---|---|---|---|---|---|
Weekend days
You can set days of week that should be treated as weekend with weekendDays
prop:
Mo | Tu | We | Th | Fr | Sa | Su |
---|---|---|---|---|---|---|
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 |
---|---|---|---|---|---|---|
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 |
---|---|---|---|---|---|---|
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 |
---|---|---|---|---|---|---|
Hide weekdays names
To hide weekdays names row set hideWeekdays
prop:
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 daymodifiers
– modifiers that are applied to day
Modifiers
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 |
---|---|---|---|---|---|---|
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 |
---|---|---|---|---|---|---|
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 |
---|---|---|---|---|---|---|
Month component props
Name | Type | Description |
---|---|---|
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
Name | Static selector | Description |
---|---|---|
month | .mantine-Month-month | Root element |
weekdayCell | .mantine-Month-weekdayCell | Table th element, wraps weekday |
weekday | .mantine-Month-weekday | Weekday title |
cell | .mantine-Month-cell | Table cell, wraps day |
day | .mantine-Month-day | Day button |