如何修改MUI DateCalendar的星期表头与箭头位置？

一、修改星期表头为完整缩写格式（Sun Mon Tue Wed Thu Fri Sat） #

方法1：通过Dayjs本地化配置 #

利用AdapterDayjs的本地化能力，设置英文locale即可让星期表头显示完整缩写：

import * as React from "react";
import { DateCalendar } from "@mui/x-date-pickers/DateCalendar";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import dayjs, { Dayjs } from "dayjs";
import "dayjs/locale/en";

// 全局设置dayjs的英文本地化
dayjs.locale("en");

export default function Calendar(props) {
  const [value, setValue] = React.useState(dayjs("2022-04-17"));
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateCalendar
        value={value}
        onChange={(newValue) => setValue(newValue)}
      />
    </LocalizationProvider>
  );
}

方法2：自定义WeekDay组件 #

如果本地化配置不生效，可直接替换星期表头的渲染组件，完全自定义显示内容：

import * as React from "react";
import { DateCalendar } from "@mui/x-date-pickers/DateCalendar";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import dayjs, { Dayjs } from "dayjs";

// 自定义星期表头单元格组件
const CustomWeekDay = ({ day }: { day: number }) => {
  const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
  return <div style={{ textAlign: "center", padding: "8px" }}>{dayNames[day]}</div>;
};

export default function Calendar(props) {
  const [value, setValue] = React.useState(dayjs("2022-04-17"));
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateCalendar
        value={value}
        onChange={(newValue) => setValue(newValue)}
        components={{ WeekDay: CustomWeekDay }}
      />
    </LocalizationProvider>
  );
}

二、调整月份切换箭头的位置 #

方法1：通过sx属性覆盖默认样式 #

利用MUI的sx内联样式，直接修改箭头容器和按钮的布局：

import * as React from "react";
import { DateCalendar } from "@mui/x-date-pickers/DateCalendar";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import dayjs, { Dayjs } from "dayjs";

export default function Calendar(props) {
  const [value, setValue] = React.useState(dayjs("2022-04-17"));
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateCalendar
        value={value}
        onChange={(newValue) => setValue(newValue)}
        sx={{
          // 调整标题栏整体布局，让箭头和标题均匀分布
          ".MuiPickersCalendarHeader-root": {
            justifyContent: "space-between",
            alignItems: "center",
          },
          // 自定义左侧箭头间距
          ".MuiPickersArrowSwitcher-button--left": {
            marginRight: "12px",
          },
          // 自定义右侧箭头间距
          ".MuiPickersArrowSwitcher-button--right": {
            marginLeft: "12px",
          },
          // 让月份标题居中占满中间空间
          ".MuiPickersCalendarHeader-labelContainer": {
            flex: 1,
            textAlign: "center",
          },
        }}
      />
    </LocalizationProvider>
  );
}

方法2：自定义CalendarHeader组件 #

如果需要完全自定义箭头的样式和位置，可以替换整个月份标题栏组件：

import * as React from "react";
import { DateCalendar } from "@mui/x-date-pickers/DateCalendar";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import dayjs, { Dayjs } from "dayjs";
import IconButton from "@mui/material/IconButton";
import ArrowLeftIcon from "@mui/icons-material/ArrowLeft";
import ArrowRightIcon from "@mui/icons-material/ArrowRight";

// 自定义月份标题栏组件
const CustomCalendarHeader = ({ date, decreaseMonth, increaseMonth }: any) => {
  return (
    <div style={{ 
      display: "flex", 
      alignItems: "center", 
      padding: "8px 16px",
      gap: "16px"
    }}>
      {/* 左侧箭头 */}
      <IconButton onClick={decreaseMonth} size="small">
        <ArrowLeftIcon />
      </IconButton>
      {/* 月份标题 */}
      <span style={{ flex: 1, textAlign: "center", fontSize: "1rem", fontWeight: 500 }}>
        {date.format("MMMM YYYY")}
      </span>
      {/* 右侧箭头 */}
      <IconButton onClick={increaseMonth} size="small">
        <ArrowRightIcon />
      </IconButton>
    </div>
  );
};

export default function Calendar(props) {
  const [value, setValue] = React.useState(dayjs("2022-04-17"));
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateCalendar
        value={value}
        onChange={(newValue) => setValue(newValue)}
        components={{ CalendarHeader: CustomCalendarHeader }}
      />
    </LocalizationProvider>
  );
}

内容的提问来源于stack exchange，提问作者TINTIN