Calendar and Calendar List Styling

Out of the box, the calendar uses a default set of styles. Some of the calendar styles can be set by CSS and others customisation is possible with WordPress filters.

CSS

You can apply CSS via WordPress customizer’s Additional CSS, or experienced developers may chose to use a Child Theme. You can target the plugin output using the class .wfea

Styling used on the demo page

The following is the CSS used on the demo page for the calendar & calendar list. Please note my base theme is Genesis so not everything may work on your theme as all themes have different base CSS. I have added some additional fixes that may work for you.

Filters

You can used filters too to set some calendar options. Normally filters are added as snippets of PHP code to your child theme’s functions.php – there are also other method at add PHP. ( if this is new to you can find plenty of info starting here ).

The following is an example of a filter. There are four filters available two for the calendar and one for the calendar list.

General overall options

• wfea_cal_options
• wfea_callist_options

Individual Event options

• wfea_cal_extra_event_options
• wfea_cal_list_extra_event_options

This example looks at title and changes the background and colour options based on what the title contains

All calendar / calendar list filter options

Tooltip

The tooltip is referenced qtip. Currently you can define a predefined set of classes. The default is set to ‘qtip_blue’.

$options['qtip']['classes'] = 'qtip_blue';

* Basic styles */
.qtip-light{} /* Light coloured style */
.qtip-dark{} /* Alternative dark style */
.qtip-cream{} /* Cream-esque style, similar to the default */
.qtip-red{} /* Alert-ful red style */
.qtip-green{} /* Positive green style */
.qtip-blue{} /* Informative blue style */

/* CSS3 styles */
.qtip-rounded{} /* CSS3 border-radius class for applying rounded corners to your tooltips */
.qtip-shadow{} /* CSS3 box-shadow class for applying shadows to your tooltips */
.qtip-bootstrap{} /* Twitter Bootstrap style */
.qtip-youtube{} /* Google's new YouTube style  */
.qtip-tipsy{} /* Minimalist Tipsy style */
.qtip-tipped{} /* Tipped libraries "Blue" style */
.qtip-jtools{} /* jTools tooltip style */
.qtip-cluetip{} /* Good ole' ClueTip style */

You can also define your own classes e.g.

$options['qtip']['classes'] = 'myCustomClass';

And then apply your own styling to the tool tip using the selectors e.g.

.myCustomClass{
	border-color: rgb(0,190,0);
	background-color: #ddd;
}

If you wish to style elements such as the .qtip-content element, simply use descendant selectors like so:

.myCustomClass .qtip-content{
	font-size: 12px;
}

The descendant selectors are

• .qtip-titlebar
• .qtip-icon
• .qtip-title
• .qtip-content

Calendar Overall Entries

• wfea_cal_options
• wfea_callist_options

There are several options that can be filtered to control calendar entries. These are accessed by

$options['fullcalendar']

e.g.

$options['fullcalendar']['entryBackgroundColor'] = 'black'

All calendar entry options are described below

eventColor

Sets the background and border colours for all events on the calendar.
You can use any of the CSS colour formats such #f00, #ff0000, rgb(255,0,0), or red.
The eventBackgroundColor, eventBorderColor, and eventTextColor options can be used for more granularity.

eventBackgroundColor

Sets the background colour for all events on the calendar.
You can use any of the CSS color formats such #f00, #ff0000, rgb(255,0,0), or red.

eventBorderColor

Sets the border colour for all events on the calendar.
You can use any of the CSS colour formats such #f00, #ff0000, rgb(255,0,0), or red.

eventTextColor

Sets the text colour for all events on the calendar.
You can use any of the CSS colour formats such #f00, #ff0000, rgb(255,0,0), or red.

timeFormat

Determines the time-text that will be displayed on each event.

$options['fullcalendar']['timeFormat'] = 'format string'

Example 7pm

$options['fullcalendar']['timeFormat'] = 'ha'

Example 7pm with operational minutes 8:30am

$options['fullcalendar']['timeFormat'] = 'h(:mm)a'

Example 2-00p

$options['fullcalendar']['timeFormat'] = 'h-mmt'

Example 14 00

$options['fullcalendar']['timeFormat'] = 'H mm'

displayEventTime

Whether or not to display the text for an event’s date/time.

$options['fullcalendar']['displayEventTime'] = true;
or
$options['fullcalendar']['displayEventTime'] = false;

displayEventEnd

Whether or not to display an event’s end time.

$options['fullcalendar']['displayEventEnd'] = true;
or
$options['fullcalendar']['displayEventEnd'] = false;

eventOrder

Determines the ordering events within the same day.

This setting accepts a few different arguments:

• a name of an Event Object property, like “title”. Sorting will happen in ascending order. If prefixed with a minus sign like “-title”, sorting will happen in descending order.

• a comma-separated string of property names, like “title,start”

• an array of property names and functions like array( “title”, “start”).

Calendar Individual Entries

• wfea_cal_extra_event_options
• wfea_cal_list_extra_event_options

The filter applies to the event $options and the is in the event loop so get_post() get_title() etc can be accessed for the event data.

The following example filters the colours based on pattern matching the title.

You can use anything in the event post object, for instance for colouring by venue name you would start with

$post=get_post();
$venue=$post->venue->address->localized_address_display;

Tip: To see the structure of data just add [wfea debug=true] to a test post this will give you a dump of available data and structure