问题描述
当用户单击特定日期时,应更改背景颜色是否有任何想法。 我已经尝试了很多方法,但我无法在选定日期设置背景颜色,如果您对此有任何想法,请帮助我
或
请推荐任何免费图书馆
import React from 'react';
import { Calendar,momentLocalizer } from 'react-big-calendar'
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';
import './calendarCustomization.scss';
const localizer = momentLocalizer( moment );
const CalendarView = props => {
const myEventsList = []
const customDayPropGetter = date => {
if (date.getDate() === 7 || date.getDate() === 15)
return {
className: 'special-day',style: {
border: 'solid 3px ' + (date.getDate() === 7 ? '#faa' : '#afa'),},}
else return {}
}
const selectedDate = (slotInfo) => {
alert(
`selected slot: \n\nstart ${slotInfo.start.toLocaleString()} ` +
`\nend: ${slotInfo.end.toLocaleString()}` +
`\naction: ${slotInfo.action}`
)
}
return <div><Calendar
selectable={true}
className='customCalendar'
localizer={ localizer }
events={ myEventsList }
onSelectSlot={selectedDate }
onNavigate={ (date,view) =>console.log('Date',date,'view',view) }
/></div>
}
export default CalendarView;
解决方法
我真的很喜欢 React Datepicker - https://reactdatepicker.com/。
另一种选择是来自 AntD 库的组件 - https://ant.design/components/time-picker/。
你也可以在 github 上找到很多。一个例子 - https://github.com/wojtekmaj/react-calendar