javascript - React Big Calendar how to style a single day in the month view - Stack Overflow

admin管理员组

文章数量:1202776

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

Example of how it should look

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

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

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

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

Example of how it should look

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

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

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

• javascript
• css
• reactjs
• react-big-calendar

Share Improve this question Follow edited Apr 19, 2018 at 14:29 Ignacio Ara 2,58222 gold badges2727 silver badges3737 bronze badges asked Apr 19, 2018 at 13:01 mokimomokimo 7311 gold badge11 silver badge33 bronze badges 1

• So if its not outputting your console log code, it means; app doesnt even recognize DataCellWrapper and its not rendering it. You should start to solve this render problem first. I think if you can make your app render DataCellWrapper which must be easy, you can solve your problem on your own. – jrSakizci Commented Apr 19, 2018 at 13:14

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 23

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

Working Example:

It has the following type definition:

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

本文标签： javascriptReact Big Calendar how to style a single day in the month viewStack Overflow