[pickers] Allow to customize the month and the year buttons

docs/data/date-pickers/custom-components/custom-components.md

@@ -1,7 +1,7 @@
 ---
 productId: x-date-pickers
 title: Date and Time Pickers - Custom slots and subcomponents
-components: DateTimePickerTabs, PickersActionBar, DatePickerToolbar, TimePickerToolbar, DateTimePickerToolbar, PickersCalendarHeader, PickersRangeCalendarHeader, PickersShortcuts, DateRangePickerToolbar
+components: DateTimePickerTabs, PickersActionBar, DatePickerToolbar, TimePickerToolbar, DateTimePickerToolbar, PickersShortcuts, DateRangePickerToolbar
 ---
 
 # Custom slots and subcomponents
@@ -219,34 +219,6 @@ Each component comes with its own toolbar (`DatePickerToolbar`, `TimePickerToolb
 
 {{"demo": "ToolbarComponent.js"}}
 
-## Calendar header
-
-The calendar header is available on any component that renders a calendar to select a date or a range of dates.
-It allows the user to navigate through months and to switch to the month and year views when available.
-
-### Component props
-
-You can pass props to the calendar header as shown below:
-
-{{"demo": "CalendarHeaderComponentProps.js", "defaultCodeOpen": false}}
-
-### Component
-
-You can pass custom components to replace the header, as shown below:
-
-{{"demo": "CalendarHeaderComponent.js", "defaultCodeOpen": false}}
-
-When used with a date range component,
-you receive three additional props to let you handle scenarios where multiple months are rendered:
-
-- `calendars`: The number of calendars rendered
-- `month`: The month used for the header being rendered
-- `monthIndex`: The index of the month used for the header being rendered
-
-The demo below shows how to navigate the months two by two:
-
-{{"demo": "CalendarHeaderComponentRange.js", "defaultCodeOpen": false}}
-
 ## Arrow switcher
 
 The following slots let you customize how to render the buttons and icons for an arrow switcher component—the component

docs/data/date-pickers/custom-views/MonthButtonComponent.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
+
+const CustomMonthButton = styled('button')({
+  margin: '8px 0',
+  height: 36,
+  width: 72,
+});
+
+export default function MonthButtonComponent() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DateCalendar']}>
+        <DateCalendar
+          slots={{ monthButton: CustomMonthButton }}
+          views={['month', 'day']}
+          openTo="month"
+        />
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/custom-views/MonthButtonComponent.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
+
+const CustomMonthButton = styled('button')({
+  margin: '8px 0',
+  height: 36,
+  width: 72,
+});
+
+export default function MonthButtonComponent() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DateCalendar']}>
+        <DateCalendar
+          slots={{ monthButton: CustomMonthButton }}
+          views={['month', 'day']}
+          openTo="month"
+        />
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/custom-views/MonthButtonComponent.tsx.preview

@@ -0,0 +1,5 @@
+<DateCalendar
+  slots={{ monthButton: CustomMonthButton }}
+  views={['month', 'day']}
+  openTo="month"
+/>

docs/data/date-pickers/custom-views/MonthButtonComponentProps.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
+
+export default function MonthButtonComponentProps() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DateCalendar']}>
+        <DateCalendar
+          slotProps={{
+            monthButton: {
+              sx: { border: '1px red solid' },
+            },
+          }}
+          views={['month', 'day']}
+          openTo="month"
+        />
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/custom-views/MonthButtonComponentProps.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
+
+export default function MonthButtonComponentProps() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DateCalendar']}>
+        <DateCalendar
+          slotProps={{
+            monthButton: {
+              sx: { border: '1px red solid' },
+            },
+          }}
+          views={['month', 'day']}
+          openTo="month"
+        />
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/custom-views/MonthButtonComponentProps.tsx.preview

@@ -0,0 +1,9 @@
+<DateCalendar
+  slotProps={{
+    monthButton: {
+      sx: { border: '1px red solid' },
+    },
+  }}
+  views={['month', 'day']}
+  openTo="month"
+/>

docs/data/date-pickers/custom-views/YearButtonComponent.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
+
+const CustomYearButton = styled('button')({
+  margin: '8px 0',
+  height: 36,
+  width: 72,
+});
+
+export default function YearButtonComponent() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DateCalendar']}>
+        <DateCalendar slots={{ yearButton: CustomYearButton }} openTo="year" />
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/custom-views/YearButtonComponent.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
+
+const CustomYearButton = styled('button')({
+  margin: '8px 0',
+  height: 36,
+  width: 72,
+});
+
+export default function YearButtonComponent() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DateCalendar']}>
+        <DateCalendar slots={{ yearButton: CustomYearButton }} openTo="year" />
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/custom-views/YearButtonComponent.tsx.preview

@@ -0,0 +1 @@
+<DateCalendar slots={{ yearButton: CustomYearButton }} openTo="year" />

docs/data/date-pickers/custom-views/YearButtonComponentProps.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
+
+export default function YearButtonComponentProps() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DateCalendar']}>
+        <DateCalendar
+          openTo="year"
+          slotProps={{
+            yearButton: {
+              sx: { border: '1px red solid' },
+            },
+          }}
+        />
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/custom-views/YearButtonComponentProps.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
+
+export default function YearButtonComponentProps() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DateCalendar']}>
+        <DateCalendar
+          openTo="year"
+          slotProps={{
+            yearButton: {
+              sx: { border: '1px red solid' },
+            },
+          }}
+        />
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/custom-views/YearButtonComponentProps.tsx.preview

@@ -0,0 +1,8 @@
+<DateCalendar
+  openTo="year"
+  slotProps={{
+    yearButton: {
+      sx: { border: '1px red solid' },
+    },
+  }}
+/>

docs/data/date-pickers/custom-views/custom-views.md

@@ -0,0 +1,73 @@
+---
+productId: x-date-pickers
+title: Date and Time Pickers - Custom views
+components: PickersCalendarHeader, PickersRangeCalendarHeader, PickersMonth, PickersYear
+---
+
+# Custom views
+
+<p class="description">Learn how to override the default DOM structure of the views.</p>
+
+## Calendar header
+
+The calendar header is available on any component that renders a calendar to select a date or a range of dates.
+It allows the user to navigate through months and to switch to the month and year views when available.
+
+### Component props
+
+You can pass props to the calendar header as shown below:
+
+{{"demo": "CalendarHeaderComponentProps.js"}}
+
+### Component
+
+You can pass a custom component to replace the header, as shown below:
+
+{{"demo": "CalendarHeaderComponent.js"}}
+
+When used with a date range component,
+you receive three additional props to let you handle scenarios where multiple months are rendered:
+
+- `calendars`: The number of calendars rendered
+- `month`: The month used for the header being rendered
+- `monthIndex`: The index of the month used for the header being rendered
+
+The demo below shows how to navigate the months two by two:
+
+{{"demo": "CalendarHeaderComponentRange.js"}}
+
+## Year button
+
+This button allows users to change the selected year in the `year` view.
+
+### Component props
+
+You can pass props to the year button as shown below:
+
+{{"demo": "YearButtonComponentProps.js"}}
+
+### Component
+
+You can pass a custom component to replace the year button, as shown below:
+
+{{"demo": "YearButtonComponent.js"}}
+
+## Month button
+
+This button allows users to change the selected month in the `month` view.
+
+:::success
+You can learn more on how to enable the `month` view on the [`DateCalendar` doc page](/x/react-date-pickers/date-calendar/#views).
+:::
+
+### Component props
+
+You can pass props to the month button as shown below:
+
+{{"demo": "MonthButtonComponentProps.js"}}
+
+### Component
+
+You can pass a custom component to replace the month button, as shown below:
+
+{{"demo": "MonthButtonComponent.js"}}

docs/data/pages.ts

@@ -366,6 +366,7 @@ const pages: MuiPage[] = [
             title: 'Custom slots and subcomponents',
           },
           { pathname: '/x/react-date-pickers/custom-layout' },
+          { pathname: '/x/react-date-pickers/custom-views' },
           { pathname: '/x/react-date-pickers/custom-field' },
           { pathname: '/x/react-date-pickers/custom-opening-button' },
           { pathname: '/x/react-date-pickers/playground', title: 'Customization playground' },

docs/pages/x/api/date-pickers/date-calendar.json

@@ -199,6 +199,18 @@
       "description": "Custom component for day.\nCheck the [PickersDay](https://mui.com/x/api/date-pickers/pickers-day/) component.",
       "default": "PickersDay",
       "class": null
+    },
+    {
+      "name": "monthButton",
+      "description": "Button displayed to render a single month in the \"month\" view.",
+      "default": "MonthCalendarButton",
+      "class": null
+    },
+    {
+      "name": "yearButton",
+      "description": "Button displayed to render a single year in the \"year\" view.",
+      "default": "YearCalendarButton",
+      "class": null
     }
   ],
   "classes": [

docs/pages/x/api/date-pickers/date-picker.json

@@ -242,6 +242,18 @@
       "default": "PickersDay",
       "class": null
     },
+    {
+      "name": "monthButton",
+      "description": "Button displayed to render a single month in the \"month\" view.",
+      "default": "MonthCalendarButton",
+      "class": null
+    },
+    {
+      "name": "yearButton",
+      "description": "Button displayed to render a single year in the \"year\" view.",
+      "default": "YearCalendarButton",
+      "class": null
+    },
     {
       "name": "actionBar",
       "description": "Custom component for the action bar, it is placed below the picker views.",