Add Date and Clock to Cargo Site – Easy

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:
<span class="data-panel" infotype="time"></span>
. - If you want to display the date only, copy this code:
<span class="data-panel" infotype="date"></span>
. - If you want to display both the date and time, copy this code:
<span class="data-panel" infotype="date_and_time"></span>
. - 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)
- Example time zones:
- 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)
.
- Target the clock through
- 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: “🏡😵💫🚕”;
}



I hope you have found this blog helpful. Thanks for reading🚀
If you have any questions or need help with your Cargo Site, feel free to ask in the discussion forum.