React-big-calendar: How to style events in week/month view

[buddythumbs]

Hi,

Super lib btw - really appreciate what you have done here!

Sorry for asking possible already answered question.

I am providing a custom event and toolbar via:

                        components={{
                            event: this.Event,
                            eventWrapper: EventWrap,
                            toolbar: CustomToolbar,
                            agenda: {
                                event: this.EventAgenda
                            },
                            week: {
                                event: WeekEvent
                            }
                        }}

And this works well - however I want to style the container of the Event. As you can see I have the EventWrap component defined but there is another wrapper between that and the event (the container of the event time and description, also the container containing the styles).

How can I style this container?

I am looking for an example if possible.

I did see in another issue someone trying to style an EventCell but I don't see the api allowing to input EventCell ???

[jquense]

The EventPropGetter prop

[buddythumbs]

Could you expand on that please?

I provide the following on init:

eventPropGetter={(event,start,end,isSelected)=>{
                            return className?: string, style?: Object
                        },

And return either a className or style object based on whatever logic I choose based on event?

[jquense]

yup

[buddythumbs]

You wouldn't have an example of it in use for custom styling would you?

The reason I ask is because I am using the following code to style the event based on status:

import styles from './Scheduler.css'
...

eventPropGetter={(event,start,end,isSelected)=>{
    return event.status === 30 ? styles.approve:styles.tbd
}}

Scheduler.css:

.approved{
    background-color:#34B233;
    border-radius:0px;
}
.tbd{
    background-color:#FF7F45;
    border-radius:0px;
}
.rejected{
    background-color:#D04424;
    border-radius:0px;
}

[buddythumbs]

Got it:

const eventStyles = {
    event: {
        backgroundColor:'#1C7DDB',
        color: 'white',
        borderRadius:0
    },
}

...

eventPropGetter={(event,start,end,isSelected)=>{
    return {
        style: eventStyles.event
    }
}}