Change weekday label on Material UI picker

Question

I am using a Material UI DatePicker which displays the weekdays as their initial (M, T, W, T, F, S, S). I would like it to be displayed as a the three letter initials of each weekday (MON, TUE, WED, etc).

Seems quite simple, how can I do that? This is my current component:

<DatePicker
    disablePast
    disableToolbar
    autoOk
    variant='static'
    format='MMMM dd, yyyy'
    value={selectedDate}
    onChange={onChange}
/>

For what it's worth I am using LuxonUtils as my DatePicker utils provider.

Answer 1

Im using react-typescript, This one worked for me

  <DateCalendar
        // ... rest of the code
        loading={isLoading}
        showDaysOutsideCurrentMonth={true}
        dayOfWeekFormatter={(_day, date) => date.format('ddd')} // only first 3 letters of the weekday title will be taken
      
      />

Answer 2

I ended up having to do a CSS hack to get this effect. You could probably swap the scss file loaded based on language if you support multiple languages. I wanted 2 letter headers but you get the idea.

.MuiPickersCalendar-daysHeader {
    .MuiPickersCalendar-weekDayLabel:nth-child(1) {
        &::after {
            content: 'u';
            display: inline-block;
        }
    }
    .MuiPickersCalendar-weekDayLabel:nth-child(2) {
        &::after {
            content: 'o';
            display: inline-block;
        }
    }
    .MuiPickersCalendar-weekDayLabel:nth-child(3) {
        &::after {
            content: 'u';
            display: inline-block;
        }
    }
    .MuiPickersCalendar-weekDayLabel:nth-child(4) {
        &::after {
            content: 'e';
            display: inline-block;
        }
    }
    .MuiPickersCalendar-weekDayLabel:nth-child(5) {
        &::after {
            content: 'h';
            display: inline-block;
        }
    }
    .MuiPickersCalendar-weekDayLabel:nth-child(6) {
        &::after {
            content: 'r';
            display: inline-block;
        }
    }
    .MuiPickersCalendar-weekDayLabel:nth-child(7) {
        &::after {
            content: 'a';
            display: inline-block;
        }
    }
}