Add Date and Clock to Cargo Site - Easy

add date and clock in cargo site tutorial

Table of Contents

Add Date and Clock to Cargo Collective Site

Have you ever wanted to have a real-time clock or you might want the current date to display on your Cargo Site but you do not know?

Do not worry in this blog I will be covering the easiest method to add a date and clock to the cargo site.

This blog covers both Cargo 2 and Cargo 3 site editors so you have to follow this blog as per the editor you are using.

Add Date and Clock to Cargo 2

First, we are going to see how to do it Cargo 2 follows the below steps to achieve the functionality –

Go to your Cargo 2 editor and open the page where you want to add the date or time.
At the bottom right of the page, look for the “Code View” option and click on it. This allows you to add HTML code to your Cargo 2 site.
If you want to display the time only, copy this code: .
If you want to display the date only, copy this code: .
If you want to display both the date and time, copy this code: .
After adding the desired code, click on “Save” to publish the changes to your website.

Add Date and Clock to Cargo 3

Adding a date and clock in Cargo 3 is easier compared to Cargo 2, as you don’t need to manually add any code. Cargo 3 provides a built-in method to directly add the date and clock to your site.

Open your Cargo 3 editor and navigate to the page where you want to add the clock.
Look for the “Page Options” icon at the top left corner and click on it.
Select the “Clock” option from the menu that appears.
The clock will be added to your Cargo site with various customization options.
Click On Publish Changes to make the changes live on your website.

Customizations options –

Default Clock Display: By default, the clock shows the local time and date of the computer viewing the site.
Custom Time Zone: To display the time of a specific time zone, uncheck “Local Time” and choose a custom UTC offset.
- Example time zones:
  - Los Angeles (-7)
  - Mogadishu (+3)
  - Shanghai (+8)
Styling and Formatting:
- Customize clock face through the settings window, choosing preset formats or using templated keywords and text.
- Additional options include choosing a 12 or 24-hour clock and padding single-digit values with a leading zero.
CSS Targeting:
- Target the clock through digital-clock in CSS.
- Customize each section of the clock individually using digital-clock::part(section).
Customizing Text:
- Modify non-numeric values like time of day, periods, days, months, and ordinals through CSS variables.
- digital-clock::part(section) {
  font-variant: lining-nums;
  }
- Example provided when the clock displays emojis for different times of the day.
- digital-clock {
  –0-3: “🌌🛌💤”;
  –3-6: “🥱📢🐓”;
  –6-9: “😪☕️📰”;
  –9-12: “🌳🏢🚙”;
  –12-15: “😋🥢🍱”;
  –15-18: “👩🏽‍💻👨‍💻👨🏾‍💻”;
  –18-21: “🍺😤🕺”;
  –21-24: “🏡😵‍💫🚕”;
  }