How to modify the layout of the calendar component of MUI when using the DatePicker?

Question

I am using material UIs DatePicker component in one of my projects.

But I want to change the default UI provided by the MUI of the calendar component.

I am able to change the color and font of the calendar by using the theme in the root of the projects.

What I want now is to change the layout of the calendar.

This is the calendar of MUI

But I want to customize to this layout

Here you can see that in MUI the month select button is on the left and the arrows are on the right. But what I want is to place the month select button on center of the arrow icons. Also I want to change the icons as design. Another thing is the weekdays are in one character But I want in two character.

I am using the latest version of the MUI-X which is 6.16.3.

Here is my datepicker component

<DatePicker
  {...field}
  label={item?.placeholder}
  slots={{
    openPickerIcon: CalendarTodayOutlinedIcon,
  }}
  openTo="day"
  views={["year", "month", "day"]}
  format="dd.MM.yyyy"
  slotProps={{
    textField: {
      InputLabelProps: {
        sx: {
          fontSize: "1rem",
          color: "#5F5955",
          fontWeight: 400,
          "&.Mui-focused": { color: "#5F5955" },
        },
      },
      variant: "filled",
      // required: item?.is_required,
      fullWidth: true,
      size: "small",
      className: classes.input,
      InputProps: {
        style: { fontWeight: 700 },
        disableUnderline: true,
      },
      error: Boolean(error),
    },
  }}
/>

So to summarise I want three things:

1. Change the layout of the month selector. Bring it to the center.
2. Change the arrow icons as the design.
3. Convert the weekdays from one character to two characters.

Answer 1

You can use slots props of DatePicker to change components of the DatePicker
OR
You can use slotProps props of DatePicker to change props of components of the DatePicker

And
You can use dayOfWeekFormatter prop to change weekdays format.

<DatePicker
   {...yourPeops}
   slots={
      {
         // leftArrowIcon: () => 'LL',    // Custom left arrow component
         // rightArrowIcon: () => 'RR'    // Custom right arrow component
      }
   }
   slotProps={{
      // 1. Change the layout of the month selector.
      calendarHeader: {
         sx: {
            position: "relative",
            '& .MuiPickersArrowSwitcher-root': {
                width: 0
             },
             "& .MuiPickersCalendarHeader-labelContainer": {
                margin: "auto"
             },
             "& .MuiIconButton-edgeEnd": {
                position: "absolute",
                left: 0, top: 0, bottom: 0
             },
             "& .MuiIconButton-edgeStart": {
                position: "absolute",
                right: 0, top: 0, bottom: 0
            }
         }
      },
      // 2. Change the arrow icons styles.
      leftArrowIcon: {
         sx: { color: "#000", fontSize: "2rem" }
      },
      rightArrowIcon: {
         sx: { color: "#000", fontSize: "2rem" }
      },
   }}
   // 3. Convert the weekdays format
   dayOfWeekFormatter={(_day: string, date: TDate) => _day}
   // or you can format `date` as you like
/>