Skip to content
+

Range Calendar

This page describes how people can use date range views with Material UI and how they can build custom date range views.

Usage with only days

Without Material UI

The user can use the <RangeCalendar.DaysGrid />, <RangeCalendar.DaysGridHeader />, <RangeCalendar.DaysGridHeaderCell />, <RangeCalendar.DaysGridBody />, <RangeCalendar.DaysWeekRow /> and <RangeCalendar.DaysCell /> components to create a grid of days:

import { RangeCalendar } from '@base-ui-components/react-x-date-pickers-pro/range-calendar';

<RangeCalendar.Root value={value} onChange={setValue}>
  {({ visibleMonth }) => (
    <React.Fragment>
      <div>
        <RangeCalendar.GoToMonth target="previous">◀</RangeCalendar.GoToMonth>
        {visibleMonth.format('MMMM YYYY')}
        <RangeCalendar.GoToMonth target="next">▶</RangeCalendar.GoToMonth>
      </div>
      <RangeCalendar.DaysGrid>
        <RangeCalendar.DaysGridHeader>
          {({ days }) =>
            days.map((day) => (
              <RangeCalendar.DaysGridHeaderCell value={day} key={day.toString()} />
            ))
          }
        </RangeCalendar.DaysGridHeader>
        <RangeCalendar.DaysGridBody>
          {({ weeks }) =>
            weeks.map((week) => (
              <RangeCalendar.DaysWeekRow value={week}>
                {({ days }) =>
                  days.map((day) => (
                    <RangeCalendar.DaysCell value={day} key={day.toString()} />
                  ))
                }
              </RangeCalendar.DaysWeekRow>
            ))
          }
        </RangeCalendar.DaysGridBody>
      </RangeCalendar.DaysGrid>
    </React.Fragment>
  )}
</RangeCalendar.Root>;

With Material UI

The user can use the <DateRangeCalendar />:

import { DateRangeCalendar } from '@mui/x-date-pickers/DateCalendar';

<DateRangeCalendar value={value} onChange={setValue} />;