CSS Tips and Tricks

If you’re using ICS Calendar to show holiday rental bookings, we generally recommend using the Widget Availability or Year Availability views in ICS Calendar Pro, since those are made specifically for bookings, showing only blocked out dates, with color-coding options.

However, all of the table-based views, such as Month and Week views available in the free version, include either the .empty or .has_events CSS class on each day cell in the table, indicating whether or not that date includes any events. You can use these classes to easily color-code your calendar to show day-level availability, as such:

.ics-calendar-month-grid td.empty {
    background-color: rgba(0,255,0,0.2); /* Light green for available days */
}
.ics-calendar-month-grid td.has_events {
    background-color: rgba(255,0,0,0.2); /* Light red for booked days */
}

This CSS example only colors the background of the cell itself; the date number bar at the top of the cell, and any events in the cell, may include their own separate background color, and require additional CSS selectors to apply these colors. Check the list of ICS Calendar CSS Classes or use your browser inspector to find the specifics for the elements you wish to style.

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.)