Date Range Calendar

The Date Range Calendar lets the user select a range of dates without any input or popper / modal.

Basic usage

MUI X Missing license key

October 2026

SMTWTFS

November 2026

SMTWTFS

import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';

export default function BasicDateRangeCalendar() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateRangeCalendar']}>
        <DateRangeCalendar />
      </DemoContainer>
    </LocalizationProvider>
  );
}

Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

Uncontrolled calendar

MUI X Missing license key

April 2022

SMTWTFS

May 2022

SMTWTFS

Controlled calendar

MUI X Missing license key

April 2022

SMTWTFS

May 2022

SMTWTFS

Form props

The component can be disabled or read-only.

disabled

MUI X Missing license key

April 2022

SMTWTFS

May 2022

SMTWTFS

readOnly

MUI X Missing license key

April 2022

SMTWTFS

May 2022

SMTWTFS

import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';

export default function DateRangeCalendarFormProps() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateRangeCalendar', 'DateRangeCalendar']}>
        <DemoItem label="disabled">
          <DateRangeCalendar
            defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
            disabled
          />
        </DemoItem>
        <DemoItem label="readOnly">
          <DateRangeCalendar
            defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
            readOnly
          />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

Customization

Choose the months to render

You can render up to 3 months at the same time using the calendars prop:

1 calendar

MUI X Missing license key

October 2026

SMTWTFS

2 calendars

MUI X Missing license key

October 2026

SMTWTFS

November 2026

SMTWTFS

import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';

export default function DateRangeCalendarCalendarsProp() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateRangeCalendar', 'DateRangeCalendar']}>
        <DemoItem label="1 calendar">
          <DateRangeCalendar calendars={1} />
        </DemoItem>
        <DemoItem label="2 calendars">
          <DateRangeCalendar calendars={2} />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

You can choose the position where the current month is rendered using the currentMonthCalendarPosition prop. This can be useful when using disableFuture to render the current month and the month before instead of the current month and the month after.

MUI X Missing license key

September 2026

SMTWTFS

October 2026

SMTWTFS

import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';

export default function DateRangeCalendarCurrentMonthCalendarPositionProp() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateRangeCalendar']}>
        <DateRangeCalendar currentMonthCalendarPosition={2} disableFuture />
      </DemoContainer>
    </LocalizationProvider>
  );
}

Custom day rendering

The displayed days are customizable with the Day component slot. You can take advantage of the DateRangePickerDay component.

MUI X Missing license key

April 2022

SMTWTFS

May 2022

SMTWTFS

import * as React from 'react';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import dayjs from 'dayjs';
import { styled } from '@mui/material/styles';
import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';
import type { DateRangePickerDayProps } from '@mui/x-date-pickers-pro/DateRangePickerDay';
import { DateRangePickerDay as MuiDateRangePickerDay } from '@mui/x-date-pickers-pro/DateRangePickerDay';

const DateRangePickerDay = styled(MuiDateRangePickerDay)(({ theme }) => ({
  '--PickerDay-horizontalMargin': 0,
  // Ensures the day increases width, accounting for the padding, matching the width of the week number cell
  boxSizing: 'content-box',
  paddingLeft: '2px',
  paddingRight: '2px',
  variants: [
    {
      props: ({ isHighlighting, outsideCurrentMonth }) =>
        !outsideCurrentMonth && isHighlighting,
      style: {
        borderRadius: 0,
        backgroundColor: theme.palette.primary.main,
        color: theme.palette.common.white,
        '&:hover, &:focus': {
          backgroundColor: theme.palette.primary.dark,
        },
      },
    },
    {
      props: ({ isStartOfHighlighting }) => isStartOfHighlighting,
      style: {
        borderTopLeftRadius: '50%',
        borderBottomLeftRadius: '50%',
      },
    },
    {
      props: ({ isEndOfHighlighting }) => isEndOfHighlighting,
      style: {
        borderTopRightRadius: '50%',
        borderBottomRightRadius: '50%',
      },
    },
  ],
})) as React.ComponentType<DateRangePickerDayProps>;

export default function CustomDateRangePickerDay() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateRangeCalendar']}>
        <DateRangeCalendar
          defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
          slots={{ day: DateRangePickerDay }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

Localization

See the Date format and localization and Translated components documentation pages for more details.

Validation

See the Validation documentation page for more details.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

<DateRangeCalendar />