javascript - React Big Calendar 如何在月 View 中设置一天的样式

Question

如图所示，我想为个别事件设置样式。

Example of how it should look

使用 slotpropgetter 可以有条件地渲染样式。

slotPropGetter = date => {
    const CURRENT_DATE = moment().toDate();
    let backgroundColor;

    if (moment(date).isBefore(CURRENT_DATE, "month")) {
        backgroundColor = "#f7f8f9";
    }

    var style = {
        backgroundColor
    };
    return {
        style: style
    };
};

所以“解决方案”是 DateCellWrapper，它对我不起作用，或者我以错误的方式实现了它

const DateCellWrapper = ({ value, children }) => {
    console.log("DateCellWrapper")
    const style = {
        backgroundColor: "#000",
    };

    return (
        <div style={style}>{children}</div>
    );
}

它甚至不输出我的 console.log，所以..有人知道吗？ :p

Answer 1

components prop可用于单独更改日历部分的呈现方式:

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 wrapper
const 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>
  }
}