How to add a "dot" below a DatePicker?-CodePudding

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

CodePudding user response：

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.