{"id":1288,"date":"2020-01-21T16:50:03","date_gmt":"2020-01-21T16:50:03","guid":{"rendered":"https:\/\/www.uri.edu\/styleguide\/?page_id=1288"},"modified":"2021-05-05T20:30:56","modified_gmt":"2021-05-05T20:30:56","slug":"dates","status":"publish","type":"page","link":"https:\/\/www.uri.edu\/wordpress\/components\/dates\/","title":{"rendered":"Dates"},"content":{"rendered":"\n

Use dates to display a downloadable calendar event.<\/p>\n\n\n\n

\n\n\n\n

Overview<\/h2>\n\n\n\n

Here’s an example date:<\/p>\n\n\n

<\/form>
Add to calendar?<\/div>
Cancel<\/div>
Add<\/div><\/div><\/div>
<\/div>
July<\/div>
4<\/div><\/div><\/div>
Independence Day<\/div><\/div>
Check your downloads folder for<\/br>independence-day.ics<\/div><\/div>\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Adding a Date<\/h2>\n\n\n\n

On sites using the Block Editor, dates (\"Date) 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.<\/p>\n\n\n\n

On sites using the older Classic Editor, dates can be implemented by using the shortcode (see the below documentation).<\/p>\n\n\n\n

\n\n\n\n
\n

Technical Details<\/h1>\n\n\n\n

Dates can be implemented with the shortcode cl-date<\/code>.<\/p>\n\n\n\n

[cl-date date=\"July 4\" caption=\"Independence Day\"]<\/p>\n\n\n\n

Attributes<\/h2>\n\n\n\n
\n
\n

date<\/h3>\n\n\n\n

(string) (required)<\/p>\n\n\n\n

The deadline specified in any PHP date\/time format<\/a><\/p>\n<\/div>\n\n\n\n

\n

caption<\/h3>\n\n\n\n

(string) (optional)<\/p>\n\n\n\n

The date description<\/p>\n\n\n\n

(default value: none)<\/p>\n<\/div>\n\n\n\n

\n

show_year<\/h3>\n\n\n\n

(bool) (optional)<\/p>\n\n\n\n

Set to show the year<\/p>\n\n\n\n

(default value: false<\/code>)<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

color<\/h3>\n\n\n\n

(string) (optional) (values: blue<\/code>, red<\/code>)<\/p>\n\n\n\n

Set the accent color<\/p>\n\n\n\n

(default value: blue<\/code>)<\/p>\n<\/div>\n\n\n\n

\n

float<\/h3>\n\n\n\n

(string) (optional) (values: left<\/code>, right<\/code>)<\/p>\n\n\n\n

Set to float the date either left or right<\/p>\n\n\n\n

(default value: none)<\/p>\n<\/div>\n\n\n\n

\n

class<\/h3>\n\n\n\n

(string) (optional)<\/p>\n\n\n\n

Set custom CSS class(es)<\/p>\n\n\n\n

(default value: none)<\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":188,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-1288","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/1288","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/comments?post=1288"}],"version-history":[{"count":12,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/1288\/revisions"}],"predecessor-version":[{"id":2076,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/1288\/revisions\/2076"}],"up":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/188"}],"wp:attachment":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/media?parent=1288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}