Put some mark in specific date in Material-UI using React

Question

I trying to find this in documentation of Material-UI but I failed.

So I'm asking if is possible to mark some dates, like a events in Google Calendar using Material-UI in React.

[This is my code](https://pastebin.com/UKMYzKxY)

Calendar in my full code:

This is that I want to do:

Answer 1

I encountered the same use case but I didn't find any example.

Here is what I did (inspired by @Ricovitch's answer):

const useStyles = makeStyles((theme) => ({
    dayWithDotContainer: {
        position: 'relative'
    },
    dayWithDot: {
        position: 'absolute',
        height: 0,
        width: 0,
        border: '2px solid',
        borderRadius: 4,
        borderColor: theme.palette.primary.main,
        right: '50%',
        transform: 'translateX(1px)',
        top: '80%'
    }
}))

const CustomDatePicker = (props) => {        
    const {selectedDate, onChange} = props
    const [daysWithDot, setDaysWithDot] = useState([])

    const classes = useStyles()

    const onOpenPicker = () => {
        onPickerViewChange(selectedDate)
    }

    const onPickerViewChange = async(date) => {
        const variables = {
            fromDate: date.clone().startOf('month').format('YYYY/MM/DD'),
            toDate: date.clone().endOf('month').format('YYYY/MM/DD')
        }

        return request(url, query, variables).then(response => {
            setDaysWithDot(response.data.map(day => moment(day).format('YYYY/MM/DD')))
        }).catch((err) => Logger.error(err))
    }

    const renderDayInPicker = (date, selectedDate, dayInCurrentMonth, dayComponent) => {
        if (daysWithDot.includes(date.format('YYYY/MM/DD'))) {
            return (<div className={classes.dayWithDotContainer}>
                {dayComponent}
                <div className={classes.dayWithDot}/>
            </div>)
        }

        return dayComponent    
    }

    return(<MuiPickersUtilsProvider utils={MomentUtils} libInstance={moment}>
                <DatePicker
                    renderDay={renderDayInPicker}
                    onOpen={onOpenPicker}
                    onMonthChange={onPickerViewChange}
                    onYearChange={onPickerViewChange}
                    variant={'dialog'}
                    value={selectedDate}
                    onChange={onChange}
                    showTodayButton
                />
            </MuiPickersUtilsProvider>)
}

This example supports 1 dot under each day and the request is simulated for the example.

onOpen we want to fetch the dates of the current displayed month in the DatePicker (which is the month of the current selected date from the props) and then on every change (year/month), the onPickerViewChange will fetch the dates between the first and last days of the current displayed month.

Answer 2

Follow the solution proposed on your github issue : https://github.com/dmtrKovalenko/material-ui-pickers/issues/680

So the solution is to implement a custom "render day component"

Here is the official example : https://material-ui-pickers.dev/demo/datepicker#customization

This example implements the renderDay method of DatePicker. This method is called for each day in calendar and returns the components to render in each day cell.

In the case of this example it implements a "week selection" display, but you can easily implement your "custom mark" display instead by applying your custom styles/classNames depending of day date / selected date / other data.