Color-format events based on event tags
I'd like to be able to have just one calendar, with different event tags displayed differently, like in a different color or style or size. Currently I'm using two different calendars, which is a bit awkward. What do you think?
Can this script be used to change the colors of the event text, by changing "background-color" to something else?
It is such a big help to us, I keep trying to make it even better. :)
Both, multiple tags and tags with space are supported now.
Please update script on our site from
there is minor change ('data-tags~' changed to 'data-tags*')
Thanks a lot for your feedback!
I am so grateful for this workaround, but am coming across more limitations. If there is more than one tag for an event, it uses the default color.
If not, perhaps the help page should mention these limitations.
With or without changes, this has so improved the ability of our calendar to emphasize and communicate events to our members.
I don't think this works if there is a space in the event tag name. Just pointing it out - it was not a problem for us to work around.
Our calendar looks so much more organized now. Thanks!
And the crowd goes wild! :)
Liz, you wanted a color-coded key under the calendar. You can put the key in a Content Gadget right under the Event Calendar Gadget.
We would LOVE this feature!
This would make the calendar easier to read by making it easy to see which committee is doing what and when at a glance.
It would make several of the other suggestions that I've seen here null and void because this would address a lot of the problems.
Camilla Elmes commented
We would also love the option of being able to colour code types of events so they can easily be identified in Event Calendar view
Is there any update on this?? We try to keep our group updated on events put on by our actual group as well as our community association, AND our Community retail area, and need them to be differentiated somehow.
Andrew Steele commented
This would be immensely helpful, as our organization lists many community events in addition to our own.
The tag information is already stored in the back end. Based on this info, the system could theoretically apply a CSS class to the div that sets the background color for the event in the calendar. E.g. <div valign="top" style="height:9;overflow:hidden;" class="event-custom-tag"> Then admins could at least adjust the CSS manually for each event tag to suit their needs (e.g. color, font size/style, etc.).
I'm not sure which HTML tag it would need to be applied to in the list view, but it looks like it should be <li class="boxesListItem" id="idUpcomingEvent_#######">. Again, this would just need an extra class that is the custom event tag so that the CSS can be controlled on a per-tag basis.
It would also be nice to display a key underneath the calendar, so that the members see the different color-coded "tag" categories. Ideally they would also be able to click on/off these categories to filter what shows in the calendar (instead of having multiple pages with different calendars showing different categories/tags). But I know this would be more difficult to implement.
This would be extremely helpful for our group. We have four different types of events and color coding would be fantastic.
Anne Vardy commented
We have a very busy club and have a lot of entries on our calendar. I would like to be able to set the colour and font sizes for each entry by title. Right now I can only do that in the description field of the event not in the title.
Sharm Das commented
I would really use this function - colour code events by the tags
So committee meetings and lectures could show up on one calendar in different/easily distinguishable colors.
That would be awesome!
Keith Rice commented
The new additions to the events module in 5.6 are excellent . Can you consider adding colour to the event title. This would be an excellent edition to the event calendar enabling easy visual identification of repeat events.
Thanks for any help you can provide in enabling a workaround to provide this very useful feature.
Update: When our domain moves to WA, you can still see our old calendar format at http://g.tyc.org/events.html . Go back to Sept. 2015 or earlier to get the full effect.
It is really too bad that the WA calendar is so homogeneous. We are reduced to using lower case and parentheses to differentiate events.
We've been using the free Calcium calendar http://www.tyc.org/events.html for over 10 years now. Our members are used to seeing the color coding.
With all the fancy new templates we have now and the styling that goes with them - would be nice to see if we can get this happening.
I would have thought that possibly we could just associate a colour with an event type which would then automatically apply the css?
Is there a workaround we could use now?