React Big Calendar如何在月视图中设置一天的样式 [英] React Big Calendar how to style a single day in the month view

问题描述

因此，如图所示，我想为单个事件设置样式.

So as seen on the picture, I want to style individual events.

其外观示例

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

With the slotpropgetter it's possible to conditionally render styles.

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，它要么对我不起作用，要么我以错误的方式实现了它

So the "solution" is the DateCellWrapper, it either doesn't work for me, or I've implemented it in the wrong way

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

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

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

It doesn't even output my console.log, so.. anyone an idea? :p

推荐答案

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

The components prop can be used to individually change how parts of the calendar are rendered:

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

这篇关于React Big Calendar如何在月视图中设置一天的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！