Documentation
Airdate Add to Calendar: setup guide
Airdate Add to Calendar is a free HubSpot module. You type one event in it; visitors get links to add it to Google Calendar, Outlook.com, Office 365 and Yahoo, or download an .ics file for Apple Calendar and other apps. The date above the button shows in each visitor's time zone.
It works on every HubSpot plan. No app to install, no account to create, no outside script.
1. Install and add the module
- Install Airdate Add to Calendar from the HubSpot Template Marketplace.
- Open a website page, landing page or blog post in the editor.
- In the Add panel, search for Airdate Add to Calendar and drag it where you want the button.
- Fill in the Event group, then publish.
Until you pick a start date, the editor shows a sample date next week and a yellow note. On the live page, the block stays hidden until a date is set, so an unfinished module never shows.
2. Event
- Event title: the name of the entry in the guest's calendar. It also names the .ics file.
- Description: the text of the calendar entry. Line breaks are kept.
- Start: the date and time of the event. See "How time zones work" below.
- All-day event: for a conference day or a deadline. Calendars show it as a full day, with no time.
- Duration (minutes): from 5 to 1440 minutes. Shown when the event is not all-day.
- Number of days: from 1 to 14. Shown for all-day events.
- Event time zone: a time zone name such as
Europe/ParisorAmerica/New_York. Needed for all-day events; optional otherwise. For an all-day event without it, the editor shows a yellow note. A name the browser does not know (a typo such asEurope/Pari) is ignored, and the editor names it in a yellow note. - Place: an address or venue. Leave it empty for an online event.
- Online link: the webinar or meeting link. With no place, it becomes the location of the calendar entry. With a place, it is added to the description.
3. Calendars offered
Turn each calendar on or off: Google Calendar, Outlook.com, Office 365 (work or school Outlook), Apple Calendar and others (.ics file), Yahoo Calendar. Yahoo is off by default.
The .ics file opens in Apple Calendar, Outlook for desktop and most calendar apps. It is the one to keep if you offer only a few choices.
4. Layout and date line
- Layout: One button that opens the list (a compact button with a drop-down), or All calendars side by side (a row of links, with an optional heading, that wraps on small screens).
- Show the date above the button: a line such as "Friday, March 14, 2031 · 11:00 AM – 12:30 PM EDT". It uses the language of the page.
- Show the time in: The visitor's time zone (default) or The event time zone. The second choice needs the Event time zone field; if it is empty, the visitor's zone is used.
5. Reminder
Reminder in the .ics file: none, 10, 15 or 30 minutes, 1 hour or 1 day before. The default is 15 minutes. Apple Calendar, Outlook for desktop and most apps read it.
Google, Outlook.com, Office 365 and Yahoo links cannot carry a reminder: each guest's own default reminder applies. For an all-day event, the reminder counts from the start of the day, so "1 day before" is usually the right choice.
6. After the event
Once the event is over (start plus duration, or the end of the last day for an all-day event), the block can:
- Show a short message in place of the links. The default is "This event has taken place."
- Hide the block completely.
This is checked in the visitor's browser, when the page loads and again at the moment the event ends if the page is still open, so cached pages stay right. In the editor, the block always stays visible so you can still select it.
7. Texts
Every word the module shows is a field: the button, the heading above the side-by-side list, the name of each calendar, the message after the event, the hint read by screen readers for links that open a new tab, and the editor notes. Write them in your page's language.
8. Style
In the Style tab: button background and text, list background and text, border color, corner radius (0 to 40 px), text size (12 to 22 px) and alignment (left, center, right). The module uses your theme's font.
How time zones work
- The Start field stores an exact moment, not a clock time. Calendars receive that moment, so a guest in New York and a guest in Paris each get the right hour in their own calendar.
- The date line above the button is shown in the visitor's zone by default, computed in their browser.
- You only need the Event time zone for two things: to find the right day of an all-day event, and to show the time in the event's zone instead of the visitor's.
All-day events
Turn on All-day event, pick the first day in Start, and set the Number of days (up to 14). Calendars show it as full days, with no time. The date line shows the day, or the first and last days.
Set the Event time zone for all-day events. Without it, the module keeps the day you picked as long as you leave the time at 00:00, but it cannot know when your day ends. The zone also sets when the event counts as over.
Accessibility
- The menu button works with a keyboard: Enter or Space opens it, Arrow Down opens it and moves to the first calendar, Arrow Up and Arrow Down move through the list, Home and End jump to the first and last, Escape closes it and returns to the button.
- The button tells screen readers whether the list is open. The list closes when you click outside it or tab away. Links that open a new tab say so to screen readers.
- Every button and link is at least 44 px high, with a visible focus outline.
- The arrow animation turns off when the visitor asks for reduced motion.
Limits
- Reminders only travel in the .ics file.
- One event per module. For several events, add one module per event.
- Each calendar entry gets an identifier made from the page and the module, so renaming the event does not create a second entry for a guest who imports the .ics file again.
- Recurring events (every week, every month) are not supported.
- The date and the links are built in the browser: visitors need JavaScript turned on.
FAQ
Does it need Content Hub Pro?
No. It works on every HubSpot plan, including free.
Does it work in emails?
No. It works in website pages, landing pages and blog pages (posts and listing).
Can I translate the labels?
Yes. All texts are fields, in the Texts group. The date line follows the language of the page.
Do guests need an account?
Only the account of their own calendar. The module uses no service of its own.
Texts in French, German and Spanish
Every word the module shows is a field. To use the module on a page in another language, open the module in the editor and paste these texts in the matching fields. Keep the words in braces, such as {n}, as they are: the module replaces them. Dates, times and numbers already follow the language of the page.
French (Français)
| Field | Text to paste |
|---|---|
| Button | Ajouter à l’agenda |
| Heading above the side-by-side list | Ajouter à votre agenda |
| Google Agenda | |
| Outlook.com | Outlook.com |
| Office 365 | Office 365 |
| Apple and others | Calendrier Apple (.ics) |
| Yahoo | Yahoo Agenda |
| After the event | Cet événement a eu lieu. |
| Screen reader hint for links that open a new tab | (s’ouvre dans un nouvel onglet) |
| Editor note for all-day events without a time zone | Événement sur la journée entière : indiquez le fuseau horaire de l’événement pour que chaque visiteur obtienne le bon jour. |
| Editor note when no date is set | Choisissez une date de début dans le groupe « Event ». D’ici là, une date de la semaine prochaine s’affiche ici et le bloc est masqué sur la page publiée. |
| Editor note: unknown time zone | Fuseau horaire inconnu : {zone}. Utilisez un nom IANA comme Europe/Paris ou America/New_York ; d’ici là, le fuseau horaire est ignoré. |
German (Deutsch)
| Field | Text to paste |
|---|---|
| Button | Zum Kalender hinzufügen |
| Heading above the side-by-side list | In Ihren Kalender eintragen |
| Google Kalender | |
| Outlook.com | Outlook.com |
| Office 365 | Office 365 |
| Apple and others | Apple Kalender (.ics) |
| Yahoo | Yahoo Kalender |
| After the event | Diese Veranstaltung hat bereits stattgefunden. |
| Screen reader hint for links that open a new tab | (öffnet in einem neuen Tab) |
| Editor note for all-day events without a time zone | Ganztägige Veranstaltung: Legen Sie die Zeitzone der Veranstaltung fest, damit jeder Besucher den richtigen Tag erhält. |
| Editor note when no date is set | Wählen Sie in der Gruppe „Event“ ein Startdatum. Bis dahin wird hier ein Datum in der nächsten Woche angezeigt und der Block ist auf der Live-Seite ausgeblendet. |
| Editor note: unknown time zone | Unbekannte Zeitzone: {zone}. Verwenden Sie einen IANA-Namen wie Europe/Paris oder America/New_York; bis dahin wird die Zeitzone ignoriert. |
Spanish (Español)
| Field | Text to paste |
|---|---|
| Button | Añadir al calendario |
| Heading above the side-by-side list | Añadir a su calendario |
| Google Calendar | |
| Outlook.com | Outlook.com |
| Office 365 | Office 365 |
| Apple and others | Calendario de Apple (.ics) |
| Yahoo | Yahoo Calendar |
| After the event | Este evento ya se ha celebrado. |
| Screen reader hint for links that open a new tab | (se abre en una pestaña nueva) |
| Editor note for all-day events without a time zone | Evento de día completo: indique la zona horaria del evento para que cada visitante obtenga el día correcto. |
| Editor note when no date is set | Elija una fecha de inicio en el grupo «Event». Mientras tanto, aquí se muestra una fecha de la semana próxima y el bloque queda oculto en la página publicada. |
| Editor note: unknown time zone | Zona horaria desconocida: {zone}. Use un nombre IANA como Europe/Paris o America/New_York; mientras tanto, se ignora la zona horaria. |
Support
Questions or a bug? Email support@airdatethemes.com, in English or French. We answer within two business days.
Going further
This module handles one event. If your dates repeat, two of our paid themes do the rest of the work:
- Airdate Webinar (199 $), for recurring webinars. You type each session once; the site shows the next session with a countdown, the agenda, a replay library, and add-to-calendar buttons for every session. See it on the marketplace.
- Almanac, a premium theme for organisations that run on dates: programmes with cohorts, a catalogue with filters, statuses that update themselves (closing soon, a few seats left, full), early-bird prices that end on time, and a calendar. Coming soon to the marketplace.