MUI календарь. Как отобразить месяцы?

Question

[Abykeev]

Есть маленький календарь MUI:
В одном окне есть 2 компонента:
1) Маленький календарь
2) Большой календарь

Маленький календарь выглядит так: < DateCalendar />

При выборе какого либо месяца в маленьком календаре, в большом календаре должен отображаться этот месяц.
Как это реализовать? Есть ли знающие mui? Всю документацию прочитал, инфы не нашел

Comments

[Александр]

Оформляйте код с помощью специальных тэгов.

Answer 1

[Александр]

На основе демки из документации.

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 { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { StaticDatePicker } from "@mui/x-date-pickers/StaticDatePicker";
import dayjs, { Dayjs } from "dayjs";

export default function BasicDatePicker() {
  const [date, setDate] = React.useState<Dayjs | null>(dayjs());

  const onDateChange = React.useCallback((value: Dayjs) => {
    setDate(value);
  }, []);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={["DatePicker", "StaticDatePicker"]}>
        <DatePicker<Dayjs>
          value={date}
          views={["month"]}
          onChange={onDateChange}
        />
        <StaticDatePicker<Dayjs>
          value={date}
          orientation="landscape"
          onChange={onDateChange}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

https://codesandbox.io/s/qna-q-1289372-527d47