reactjs - 使用 React 在 Material-UI 中的特定日期中添加一些标记

Question

我试图在Material-UI的文档中找到这个但我失败了。

所以我问是否可以标记一些日期，例如使用 React 中的 Material-UI 标记 Google 日历中的事件。

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

我的完整代码中的日历:

这就是我想做的:

Answer 1

我遇到了相同的用例，但没有找到任何示例。

这是我所做的(受到@Ricovitch的回答的启发):

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>)
}

此示例支持每天 1 点，并且该示例模拟请求。

onOpen 我们想要获取 DatePicker 中当前显示的月份的日期(即当前从 props 中选择的日期的月份)，然后在每次更改(年/月)时，onPickerViewChange 将获取当前显示月份的第一天和最后一天之间的日期。