如何为 MUI DateCalendar 设置自定义标题以使其可折叠？

Question

我正在尝试自定义 MUI 的 DateCalendar 组件，希望在其标题中添加一个新的图标按钮，单击它时可能会折叠其内容。

比如这样：

我设法做所有事情，除了实际传递布尔值以显示或不显示其内容，因为我找不到可以更改它的插槽。你知道我还能做什么吗？

这是主要成分：

import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { CalendarProps } from '@typings/components';
import { Dayjs } from 'dayjs';
import { DateCalendar } from '@mui/x-date-pickers';
import { KeyboardArrowDown } from '@mui/icons-material';
import React from 'react';

import { CalendarWrapper, StyledDateCalendar } from './Static-calendar.styles';
import { CustomHeader } from './custom-header/custom-header';

export const StaticCalendar: React.FC<CalendarProps> = props => {
  const { defaultValue, displayToolbar, onChange, views, value, reduceAnimations, ...rest } = props;
  const [collapse, setCollapse] = React.useState(true);

  const handleCollapse = () => setCollapse(prevState => !prevState);
  const DownArrow = () => <KeyboardArrowDown sx={{ fontSize: 24 }} />;

  return (
    <CalendarWrapper>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DateCalendar
          showDaysOutsideCurrentMonth
          value={value}
          defaultValue={defaultValue}
          handleHeaderClick={handleCollapse}
          views={views || ['year', 'month', 'day']}
          reduceAnimations={reduceAnimations}
          onChange={onChange}
          dayOfWeekFormatter={(_day, date) => (date as Dayjs).format('ddd')}
          slots={{
            switchViewIcon: DownArrow,
            calendarHeader: args => (
              <CustomHeader
                handleHeaderClick={handleCollapse}
                currentDate={value}
                collapse={collapse}
                onMonthChange={(value: unknown) => onChange(value)}
                {...args}
              />
            ),
          }}
          {...rest}
        />
      </LocalizationProvider>
    </CalendarWrapper>
  );
};

我尝试了更改 DateCalendar 中的

layout

插槽之类的操作，但它不起作用。我无法精细分析改变

Answer 1

您可以使用

nextIconButton

槽来制作如下解决方案：

function CustomCalendarHeader(props) {
  return (
    <Stack sx={{ mr: 1 }} direction="row">
      <IconButton onClick={props.onClick} title={props.title}>
        <ChevronRightIcon />
      </IconButton>
      <IconButton
        onClick={() => props.setCollapse(!props.collapse)}
        title="Collapse"
      >
        {props.collapse ? (
          <UnfoldMoreIcon sx={{ transform: 'rotate(45deg)' }} />
        ) : (
          <UnfoldLessIcon sx={{ transform: 'rotate(45deg)' }} />
        )}
      </IconButton>
    </Stack>
  );
}

export default function CalendarHeaderComponent() {
  const [collapse, setCollapse] = React.useState(false);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateCalendar']}>
        <DateCalendar
          slots={{ nextIconButton: CustomCalendarHeader }}
          slotProps={{
            nextIconButton: {
              collapse: collapse,
              setCollapse: setCollapse,
            },
          }}
          sx={{
            '& .MuiDateCalendar-viewTransitionContainer': {
              display: collapse ? 'none' : 'block',
            },
          }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

您可以查看 this StackBlitz 以获取实时工作示例。