使用 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将获取第一个和最后一个之间的日期当前显示月份的天数。

Answer 2

按照 github 问题上提出的解决方案进行操作：https://github.com/dmtrKovalenko/material-ui-pickers/issues/680

所以解决方案是实现一个自定义的“渲染日组件”

这是官方示例：https://material-ui-pickers.dev/demo/datepicker#customization

本例实现了renderDay的方法DatePicker。为日历中的每一天调用此方法，并返回要在每天单元格中呈现的组件。

在此示例中，它实现了“周选择”显示，但您可以通过根据日期/所选日期/其他数据应用自定义样式/类名来轻松实现“自定义标记”显示。