CSS Guide

ICS Calendar includes a number of customization options, and its functionality can be altered or extended using the built-in filters, but sometimes the easiest way to achieve changes to its presentation can be with a bit of custom CSS code.

Using the Inspector

Get to know the “inspector” in your web browser. It’s a great way to see how the CSS of the plugin is constructed, so you can choose the proper selectors for the elements you want to modify.

To use the inspector, simply right-click (on Mac, Ctrl-click) on the element on a web page that you want to inspect, then choose “Inspect” (or similar; the exact label varies by browser) from the pop-up menu that appears. This will present the HTML of the page, with the selected element highlighted, along with a breakdown of all of the various CSS selectors that are being applied to that element.

Find a selector that begins with .ics-calendar and that is generally the one you need to use to write your own custom CSS for the element.

The screenshot below shows the inspector in Safari on the Mac, inspecting the CSS that’s applied to the time for an event in ICS Calendar. (Click the image for a close-up view.)

You can see that the CSS selector that you would want to use to modify the appearance of the time is: .ics-calendar-month-grid .events. time

Full List of ICS Calendar CSS Classes

These CSS classes are presented as a reference, but are not in context. ICS Calendar takes extensive advantage of the “cascading” aspect of CSS and uses more complex selectors in most cases, so using your browser’s inspector is the most effective way to find the right selector to use in any given situation.

The “lazy” way: If you are familiar with CSS, you probably know !important …and that it’s usually best not to use it. But sometimes getting the exact right selector can be challenging or cumbersome. The rule about avoiding !important applies mostly when writing code that may be extended upon by others. It is less important when you are writing custom CSS for a single site, that is unlikely to be shared or need to be further overridden with later CSS code.

With that in mind, you can often expedite your process of customizing code by using one of the CSS classes below along with a simple .ics-calendar parent selector, and appending !important to your CSS properties if they do not seem to work without it. For example:
.ics-calendar .time { color: blue !important; }
Just remember that this is the “lazy” way… don’t say you weren’t warned!

ICS Calendar

These CSS classes are used in both the free and Pro versions of ICS Calendar.

CSS Class Associated HTML Tag(s) Description

CSS Class	Associated HTML Tag(s)	Description
`.all-day`	`li`	Container for all-day indicator (table views).
`.all-day-indicator`	`dt, span`	Displays the “ALL DAY” text.
`.attach`	`div`	Container for event attachments.
`.attach_float`	`div`	Container for event attachments as a floating element in list view.
`.cancelled`	`div.title`	Applies visual style to titles of events that have been cancelled. (Note: This functionality is not currently in use. See `.event_status_cancelled` below.)
`.current_week_only`	`section.ics-calendar`	Used in week view to determine whether or not only the the current week should be displayed. Should not be used for styling.
`.current-week`	`tr`	Used in week view by jQuery to control which week from the dropdown is currently being shown. Should not be used for styling.
`.date_in_hover_block`	`div`	The event date, as shown in hover blocks.
`.day`	`div`	Container for day number heading inside table cells.
`.descloc`	`div`	Container for description/location/etc. content for individual events.
`.descloc_toggle`	`div`	Outer container for toggle excerpt and full description (list view only). Does not have any default styling.
`.descloc_toggle_excerpt`	`div`	Container for the description excerpt to show when toggle option is set (list view only).
`.descloc_toggle_full`	`div`	Container for the full description to show when toggle element is clicked (list view only).
`.empty`	`div`	Used in table views to indicate a date has no events, so it can be removed from the collapsed list view on mobile breakpoint. Should not be used for styling.
`.end_time`	`span`	Contains event ending times. By default this is hidden until the user hovers over the start time, depending on the showendtimes setting.
`.event`	`li, dd`	Container for an individual event.
`.event_status`	`span`	General class for an indicator of the event status. (Currently only used in conjunction with `.event_status_cancelled`.)
`.event_status_cancelled`	`span.event_status`	Indicator that an event has been cancelled.
`.eventdesc`	`div`	Container for the description of an individual event.
`.events`	`ul`	Wrapper for the list of events on a given date.
`.has_desc`	`span.title`	Used on event titles when the event has a description. Generally not used for styling.
`.has_events`	`div.day`	Used on a day wrapper to indicate that day has events.
`.hidden`	N/A	Used by jQuery to dynamically hide parts of the display. Should not be used for styling.
`.hide_times`	`section.ics-calendar`	Hides all times, depending on the hidetimes setting. Should not be used for styling.
`.hover_block`	`div.descloc`	Styling of the hover block for event descriptions.
`.ics-calendar`	`section`	Outer wrapper for all ICS Calendar output. *Use this as a parent selector in all* of your ICS Calendar-related CSS customizations to ensure that they have no effect on other parts of your pages.**
`.ics-calendar-arrow-nav`	`nav`	Wrapper for previous month/next month navigation arrows.
`.ics-calendar-color-key`	`div`	Outer wrapper for the “legend” that describes the color coding of multiple feeds in one calendar display.
`.ics-calendar-color-key-header`	`div`	Container for the show/hide all checkbox on the legend.
`.ics-calendar-color-key-item`	`div`	An individual item in the legend.
`.ics-calendar-date`	`h4`	A date heading in list view.
`.ics-calendar-description`	`p`	The general description for the calendar; displays above the calendar itself. Follows `.ics-calendar-title`.
`.ics-calendar-error`	`p`	Error messages, e.g. “No events found.”
`.ics-calendar-label`	`h3`	Month heading in month or list view.
`.ics-calendar-list-wrapper`	`article`	Outer wrapper for the actual list of events in list view. Contained inside the outermost `section.ics-calendar` element.
`.ics-calendar-month-grid`	`table`	General class for the table on all table-based views (not just month view).
`.ics-calendar-month-wrapper`	`article`	Outer wrapper for each individual month in month view. Only one of these will be displayed on-screen at a time, even though all are contained in the HTML; the rest are hidden by jQuery. Contained inside the outermost `section.ics-calendar` element.
`.ics-calendar-select`	`select`	The month/week selection dropdown menu.
`.ics-calendar-title`	`h2`	The general title for the calendar; displays above the calendar itself. Precedes `.ics-calendar-description`.
`.ics-calendar-week-wrapper`	`article`	Outer wrapper for each individual week in week view. Only one of these will be displayed on-screen at a time, even though all are contained in the HTML; the rest are hidden by jQuery. Contained inside the outermost `section.ics-calendar` element.
`.inactive`	`a`	Gets applied dynamically by jQuery to the previous/next link inside `.ics-calendar-arrow-nav` if the user is currently on the first or last month included in the calendar output.
`.inline`	`div.ics-calendar-color-key`	Used to indicate that the items in the “legend” should be displayed inline instead of as a stacked list.
`.inline_block`	`*.phone_only`	Used exclusively on `.phone_only` elements to indicate that they should be displayed as inline blocks instead of blocks. Should not be used for styling.
`.layout-month`	`section.ics-calendar`	Used by jQuery to determine that the current view is a month-style (table) layout. Should not be used for styling.
`.loading`	`button`	Dynamically added by jQuery to the button for individual event .ics file downloads, to show a loading animation.
`.month_list_all`	`section.ics-calendar`	Used by jQuery to dynamically show all (past) events in the mobile breakpoint. Should not be used for styling.
`.monthnav-compact`	`section.ics-calendar`	Indicates that the calendar should use the compact month navigation layout. Should be used as a parent selector to alter the appearance of the compact layout only.
`.next`	`a`	Used inside `nav.ics-calendar-arrow-nav` for the “next” link.
`.next-week`	`tr`	Used in week view to indicate the next week (hidden). Should not be used for styling.
`.no_phone`	N/A	Used to indicate elements that should be hidden on the mobile phone breakpoint. Should not be used for styling.
`.no_phone_important`	N/A	Used to indicate elements that should be hidden on the mobile phone breakpoint. Includes `!important` to force the issue if other elements are still overriding the `.no_phone` class. Should not be used for styling.
`.nomobile`	`section.ics-calendar`	Used to indicate that the month view should not collapse to a mobile-friendly list layout on the mobile breakpoint. Note that despite similar names, this serves a very different purpose than `.no_phone` Should not be used for styling.
`.off`	`div.day`	Used in table views on cells that are outside of the currently displayed month.
`.open`	N/A	Used by jQuery to indicate that a toggle or lightbox element is currently open/displayed. Should not be used for styling.
`.organizer_email`	`div`	Wrapper for the email address/link for event organizers, if shown.
`.past`	`div.day`	Used in table views on dates that are in the past.
`.phone_only`	N/A	The inverse of `.no_phone`; used to indicate elements that should be hidden except on the mobile phone breakpoint. Should not be used for styling.
`.prev`	`a`	Used inside `nav.ics-calendar-arrow-nav` for the “previous” link.
`.previous-week`	`tr`	Used in week view to indicate the previous week (hidden). Should not be used for styling.
`.r34ics_compact`	`section.ics-calendar`	Used to indicate that the overall calendar should be presented in a more compact fashion. Should be used as a parent selector to alter the appearance of the compact layout only.
`.r34ics_event_ics_download`	`button`	The clickable element to download an individual event .ics file.
`.r34ics_lightbox`	`div`	A fixed-position element. This is the outer container for the lightbox when using `toggle="lightbox"` in your shortcode. Hidden until the `.open` class is applied to it by jQuery.
`.r34ics_lightbox_close`	`div`	The “close” button for the lightbox. Hidden until the `.open` class is applied to the lightbox element by jQuery.
`.r34ics_lightbox_content`	`div`	The inner container for the lightbox content. Hidden until the `.open` class is applied to the lightbox element by jQuery.
`.r34ics_toggle`	`section.ics-calendar`	Indicates that the calendar’s event descriptions will be toggled instead of using the hover box. Used by jQuery. Should not be used for styling.
`.r34ics-hidden-on-load`	N/A	Used by jQuery once the page has fully loaded to reveal elements of the calendar that are hidden by default in the CSS. Should not be used for styling.
`.show_on_hover`	`span`	Used to indicate elements that should be hidden until the user hovers over their container element. Applies primarily to end times. Should not be used for styling.
`.show-past-events`	`a`	Clickable element to reveal past events in the current month on the mobile breakpoint, where past events are, by default, hidden on the initial page load.
`.sublabel`	`span`	The “sublabel” element on individual events, displayed below the event title. This is usually empty, but can contain information about events that carry over from the previous day, or can be customized using hooks.
`.time`	`span`	The time of an event.
`.time_in_hover_block`	`div`	The event time, as shown in hover blocks.
`.time-inline`	`small`	The time of an event in list view.
`.title`	`div`	The title of an event. Generally used with the compound selector: `.ics-calendar .events .title`
`.title_in_hover_block`	`div`	The event title, as shown in hover blocks.
`.today`	`div.day`	A special CSS class applied only to the current date (“today”) in the table, to give it special emphasis.
`.week-number`	`th`	Table header cells in the leftmost column when using the weeknumbers option.
`.whitetext`	`section.ics-calendar`	Indicates that all of the text inside the calendar should be white/light colored, because a dark background is being used.

.all-day

li

Container for all-day indicator (table views).

.all-day-indicator

dt, span

Displays the “ALL DAY” text.

.attach

div

Container for event attachments.

.attach_float

div

Container for event attachments as a floating element in list view.

.cancelled

div.title

Applies visual style to titles of events that have been cancelled. (Note: This functionality is not currently in use. See .event_status_cancelled below.)

.current_week_only

section.ics-calendar

Used in week view to determine whether or not only the the current week should be displayed. Should not be used for styling.

.current-week

tr

Used in week view by jQuery to control which week from the dropdown is currently being shown. Should not be used for styling.

.date_in_hover_block

div

The event date, as shown in hover blocks.

.day

div

Container for day number heading inside table cells.

.descloc

div

Container for description/location/etc. content for individual events.

.descloc_toggle

div

Outer container for toggle excerpt and full description (list view only). Does not have any default styling.

.descloc_toggle_excerpt

div

Container for the description excerpt to show when toggle option is set (list view only).

.descloc_toggle_full

div

Container for the full description to show when toggle element is clicked (list view only).

.empty

div

Used in table views to indicate a date has no events, so it can be removed from the collapsed list view on mobile breakpoint. Should not be used for styling.

.end_time

span

Contains event ending times. By default this is hidden until the user hovers over the start time, depending on the showendtimes setting.

.event

li, dd

Container for an individual event.

.event_status

span

General class for an indicator of the event status. (Currently only used in conjunction with .event_status_cancelled.)

.event_status_cancelled

span.event_status

Indicator that an event has been cancelled.

.eventdesc

div

Container for the description of an individual event.

.events

ul

Wrapper for the list of events on a given date.

.has_desc

span.title

Used on event titles when the event has a description. Generally not used for styling.

.has_events

div.day

Used on a day wrapper to indicate that day has events.

.hidden

N/A

Used by jQuery to dynamically hide parts of the display. Should not be used for styling.

.hide_times

section.ics-calendar

Hides all times, depending on the hidetimes setting. Should not be used for styling.

.hover_block

div.descloc

Styling of the hover block for event descriptions.

.ics-calendar

section

Outer wrapper for all ICS Calendar output. Use this as a parent selector in all of your ICS Calendar-related CSS customizations to ensure that they have no effect on other parts of your pages.

.ics-calendar-arrow-nav

nav

Wrapper for previous month/next month navigation arrows.

.ics-calendar-color-key

div

Outer wrapper for the “legend” that describes the color coding of multiple feeds in one calendar display.

.ics-calendar-color-key-header

div

Container for the show/hide all checkbox on the legend.

.ics-calendar-color-key-item

div

An individual item in the legend.

.ics-calendar-date

h4

A date heading in list view.

.ics-calendar-description

p

The general description for the calendar; displays above the calendar itself. Follows .ics-calendar-title.

.ics-calendar-error

p

Error messages, e.g. “No events found.”

.ics-calendar-label

h3

Month heading in month or list view.

.ics-calendar-list-wrapper

article

Outer wrapper for the actual list of events in list view. Contained inside the outermost section.ics-calendar element.

.ics-calendar-month-grid

table

General class for the table on all table-based views (not just month view).

.ics-calendar-month-wrapper

article

Outer wrapper for each individual month in month view. Only one of these will be displayed on-screen at a time, even though all are contained in the HTML; the rest are hidden by jQuery. Contained inside the outermost section.ics-calendar element.

.ics-calendar-select

select

The month/week selection dropdown menu.

.ics-calendar-title

h2

The general title for the calendar; displays above the calendar itself. Precedes .ics-calendar-description.

.ics-calendar-week-wrapper

article

Outer wrapper for each individual week in week view. Only one of these will be displayed on-screen at a time, even though all are contained in the HTML; the rest are hidden by jQuery. Contained inside the outermost section.ics-calendar element.

.inactive

a

Gets applied dynamically by jQuery to the previous/next link inside .ics-calendar-arrow-nav if the user is currently on the first or last month included in the calendar output.

.inline

div.ics-calendar-color-key

Used to indicate that the items in the “legend” should be displayed inline instead of as a stacked list.

.inline_block

*.phone_only

Used exclusively on .phone_only elements to indicate that they should be displayed as inline blocks instead of blocks. Should not be used for styling.

.layout-month

section.ics-calendar

Used by jQuery to determine that the current view is a month-style (table) layout. Should not be used for styling.

.loading

button

Dynamically added by jQuery to the button for individual event .ics file downloads, to show a loading animation.

.month_list_all

section.ics-calendar

Used by jQuery to dynamically show all (past) events in the mobile breakpoint. Should not be used for styling.

.monthnav-compact

section.ics-calendar

Indicates that the calendar should use the compact month navigation layout. Should be used as a parent selector to alter the appearance of the compact layout only.

.next

a

Used inside nav.ics-calendar-arrow-nav for the “next” link.

.next-week

tr

Used in week view to indicate the next week (hidden). Should not be used for styling.

.no_phone

N/A

Used to indicate elements that should be hidden on the mobile phone breakpoint. Should not be used for styling.

.no_phone_important

N/A

Used to indicate elements that should be hidden on the mobile phone breakpoint. Includes !important to force the issue if other elements are still overriding the .no_phone class. Should not be used for styling.

.nomobile

section.ics-calendar

Used to indicate that the month view should not collapse to a mobile-friendly list layout on the mobile breakpoint. Note that despite similar names, this serves a very different purpose than .no_phone Should not be used for styling.

.off

div.day

Used in table views on cells that are outside of the currently displayed month.

.open

N/A

Used by jQuery to indicate that a toggle or lightbox element is currently open/displayed. Should not be used for styling.

.organizer_email

div

Wrapper for the email address/link for event organizers, if shown.

.past

div.day

Used in table views on dates that are in the past.

.phone_only

N/A

The inverse of .no_phone; used to indicate elements that should be hidden except on the mobile phone breakpoint. Should not be used for styling.

.prev

a

Used inside nav.ics-calendar-arrow-nav for the “previous” link.

.previous-week

tr

Used in week view to indicate the previous week (hidden). Should not be used for styling.

.r34ics_compact

section.ics-calendar

Used to indicate that the overall calendar should be presented in a more compact fashion. Should be used as a parent selector to alter the appearance of the compact layout only.

.r34ics_event_ics_download

button

The clickable element to download an individual event .ics file.

.r34ics_lightbox

div

A fixed-position element. This is the outer container for the lightbox when using toggle="lightbox" in your shortcode. Hidden until the .open class is applied to it by jQuery.

.r34ics_lightbox_close

div

The “close” button for the lightbox. Hidden until the .open class is applied to the lightbox element by jQuery.

.r34ics_lightbox_content

div

The inner container for the lightbox content. Hidden until the .open class is applied to the lightbox element by jQuery.

.r34ics_toggle

section.ics-calendar

Indicates that the calendar’s event descriptions will be toggled instead of using the hover box. Used by jQuery. Should not be used for styling.

.r34ics-hidden-on-load

N/A

Used by jQuery once the page has fully loaded to reveal elements of the calendar that are hidden by default in the CSS. Should not be used for styling.

.show_on_hover

span

Used to indicate elements that should be hidden until the user hovers over their container element. Applies primarily to end times. Should not be used for styling.

.show-past-events

a

Clickable element to reveal past events in the current month on the mobile breakpoint, where past events are, by default, hidden on the initial page load.

.sublabel

span

The “sublabel” element on individual events, displayed below the event title. This is usually empty, but can contain information about events that carry over from the previous day, or can be customized using hooks.

.time

span

The time of an event.

.time_in_hover_block

div

The event time, as shown in hover blocks.

.time-inline

small

The time of an event in list view.

.title

div

The title of an event. Generally used with the compound selector: .ics-calendar .events .title

.title_in_hover_block

div

The event title, as shown in hover blocks.

.today

div.day

A special CSS class applied only to the current date (“today”) in the table, to give it special emphasis.

.week-number

th

Table header cells in the leftmost column when using the weeknumbers option.

.whitetext

section.ics-calendar

Indicates that all of the text inside the calendar should be white/light colored, because a dark background is being used.

ICS Calendar Pro

These CSS classes are only used in the Pro version of ICS Calendar.

Coming soon…

CSS Tips and Tricks

This is an evolving page, where we will collect CSS “tricks” we have worked out with users of the plugin, to help them accomplish their specific goals with calendar display. If the display issue you’re encountering is not listed here, please open a ticket in the WordPress Support Forums.

User Guide

On This Page

More Help

Using the Inspector

Full List of ICS Calendar CSS Classes

ICS Calendar

ICS Calendar Pro

CSS Tips and Tricks

Display weekdays (Monday–Friday) only