The most prominent feature of Simple Calendar is probably the ability to bring Google Calendar events inside WordPress posts or pages to match your own site styles and colors. The calendars you will import will look more unique and a good addition to your site features that your users will appreciate.

Use calendar settings

The default calendar comes with three main settings to adjust its appearance on most themes: theme, events colors and today color. The default light calendar theme should match the majority of theme styles, but if your theme happens to be dark (for example, white text over a black background) you may want to use the ‘dark’ setting for the calendar as well. The events color and today color can also be tuned to match your theme color styles.

Theme designers tweaks

Each calendar type in Simple Calendar has its own HTML markup and comes with a set of CSS styles that tries to standardize some common styles but inherit many CSS rules found in your active theme. Most of the calendar styles are transparent, so they will inherit the rules of their container. If you are displaying the widget on your main content, it will probably have a white background and black text. If you display in a sidebar, perhaps the font size will be smaller. 

Therefore, if you are a theme designer, you should try to create CSS rules targeting higher selectors that wrap the calendars but avoid to write rules for specific classes found in a calendar; try to target the wrapper and generic HTML elements instead.

For example, instead of this:

.simcal-default-calendar-grid ul.simcal-events li {
    margin-left: 20px;
}

Try to do something like this this:

.my-content-wrapper ul li {
    margin-left: 20px;
}

And make sure the calendars displayed with Simple Calendar are inside your .my-content-wrapper container in the example above.

This will ensure more consistent result during updates and also in case you will change calendar type in future.

Updated on June 28, 2016