customised timeslot bg color change the hours column as well

[Gulivertx]

Do you want to request a feature or report a bug?

Hmm not sur if it is a bug or something I'm doing not correctly...

What's the current behavior?

I'm using a customised react-big-calendar where for each timeslot in week and day views I apply a specific background color coming from a user calendar settings. My problem is, when I apply a background color for the first day of the view, the column which show the hours get the same background color. To apply tis background color I used the "slotPropGetter".

Here is my method for the slotPropGetter :

const reactBigCalendarTimeslotStyle = (date: Date) => {
            let backgroundColor = this.props.theme.palette.white; // Default background color is white
            const pinkColor = this.props.theme.name === 'light' ? '#fff2fe' : '#eb75dd';
            const orangeColor = this.props.theme.name === 'light' ? '#ffecdb' : '#e67e22';
            const grayColor = this.props.theme.name === 'light' ? this.props.theme.palette.neutralLighterAlt : this.props.theme.palette.neutralLighterAlt;

            const {config} = this.props;

            if (config?.calendar) {
                switch (config.calendar[date.getDay()][moment(date).format('Hmm')]) {
                    case false:
                        backgroundColor = grayColor;
                        break;
                    case 'normal':
                        backgroundColor = this.props.theme.palette.white;
                        break;
                    case 'pregnancy':
                        backgroundColor = pinkColor;
                        break;
                    case 'urgency':
                        backgroundColor = orangeColor;
                        break;
                    default:
                        backgroundColor = this.props.theme.palette.white;
                        break;
                }
            }

            return {
                style: {
                    backgroundColor: backgroundColor,
                }
            };
        };

Browser : in all tested, last chrome, firefox, electron...
react-big-calendar version : 0.28.0

What's the expected behavior?

I would like to keep the first column with white background and the the first day and each other will get specific background color by timeslot.

[Gulivertx]

I think it's a bug because when I tried in code pen the exemple from website I get the same problem. But on the example on the website there is not this problem. Which version of big calendar is used on the website ?
https://jquense.github.io/react-big-calendar/examples/index.html#rendering

My code pen : https://codepen.io/gulivertx/pen/gOMpbXy
Navigate to the day view and choose the 7 date.

[Abderahman88]

I didn't check on the latest version, but I also have this problem.

It is because of first time-column is rendered as the other timeslots. (TimeSlotGroup)
So the custom class will also be applied on this column.

 render() {
    const { resource, components, getters } = this.props

    return (
      <div className="rbc-time-gutter rbc-time-column">
        {this.slotMetrics.groups.map((grp, idx) => {
          return (
            <TimeSlotGroup
              key={idx}
              group={grp}
              resource={resource}
              components={components}
              renderSlot={this.renderSlot}
              getters={getters}
            />
          )
        })}
      </div>
    )

I tweaked the code a bit and added an extra property to ignore the first column.

But like you said, on the official website it works. Anyone any explanation for this?

[Gulivertx]

thanks for your answer.
Ok but what did you do as tweak to get it work ?
Did you modify the source code of this https://github.com/jquense/react-big-calendar/blob/master/src/TimeGutter.js directly or the tweak is done in your source code ?

I'm very intersted for a temporary workaround even in react-big-calendar source code...

[Abderahman88]

TimeSlotGroup.js

• added property 'isGutter' (property to tell if this is the first column)
  

TimeGutter.js

• set isGutter = True
  

[Gulivertx]

Nice, thank you! Workaround works until we may solve this issue

[Gulivertx]

by the way the proptype for isGutter should be bool and not object ;)

isGutter: PropTypes.bool,

[YooshAI]

@Gulivertx , would like to learn how you added the side color bars to the event box? Thanks.

[Gulivertx]

@YooshAI : I use eventPropsGetter to apply personal styles to the events.

Here is my method to modify the border :

const reactBigCalendarEventStyle = (event: IBigCalendarItem) => {
            let borderColor = this.props.theme.palette.blue;
            let borderLeftColor = this.props.theme.palette.neutralTertiary;
            let borderLeftSize = 1;

            switch (event.type) {
                case 'gynecological':
                    borderColor = this.props.theme.palette.greenLight;
                    break;
                case 'obstetric':
                    //borderColor = this.props.theme.palette.blue;
                    borderColor = '#eb75dd';
                    break;
                case 'holidays':
                    borderColor = this.props.theme.palette.yellow;
                    break;
                case 'representant':
                    borderColor = this.props.theme.palette.red;
                    break;
                case "blocked":
                    borderColor = this.props.theme.palette.blue;
                    break;
            }

            switch (event.status) {
                case 'arrived':
                    borderLeftColor = '#81ecec';
                    borderLeftSize = 16;
                    break;
                case 'invoiced':
                    borderLeftColor = '#ffeaa7';
                    borderLeftSize = 16;
                    break;
                case 'missed':
                    borderLeftColor = '#74b9ff';
                    borderLeftSize = 16;
                    break;
                case 'direct_payment':
                    borderLeftColor = '#00cec9';
                    borderLeftSize = 16;
                    break;
            }

            const style = {
                backgroundColor: this.props.theme.palette.neutralTertiaryAlt,
                borderRadius: '0px',
                //opacity: opacity,
                color: this.props.theme.palette.neutralPrimary,
                borderLeft: '8px solid ' + borderColor,
                borderTop: '1px solid ' + this.props.theme.palette.neutralTertiary,
                borderRight: borderLeftSize + 'px solid ' + borderLeftColor,
                borderBottom: '1px solid ' + this.props.theme.palette.neutralTertiary,
                //display: 'block'
            };

            return {
                style: style
            };
        };

[YooshAI]

nice, i used borderLeft also but your implementation is more complete. thanks for sharing.

[rikinshah23]

@Gulivertx @YooshAI Hey Guys, could anyone pls guide me a little bit to achieve this please?
I need to those side color bars to event cards as well.

Thank you.

[igorturturro]

An easier solution that doesn't require changing the library. Just import a CSS file reachable for your calendar component, with:

.rbc-time-gutter > .rbc-timeslot-group > .rbc-time-slot {
background-color: #color !important;
}

Have fun!

[Gulivertx]

@igorturturro nice, thank's !