CSS Tips and Tricks

The iCalendar spec includes a CATEGORIES field. Unfortunately, most major calendar providers (e.g. Google, Microsoft) do not include any data in this field, even if you use categories/color coding in your source calendar.

However, since this is a feature of the spec, some calendars use it, and ICS Calendar provides some rudimentary support.

While there is no automatic CSS styling for categories, the data does get included in the HTML output if the feed actually contains them. This is handled via the data-categories HTML attribute on the individual .event container element. The value inserted into that attribute is the exact text of the CATEGORIES field from the feed.

So the key to using this in CSS is properly formatting the selectors. You’ll want to use wildcards in case the event has multiple categories. For instance, if your category is “Meetings” then your CSS selector would be:

.event[data-categories*="Meetings"]

If any aspects of this structure are unfamiliar, here’s a CSS Selectors reference.

This trick is intended for month view but it should work with any of the table-based layouts (e.g. week, widget, month-with-sidebar).

Each cell in the table includes a data-dow (day-of-week) attribute, with a number representing the day of the week, from 0 (Sunday) to 6 (Saturday).

To hide Saturday and Sunday throughout your calendar views, you can use this CSS:

.ics-calendar-month-grid *[data-dow='0'], .ics-calendar-month-grid *[data-dow='6'] {
    display: none;
}

(Note that this CSS has no effect in list view.)