Design – Style Editor

The Style Editor is located under My Calendar > Design > Style Editor. Through version 3.5, the style editor was a system for editing stylesheet files. This functionality was removed in 3.6.

Select My Calendar Theme

My Calendar ships with a handful of themes. The themes mostly have minor variations from the default view. They are not required, but can be used as a slightly different base look for your calendar.

You can copy stylesheets into custom file directories or into your theme if you wish to work with a fully custom stylesheet.

Once you select and save your new stylesheet choice, the preview in the style editor will update to match your selection. It may not look identical, because your theme and plugins may have styles that impact the calendar.

Example. In the plugins directory, add the “my-calendar-custom” directory with a directory “styles“. Locate the styles folder in the plugin and duplicate a stylesheet, then place that file in your custom styles folder. Give the stylesheet a new name, e.g. “custom-calendar.css“. The new stylesheet will be available as a custom stylesheet to select:

Load CSS only on selected pages

You can restrict My Calendar styles to load only on specific WordPress posts or pages. Add the post IDs into the text field. You can separate multiple IDs using commas. Using this option can improve performance by avoiding loading styles when they aren’t needed, but you will have greater responsibility to verify everything works as expected elsewhere, particularly when using widgets.

Disable My Calendar CSS

This will disable the default My Calendar styles completely. You will need to add your own styles within your theme.

CSS Variables

My Calendar extensively uses CSS variables in the base stylesheet. All of these variables apply if you do not have a theme enabled. If you apply a theme, the theme may override core variables.

There are a lot of variables, so this shows only a selection of them. They are pre-populated with the default values. These values can be filtered in PHP using the mc_style_variables filter. Most variables will be live updated in the preview. Changes to the modal are not dynamically propagated.

Accessible Color Combinations overview. Shows which colors are accessible with each other and meet the (WCAG) Web Content Accessibility Guidelines. Duplicate colors will be omitted from the grid. This helps guide you in how your colors can be used together.

Next: My Calendar > Design > Templates.