Support

Home Forums Event Espresso Premium How to color code each event in calendar differently

How to color code each event in calendar differently

Posted: February 27, 2013 at 12:23 pm


Florian Werner

February 27, 2013 at 12:23 pm

Is there a way to assign different colors per event in the calendar ?

I have 3 categories, but want to be able to override default color codes by category by assigning a given event and its recurrences (from REM) one specific colorI thought I had seen a full tutorial on this but cannot find it anymore.
thanks


Jonathan Wilson

February 27, 2013 at 3:14 pm

Hi Florian,

You can do this by editing the Event Background Color in the category in Event Espresso Categories.


Florian Werner

February 27, 2013 at 4:54 pm

please read carefully: I want to be able to have one color per event, so for instance if I have 2 events in the same category, I want to have each of them display in a different color (that I control somehwere).

please get back to me on this.
thanks


Dean

February 28, 2013 at 12:48 am

The only way you could achieve this is with CSS.

Each event on the calendar has a unique id based on the event id.

#EVT_ID-2 refers to the event with ID 2.

The background colour is actually from a div nested in the a tag that has that ID.

As such you could target that in your CSS like so

 #EVT_ID-2 div {
background-color:#000000 !important;
}

The !important is needed in order to over rule the calendars css.

You would also need to target the main ID to change or remove the border

 #EVT_ID-2 {
border: none;
}

The CSS can be added to your themes style.css or via a plugin such as My Custom CSS

The support post ‘How to color code each event in calendar differently’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso