Event Card Widget

How it works

You give the start and end as wall-clock times (2026-11-14T19:00) plus an IANA zone name such as Europe/London or America/New_York. The card converts them to UTC with the browser's own time-zone database, using the offset in force on that date, so an event on 14 November in London is read as GMT and one on 1 July as BST (UTC+1) without you thinking about it. A start time that falls inside the spring-forward gap, such as 01:30 on 29 March 2026 in London, is moved to the moment clocks jump and a note says so. The heading shows the date and times in the event zone; when the visitor's clock differs at that instant, a second line reads, for example, That's 2:00 PM your time. Before the start a days/hours/minutes/seconds countdown runs from the visitor's clock; between start and end the card says Happening now; afterwards it says Ended and hides the calendar buttons. Without an end time one hour is assumed. Calendar buttons carry the same UTC instants, so every app shows the right local time.

Method

• UTC start = wall-clock start in the event zone minus that zone's UTC offset on that date (Intl time-zone data, DST included)
• Countdown = UTC start - visitor's current time, split into days, hours, minutes and seconds (seconds rounded up)
• State: before if now < start; Happening now if start <= now < end; Ended if now >= end (end defaults to start + 1 hour)
• Google link: calendar.google.com/calendar/render?action=TEMPLATE&text=..&dates=YYYYMMDDTHHMMSSZ/YYYYMMDDTHHMMSSZ&details=..&location=..
• .ics file: RFC 5545 VCALENDAR with one VEVENT (UID, DTSTAMP, DTSTART and DTEND in UTC), CRLF line ends, lines folded at 75 octets

Worked examples

Limitations

• One event per card; recurring events (every Tuesday) are not expressed as a repeat rule - publish the next date and update it.
• The countdown follows the visitor's device clock; a phone set several minutes wrong will count down several minutes wrong.
• Time zones use the visitor's browser data; a rule change announced after their last browser update (as with tzdata 2026e for Manitoba) may show the old offset until they update.
• The Google and Outlook.com links use those services' public add-event URLs, which are not formal APIs and could change; the .ics file is the standards-based fallback.
• Share uses the device share sheet only where the host page allows it; elsewhere it copies the details to the clipboard.

Where publishers use it

• A venue or theatre's What's on page, one card per performance, so customers save the date in one tap
• A webinar landing page where the online-only card shows a Join online button that stays visible during the session
• A charity fun-run or school fair announcement on a WordPress or Wix site, with directions to the field
• A hybrid conference that streams talks: venue address, livestream link and the attendee's own time in one card
• A meetup group's Squarespace or Webflow homepage, swapped for the next event each month by changing the embed values
• A product launch page counting down to the release moment for customers in several countries

Questions

Sources

1. RFC 5545: Internet Calendaring and Scheduling Core Object Specification (iCalendar) - IETF . Content-line folding at 75 octets (3.1), TEXT escaping (3.3.11), UTC DATE-TIME with Z (3.3.5), UID and DTSTAMP required in VEVENT (3.6.1). Checked 2026-10-01.
2. Time Zone Database - IANA . The tz database behind browser time-zone names and DST rules; release 2026e of 29 September 2026. Checked 2026-10-01.

Cite or recommend this tool

If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.

A2Z Tools Event Card
https://a2z.tools/embed/event-card

<a href="https://a2z.tools/embed/event-card">A2Z Tools Event Card</a>

[A2Z Tools Event Card](https://a2z.tools/embed/event-card)

Event Card by A2Z Tools - https://a2z.tools/embed/event-card