Use dates to display a downloadable calendar event.
Overview
Here’s an example date:
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 () 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
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)