Dates

Use dates to display a downloadable calendar event.


Overview

Here’s an example date:

Add to calendar?
Cancel
Add
July
4
Independence Day
Check your downloads folder for
independence-day.ics

Dates display a caption when hovering, and when clicked they prompt the user to download a calendar event. Downloaded dates will display a check mark, have a persistent caption, and alert the user to check their downloads folder for the calendar event file.

Dates have a few display options, including changing the accent color and whether or not to display the date’s year. Dates can also be floated to the left or right of other page content.

Adding a Date

On sites using the Block Editor, dates (Date block editor icon) can be added from the block library, under the Component Library section. Date content can be edited directly, and options can be set in the sidebar.

On sites using the older Visual Editor, dates can be implemented by using the shortcode (see the below documentation).


Technical Details

Dates can be implemented with the shortcode cl-date.

[cl-date date="July 4" caption="Independence Day"]

Attributes

date

(string) (required)

The deadline specified in any PHP date/time format

caption

(string) (optional)

The date description

(default value: none)

show_year

(bool) (optional)

Set to show the year

(default value: false)

color

(string) (optional) (values: blue, red)

Set the accent color

(default value: blue)

float

(string) (optional) (values: left, right)

Set to float the date either left or right

(default value: none)

class

(string) (optional)

Set custom CSS class(es)

(default value: none)