How to style events in week/month view

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

[m-o-leary]

Got it:

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

...

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

[m-o-leary]

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