[pickers][DateCalendar] Change months with custom header?

[ImamJanjua]

Steps to reproduce

.

Current behavior

.

Expected behavior

.

Context

is it possible to change the month of calendar with custom header, so something like that?

const DateCalendar: React.FC<DateCalendarProps<Date>> = (props) => {

  const Header = () => {
    return (
      <div className="flex flex-row justify-center gap-8 ">
         {/* on press go to next month*/}
        <button>
          <ChevronLeft size={22} />
        </button>
          
          {/* on press go to today*/}
        <button>today</button>

        {/* on press go to previous month*/}
        <button>
          <ChevronRight size={22} />
        </button>
      </div>
    );
  };

  return (
    <ThemeProvider theme={theme}>
      <Calendar
        slots={{
          calendarHeader: Header,
        }}                   />
   
  );
};

Your environment

No response

Search keywords: .

[michelengelen]

Yes, this is possible and there is even a full example in the docs: Custom Header Example

Does that help you?

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.