[DatePicker] smaller static date picker on desktop

[scottlamb]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

I'd like the static date picker to be smaller on desktop, perhaps matching the material ui specification:

The specification describes a total width of 256 pixels. material-ui's implementation is 320 pixels wide. This is wide enough to be problematic for my layout.

I'd prefer smaller by default, but a well-supported way to customize sizing would also be fine with me.

Examples 🌈

https://codesandbox.io/s/relaxed-fermat-o3htk?file=/src/Demo.tsx shows both the original formatting and roughly the formatting I'd like. The latter I managed to get with <Box sx={{...}}> (quoting the relevant part below). Unfortunately, it's ridiculously fragile. Eg, I had to adapt it when upgrading from 5.0.0-alpha.26 to 5.0.0-beta.3.

      <Box
        sx={{
          "& > div": {
            minWidth: 256
          },
          "& > div > div, & > div > div > div, & .MuiCalendarPicker-root": {
            width: 256
          },
          "& .MuiTypography-caption": {
            width: DATE_SIZE,
            margin: 0
          },
          "& .PrivatePickersSlideTransition-root": {
            minHeight: DATE_SIZE * 6
          },
          '& .PrivatePickersSlideTransition-root [role="row"]': {
            margin: 0
          },
          "& .MuiPickersDay-dayWithMargin": {
            margin: 0
          },
          "& .MuiPickersDay-root": {
            width: DATE_SIZE,
            height: DATE_SIZE
          }
        }}
      >
        <StaticDatePicker ... />
      </Box>

Motivation 🔦

I'm writing a network video recorder and want a design with a static datepicker in a column. It's static rather than a pop-up because it displays useful context about what dates have video/motion/etc. But space is precious; I have a large main column of video (or tabular data or whatever) to show. So I don't want big touch-friendly targets when I'm on desktop with a mouse or trackpad available.

[oliviertassinari]

Agree, we didn't solve it in the original repo, see the same unresolved issue: https://github.com/mui-org/material-ui-pickers/issues/1648.

[Mheaus]

<Box
        sx={{
          "& > div": {
            minWidth: 256
          },
          "& > div > div, & > div > div > div, & .MuiCalendarPicker-root": {
            width: 256
          },
          "& .MuiTypography-caption": {
            width: DATE_SIZE,
            margin: 0
          },
          "& .PrivatePickersSlideTransition-root": {
            minHeight: DATE_SIZE * 6
          },
          '& .PrivatePickersSlideTransition-root [role="row"]': {
            margin: 0
          },
          "& .MuiPickersDay-dayWithMargin": {
            margin: 0
          },
          "& .MuiPickersDay-root": {
            width: DATE_SIZE,
            height: DATE_SIZE
          }
        }}
      >

Thank you very much, today it seems like there's still zero options to change the size of a static picker in a simple way. At least it works with your sx definition.

I changed the classnames with the classes exported from mui packages. I'm using @mui/x-date-pickers@5.0.9 StaticDatePicker and PickerDay component.

Here's mine :

sx={{
  '& > div > div': {
    minWidth: 256,
  },
  [`& > div > div, & > div > div > div, & > div > div > div > div, & .${calendarPickerClasses.root}`]: {
    width: 256,
  },
  [`& .${pickersCalendarHeaderClasses.root}`]: {
    minHeight: '34px',
    maxHeight: '34px',
    paddingLeft: '16px',
    paddingRight: '8px',
  },
  [`& .${pickersCalendarHeaderClasses.labelContainer}`]: {
    maxHeight: '34px',
  },
  [`& .${typographyClasses.caption}`]: {
    width: DATE_SIZE,
    margin: 0,
  },
  [`& .${pickersSlideTransitionClasses.root}`]: {
    minHeight: DATE_SIZE * 6,
  },
  [`& .${pickersSlideTransitionClasses.root} [role="row"]`]: {
    margin: 0,
  },
  [`& .${pickersDayClasses.root}`]: {
    width: DATE_SIZE,
    height: DATE_SIZE,
  },
  [`& .${pickersDayClasses.dayWithMargin}`]: {
    margin: 0,
  },
}}