ICS Calendar CSS Variables

ICS Calendar and ICS Calendar Pro use a set of CSS variables to define colors and various other properties used within the plugin.

You can change the values of these variables in your own theme CSS to modify some aspects of the calendar appearance without having to use the inspector to find specific CSS selectors.

Variable Scope

CSS variables are given specific scope. Commonly :root { } is used, for the variable to apply universally.

ICS Calendar does not use :root { }. In order to avoid inadvertently affecting styles outside of ICS Calendar’s own output, the scope for ICS Calendar CSS variables is .ics-calendar, .r34ics_lightbox { }. All variable overrides should be placed inside the curly braces with this scope. For example:

<code>.ics-calendar, .r34ics_lightbox {
	--r34ics--color--black: #000000;
	--r34ics--color--darkgray: #555555;
}</code>

Custom CSS can go in your site theme’s CSS file, or in the Customizer under Additional CSS.

The tables below describe the available CSS variables, their purpose, and their default values.

Colors

Selector Properties

Introduced in ICS Calendar 11.5.15 (and ICS Calendar Pro 5.10.9), these variables apply to specific selectors, allowing you to customize your calendar appearance to a greater extent than simply changing the values of the color variables. Most of these variables reference other color variables, or occasionally consist of a color variable plus dimensions.

ICS Calendar Pro

These variables are used in ICS Calendar Pro only.

ICS Calendar Pro: Full View

These variables apply to Full view in ICS Calendar Pro only. The scope for these variables is .ics-calendar .fc { }.

1. Yes, darkgray is lighter than gray. We’re just using standard HTML color names and that’s how they’re defined. ↩︎