---
title: "Time Zone Calculation Portal"
slug: "time-zone-calculation-portal"
status: "new"
updated: 2026-07-21T20:44:10Z
published: 2026-07-21T20:44:10Z
canonical: "knowledge.technolutions.net/time-zone-calculation-portal"
stale: true
---

> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.technolutions.net/llms.txt
> Use this file to discover all available pages before exploring further.

# Time Zone Calculation Portal

Use this example portal and dashboard to compare one date and time across multiple time zones. The converter is useful when you coordinate meetings, events, deadlines, or other time-sensitive activity across regions.

The example starts with a selected source time zone and date/time value, then displays the equivalent local time in other configured time zones.

#### Try a Slate example 💼

Copy this [Suitcase](https://knowledge.technolutions.net/docs/en/suitcase) ID and paste it in **Database → Suitcase Import** to import a pre-made user-scoped dashboard and anonymous portal:

```SuitcaseID
54b8b60d-e5a5-4947-8a86-af0211a9c6e0:slate-ckwan-test
```

> [!TIP]
> ⭐ Get Inspired
> 
> This article was adapted from [a post by Technolutions staff](https://community.technolutions.net/get-inspired/post/time-zone-calculation-dashboard-portal-wYAROWzq3DNS9PS) in the Slate Community Forums' Get Inspired space. Have a great idea for a Get Inspired post? [Let us know](https://community.technolutions.net/get-inspired/new?post_type=gnHx7As1gZ8r6Ld)!

## Use the converter

1. Select the **Starting Time Zone**. This is the source time zone for the date and time you want to convert.
2. Enter the starting date and time.
3. Optional: Select **Use Current Time in Selected Zone** to fill the input with the current time in the selected starting time zone.

The converter updates the other time zones after the starting time zone and date/time are set.

![Time zone converter with a starting time zone selector, date and time input, and current time option](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/01-AdvcsIRhK0dk0BtYFR9yZ.webp)

## Review converted times

The example displays converted times in several sections so different audiences can scan the time zones they use most often.

### North American time zones

The North American section uses visual cards. Each card includes the time zone name, a representative city or region label, the UTC offset for the selected date, an analog clock, and the converted local time.

![North American time zone cards with analog clocks and converted local times](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/02-NoelMI9HU9wUxDbGtrbJf.webp)

### International time zones

The international section uses a compact list format for quick comparison.

![International time zone list with converted times](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/03-7JbEbe76YjVvIMhT41Gdl.webp)

### UTC

The UTC section keeps Coordinated Universal Time visible alongside the regional conversions.

![UTC section showing the converted Coordinated Universal Time](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/04-sXQ7crgdM1XlKxc9x7iJe.webp)

### Space time

The example also includes a Mars time section for demonstration purposes. It converts the selected Earth date and time to a simplified Mars Sol Date and Martian Coordinated Time value.

![Space time section showing Mars Sol Date and Martian Coordinated Time values](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/05-h255aehHneXDI0L4HTVKw.webp)

## How the starting time zone works

The date and time entered in the converter are always interpreted as belonging to the selected starting time zone. For example, if you enter 9:00 AM with Eastern selected, then change the starting time zone to Pacific, the converter treats the input as 9:00 AM Pacific and recalculates the other outputs.

> [!WARNING]
> 📝 Note
> 
> Daylight saving time is handled by the browser's built-in IANA time zone rules, such as `America/New_York` and `Europe/London`. Offsets and abbreviations can change based on the date entered. If a region changes its time zone laws, results depend on the browser, operating system, and device time zone data being updated.

## Customize the example

After importing the example, adjust the display text, default time zone, and included zones to match your audience.

### Change the default starting time zone

The imported example sets Eastern as the default starting time zone. To change the default, move `selected="selected"` to the option that should appear first.

![Source code showing the selected attribute used to set the default time zone](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/06-682VVnV54ZLHaLSNsgK7U.webp)

### Rename labels without changing conversion logic

You can change the visible labels, such as renaming a time zone label or using campus location names, as long as the underlying `value` keeps the correct time zone identifier.

![Source code showing visible time zone labels and underlying time zone values](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/07-7s6cibguai2klxVIVL9kQ.webp)

### Update city or region labels

The city and region labels on the cards are display text. Replace them with campus names, office names, or other labels that help your users scan the converter.

![Source code showing editable city and region labels for time zone cards](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/08-l3L4OtI0eduWj803QFvGe.webp)

### Add, remove, or reorder zones

You can add, remove, or reorder cards and list rows to fit your users. If you remove or rename an element ID, update the matching reference in the JavaScript zones so each output points to the correct element.