React Big Calendar如何在月视图中设置一天的样式

Z时代
2024-01-10
分类：问答

因此，如图所示，我想对单个事件进行样式设置。

外观示例

使用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

回答：

该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 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>
);

编辑jp1931172w

它具有以下类型定义：

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