该
components道具可用于单独更改日历各部分的呈现方式:
import React, {Children} from 'react';import BigCalendar from 'react-big-calendar';import moment from 'moment';BigCalendar.momentLocalizer(moment);const CURRENT_DATE = moment().toDate();// example implementation of a wrapperconst ColoredDateCellWrapper = ({children, value}) => React.cloneElement(Children.only(children), { style: { ...children.style, backgroundColor: value < CURRENT_DATE ? 'lightgreen' : 'lightblue', }, });const MyCalendar = props => ( <div style={{height: '100vh', margin: '10px'}}> <BigCalendar events={[]} startAccessor="startDate" endAccessor="endDate" components={{ // you have to pass your custom wrapper here // so that it actually gets used dateCellWrapper: ColoredDateCellWrapper, }} /> </div>);工作示例:
它具有以下类型定义:
{ event?: ReactClass<any>, eventWrapper?: ReactClass<any>, dayWrapper?: ReactClass<any>, dateCellWrapper?: ReactClass<any>, toolbar?: ReactClass<any>, agenda?: { date?: ReactClass<any>, time?: ReactClass<any>, event?: ReactClass<any> }, day?: { header?: ReactClass<any>, event?: ReactClass<any> }, week?: { header?: ReactClass<any>, event?: ReactClass<any> }, month?: { header?: ReactClass<any>, dateHeader?: ReactClass<any>, event?: ReactClass<any> }}


