Add to Calendar Button Widget

A compact Add to calendar button for one date: a keyboard-friendly menu offers Google Calendar, Outlook.com, Microsoft 365 and a standard .ics file for Apple Calendar and everything else. Show it with a one-line event summary, or as a bare button under your own text.

Events & Weddings Tool Runs in your browser Free · no ads

Customize your widget

Theme
Auto follows the visitor's light/dark setting.
Style
Attribution on your page
Optional and entirely your choice. The exact line is shown in the code below; it links to the tool with rel="nofollow".
More options
Starting values
Leave blank to use the widget's defaults. Visitors can still change every value.

Live preview

Exactly what your visitors will see

Embed code

<iframe src="https://a2z.tools/embed/w/add-to-calendar-button" title="Add to Calendar Button by A2Z Tools" width="100%" height="440" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>

A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.

Works with

How it works

Enter the event title, a local start and optional end such as 2026-12-05T10:00, and the IANA zone it happens in. The button converts both times to UTC for that date - 10:00 in Sydney on 5 December is 23:00 UTC the day before, because Sydney is on daylight time (UTC+11) then. Pressing the button opens a menu with four choices. Google Calendar and Outlook.com open their add-event pages in a new tab with title, start, end, description and location filled in; Microsoft 365 does the same for work and school Outlook accounts. The fourth choice downloads an .ics file built to RFC 5545 - one VEVENT with a stable UID, a DTSTAMP, UTC start and end, escaped text and lines folded at 75 octets - which Apple Calendar, Outlook desktop and Thunderbird open directly. The menu follows the WAI-ARIA menu-button pattern: Enter, Space or Down Arrow opens it on the first item, arrows, Home and End move, Escape closes and returns focus to the button. Without an end time, one hour is used.

Method

  • UTC instant = local wall-clock time in the IANA zone, converted with that date's offset (daylight saving included)
  • Google: dates=YYYYMMDDTHHMMSSZ/YYYYMMDDTHHMMSSZ; Outlook: startdt/enddt as ISO 8601 UTC (2026-12-04T23:00:00Z)
  • Every text value is percent-encoded in links and backslash-escaped (\ ; , newline) in the .ics file

Worked examples

Australian open day

Inputs: Open day; 2026-12-05T10:00; Australia/Sydney; no end

Result: Calendar start 20261204T230000Z, end 20261205T000000Z

Sydney is on AEDT (UTC+11) in December, so 10:00 local is 23:00 UTC on the previous day; with no end, one hour is used.

Webinar in New York

Inputs: 2026-11-14T10:00 to 11:00; America/New_York

Result: Outlook startdt=2026-11-14T15:00:00Z, enddt=2026-11-14T16:00:00Z

New York is on EST (UTC-5) after 1 November 2026.

Limitations

  • One event per button; for a programme with many sessions use the Event Agenda.
  • Repeating events and reminders (alarms) are not written into the file; each app applies its own default reminder.
  • In a plain iframe the frame is sized for the open menu; with the A2Z loader script it resizes itself and leaves no gap.

Where publishers use it

  • Under a Save the date paragraph on a wedding website, with the details summary switched off
  • In a school newsletter page for an open evening, so parents can pick the calendar they use
  • Beside the registration form of a webinar landing page, so sign-ups block the time straight away
  • In a Mailchimp or Substack archive page that links to the event (the email itself cannot run the button)
  • On a dentist's or clinic's appointment confirmation page for a fixed group session

Questions

Which calendar option should my visitors pick?

Google Calendar for Gmail and Android users, Outlook.com for personal Hotmail, Live and Outlook.com accounts, Microsoft 365 for work or school Outlook, and the .ics option for iPhone, iPad and Mac (Apple Calendar), Outlook on the desktop, Thunderbird and most other apps. The .ics file is the universal fallback: any calendar that follows RFC 5545 can import it.

Why do you ask for an IANA zone instead of a UTC offset?

An offset such as +01:00 is only correct for part of the year in places with daylight saving. With a zone name like Europe/Paris the button applies the offset that is actually in force on the event date - +02:00 in June, +01:00 in December - so the calendar entry lands at the right moment.

Can I hide the event summary and show only the button?

Yes: set the details option to 0. The button keeps the event title in its accessible name for screen-reader users (for example 'Save the date: Open day'), and you can change the visible label, up to 40 characters, to match your page's wording.

Does the menu work with a keyboard and screen reader?

It uses the WAI-ARIA menu-button pattern: the button announces that it opens a menu and whether it is expanded; Down Arrow opens on the first item and Up Arrow on the last; arrow keys, Home and End move between items; Escape closes the menu and puts focus back on the button; Tab closes it and moves on. Each item is at least 42 pixels tall for touch.

Will an attendee's calendar update if I change the time later?

No calendar can be updated remotely by a downloaded file or an add-event link. The UID is derived from the title, times and place, so a corrected file creates a new entry; tell attendees about the change and ask them to remove the old one.

Sources

  1. RFC 5545: Internet Calendaring and Scheduling Core Object Specification (iCalendar) - IETF . VEVENT structure, required UID and DTSTAMP, UTC times, TEXT escaping and 75-octet folding. Checked 2026-10-01.
  2. Menu Button Pattern - W3C WAI-ARIA Authoring Practices Guide . Keyboard behaviour of the calendar menu.

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 Add to Calendar Button
https://a2z.tools/embed/add-to-calendar-button

Related widgets

More Events & Weddings widgets →

  • Event Card

    Events & Weddings Tool New

    An event-page card with a live countdown, local-time conversion and Google, Outlook and .ics buttons.

    Get code

  • Event Agenda

    Events & Weddings Tool New

    A conference or festival programme with day tabs, a live Now and Up next marker and local-time toggle.

    Get code

  • Calendar

    Time & Date Tool

    A keyboard-friendly month calendar with today highlighted and your own marked dates.

    Get code

  • Countdown Timer

    Time & Date Clock & time

    Live days, hours, minutes and seconds to a date you set, with an "event has started" message.

    Get code

  • Event Day Weather

    Events & Weddings Tool New

    Forecast for the hours of one outdoor event, or the date the forecast will become available.

    Get code

  • Sports League Table

    Events & Weddings Tool New

    League standings that compute goal difference and points, apply tie-breakers and mark zones.

    Get code

Preview

CustomizeGet code