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

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

.combinemultiday

.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

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

.event-info Wrapper for event details in Basic view.

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

.hidden_in_main Indicates the element should be hidden in the main calendar. (Used primarily by Month with Sidebar view in Pro.)

.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-basic-wrapper article Outer wrapper for basic view.

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

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

.multiday

.multiday_first

.multiday_last

.multiday_middle

.multiday_sep

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

.nostyle Used only in Basic view to indicate the default styles for the view should not be used. Allows for easier customization with theme CSS.

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

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

.solidcolors

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

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.)
`.combinemultiday`
`.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`
`.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.
`.event-info`		Wrapper for event details in Basic view.
`.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.
`.hidden_in_main`		Indicates the element should be hidden in the main calendar. (Used primarily by Month with Sidebar view in Pro.)
`.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-basic-wrapper`	`article`	Outer wrapper for basic view.
`.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-full`
`.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.
`.multiday`
`.multiday_first`
`.multiday_last`
`.multiday_middle`
`.multiday_sep`
`.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.
`.nostyle`		Used only in Basic view to indicate the default styles for the view should not be used. Allows for easier customization with theme CSS.
`.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_compact_mobile`
`.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.
`.solidcolors`
`.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…

User Guide

More Help

ICS Calendar CSS Classes

ICS Calendar

ICS Calendar Pro