Support

Home Forums Events Calendar Add-on How can each event in calendar have a different color

How can each event in calendar have a different color

Posted: July 30, 2014 at 7:23 pm


rcfc

July 30, 2014 at 7:23 pm

I know that the calendar allows you to colorize by category. I also found this post which addressed the issue. The solution

Each event on the calendar has a unique id based on the event id.
#EVT_ID-2 refers to the event with ID 2.

was not very scalable (since even if you create a thousand css definitions to anticipate future event IDs, eventually your event IDs will count pass your CSS), and more to the point it doesn’t look like unique event IDs are being written into the calendar elements anymore.

Is there any plan to fix or improve this? I don’t care what colors my events are, just want to improve the legibility of the calendar.

As always, I wish my html was littered with many more descriptive css IDs :-/ hint hint!

I guess I could use jquery to iterate through

#espresso_calendar a

Just thought I should ask first, since to me this seems
a) like a really obvious readability feature, and
b) after all, EE sales literature always shows EE with colorized events. IE:
https://eventespresso.com/product/espresso-calendar/

Thanks
josh


Josh

  • Support Staff

July 30, 2014 at 10:01 pm

Hi Josh,

Why would you need an ID if you don’t care which colors go with specific events? Along with that, did you notice that there are only 4 different colors for events on the sales page for more than 4 events? It’s not a case where each event has its own color. It’s legible because it’s set to have alternating colors between events.

I think you have a good idea to use jQuery and iterate through each event. Or you can also accomplish some color variation for events for each month to infinity by using an nth CSS selector like this:

#espresso_calendar a:nth-child(2n+1){
color: blue;
background-color: white;
}

#espresso_calendar a:nth-child(4n+4){
color: white;
background-color: purple;
}

#espresso_calendar a:nth-child(5n-2){
color: yellow;
background-color: green;
}


rcfc

August 3, 2014 at 1:40 pm

Wow that’s nice (good idea about using nth items css, btw) — BUT it makes for very broken UI when you try to display multiday events. A tu/th class ends up looking like two different classes. The only way I can think of to fix this is to parse event titles in javascript and then match them up.

Or…. you could just writing event IDs into the html. Whatd’ya say? Can this be a feature request? Is there a place where I should submit this as a formal feature request? I believe it would be trivial, and a nice value-add.

Thanks


Dean

August 4, 2014 at 5:22 am

Hi,

We have a ticket feature request ready made for this, I’ll add your +1 to it.


rcfc

August 4, 2014 at 4:02 pm

Thanks very much. Will you post to this thread when that’s done, or is there a feature request that I can subscribe to?

Also: if I can just underscore the point again: Descriptive IDs are an amazing, time-saving, standards-compliant gift to your users. I believe they give you a lot of usability (in the fullest let-the-customer-figure-out-what-they-want-to-do-with-it way) bang for your development buck.

Thanks & good day.


Lorenzo Orlando Caum

  • Support Staff

August 4, 2014 at 10:43 pm

Hi,

This feature request was already created. It needs to be accepted by the development team before any work will be done. We can update this post when that happens.


Lorenzo


rcfc

August 6, 2014 at 7:04 pm

Thanks a lot, that would be awesome.


Dean

August 7, 2014 at 1:40 am

No problem.

The support post ‘How can each event in calendar have a different color’ 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