How can I color a specific day with specific time with slotPropGetter of react-big-calendar?

Question

I have a react-big-calendar and I want to get same informations like the day and the start and the end (as a time) for coloring the time and the day slot with slotPropGetter.

My informations from the backend is:

    {   "start": "2019-08-23T13:30:00",
        "end": "2019-08-23T18:00:00",
        "rendering": "background",
        "color": "#f740f7"
    }

I try with slotPropGetter :

slotPropGetter={
                (date) => {
                    for(let i =0; i<this.state.eventsPlanning.length; i++) {
                      if(this.state.eventsPlanning[i].rendering === 'background') {
                        let newStyle ={
                          backgroundColor:'red'
                        }
                        return {
                          className: "rbc-day-slot rbc-time-slot",
                          style: newStyle
                        }
                      }
                    }
                  }
                }

when I run it, it seems all the days are colored, but I want just to color according the start and the end of the informations.

How can I fix that ?

Answer 1

The slotPropGetter method is called when rendering each individual timeslot in the Day and Week views, and the date object passed is a full date/time js Date object for the starting time of the slot. How many times this method is called, per hour long block in these views, is determined by your calendar's step and timeslots properties. So, for instance, the default step is 30 and timeslots is 2, which will pass a date with HH:00 and HH:30 the two times it is called (HH being the actual 24 hour hour). If you changed this to a step of 15 and timeslots of 4 the method will be called four times every hour, incrementing fifteen minutes each time. You would have to use your own date math to then determine which slot cells are being adjusted.