Creating a CSS for a Calendar

I’m trying to figure out how to do CSS in a calendar with events I’m developing. See the attached GIF.

The blue, green and yellow background symbolise calendar events and are clickable. The red text can mean a national holiday or a weekend. The current day should have a blue border round the numbers (not shown above). Looks pretty simple, and one would also think, simple to style. Right? Ich don’t think so!

So you create a CSS class for each of the above TDs. But what if the current day is an event. No problem. Create classes for blue, green and yellow background colours that have blue borders to show it’s today. Oh but wait.. events can fall on national holidays (red text). Thats another 6 classes. Maybe you see start to see my problem now. Or problems. 24 of them. 24 CSS classes at a last count. Not so fun to play with.

I’ve been modifying Deevos "Kalender" (http://modxcms.com/Kalender-1210.html) which is a table based calendar.

One solution I came up with was to have have 3 or so classes for the basic types of days + 3 more for the event background colours. Then use a java script to change the TD background colours via the DOM just to set the event background colours. The problem there would be getting the java script to fetch the event colours from a CSS.

Any ideas anyone?

The only problems I see are TABLE and TD J/k

I haven’t had a chance to play w/ Kalendar yet, unfortunately...

Of course a calendar is tabular data, so it’s entirely appropriate to use table & td.

Is your problem the fact that you’ve thought up
class="today"
class="holiday"
etc
but sometimes you need both?

Well, you don’t have to invent
class="todayholidaynationalholiday"

An element’s class attribute can have multiple values, each separated by whitespace.

Thus,
class="today holiday"
etc

This is something I didn’t know for years and I still haven’t fully taken it on board. Hope this helps you.

Wow, thats great. That totally solves my problem. Thanks!