How to add a "dot" below a DatePicker?

Question

I'm currently needing to show a little "dot" below some dates on MUIX DatePicker, something like this.
May someone help me? Thank you

Answer 1

You can do it by manipulating ‍‍‍‍renderDay prop in DatePicker component.

<LocalizationProvider dateAdapter={AdapterDayjs}>
    <DatePicker
        label="Basic example"
        value={value}
        onChange={(newValue) => {
            setValue(newValue);
        }}
        renderInput={(params) => <TextField {...params} />}
        renderDay={(day, _value, DayComponentProps) => {
            return (
                <Badge
                    key={day.toString()}
                    overlap="circular"
                    badgeContent={
                        (!DayComponentProps.outsideCurrentMonth && [1, 3, 23].some(x => x === day.date())) ? "⚫" : undefined}
                    anchorOrigin={{
                        vertical: 'bottom',
                        horizontal: 'right'
                    }}
                    sx={{
                        '& .MuiBadge-badge': {
                            right: '50%'
                        }
                    }}
                >
                    <PickersDay {...DayComponentProps} />
                </Badge>
            );
        }}
    />
</LocalizationProvider>

Notice that, by means of :

anchorOrigin = {{
    vertical: 'bottom',
        horizontal: 'right'
}}
sx = {{
    '& .MuiBadge-badge': {
        right: '50%'
    }
}}

I placed the dot (bullet) at the center bottom of the days number. Also this means :

badgeContent = {
    (!DayComponentProps.outsideCurrentMonth && [1, 3, 23].some(x => x === day.date())) ? "⚫" : undefined
}

If the days that are being shown in the calendar frame are neither related to the current month nor in [1, 3, 23](Which naturally depends on your choice), do not show the dot.