[pickers][DatePicker] change borderRadius of selected day for dateCalendar

[ImamJanjua]

Steps to reproduce

No response

Current behavior

No response

Expected behavior

No response

Context

Hi, I am trying to change the borderRadius for the days which are been selected or like the todays day, but not working for me

<DateCalendar
  {...props}
  slots={{
    leftArrowIcon: LeftArrowIcon,
    rightArrowIcon: RightArrowIcon,
  }}
  slotProps={{
    day: {
      sx: {
        "::selection": {
          borderRadius: "10px",
        },
      },
    },
  }}
/>

Your environment

No response

Search keywords: .

[LukasTy]

@ImamJanjua is this something that you are looking for? 🤔
Consider checking the customization playground for more examples. 😉

[ImamJanjua]

@LukasTy thanks man!

another thing, calendar is not responsive at all and appears to have fixed dimension, does it have something to do with the breakpoints?

Bildschirmaufnahme.2024-05-13.um.10.17.26.mov

[LukasTy]

another thing, calendar is not responsive at all and appears to have fixed dimension, does it have something to do with the breakpoints?

Yes, the calendar has a fixed width just as the material design suggests.
Do you have suggestions on how to make it responsive? 🤔

[ImamJanjua]

@LukasTy shouldn't u know that? 😄

[LukasTy]

shouldn't u know that? 😄

Well, that's basically an answer—we don't know of a good way to make the calendar UX friendly and responsive, that's why it has the same fixed width as the material design suggests.
It's enough to fit in the portrait orientation of all the modern smallest mobile devices, so, it seems to do the trick. 🤔

[ImamJanjua]

@LukasTy does the calendar has breakpoints and can i acess and modify them?

[LukasTy]

does the calendar has breakpoints and can i acess and modify them?

No, there are no explicit breakpoints that are used.
If you want to use the theme breakpoints, then access them and override the styles accordingly. 👍

[ImamJanjua]

@LukasTy thanks!

do u may know how can change the view with custom header?

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,
        }}                   />
   
  );
};

[michelengelen]

@LukasTy thanks!

do u may know how can change the view with custom header?

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,
        }}                   />
   
  );
};

see this #13116 ... is this issue resolved and can be closed @ImamJanjua?

[github-actions]

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