Documentation
Airdate Calendar Month: setup guide
Airdate Calendar Month is a free HubSpot module that shows your dates in a month calendar: courses, meetups, webinars, open days, closing days. You type each date once in the module, with a title, a day (or several days), a time, a place, a link and one of three colors. Visitors page through the months with the arrows or the keyboard, see today marked and past days dimmed, and get a list of days instead of the grid on phones and in narrow columns.
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 Calendar Month from the HubSpot Template Marketplace.
- Open a website page, landing page or blog post in the editor.
- In the Add panel, search for Airdate Calendar Month and drag it where you want the calendar.
- Replace the sample rows of Dates with your own dates, set a Day on each one, then publish.
A new module comes with three sample rows ("Open workshop", "Beginners course", "Webinar") that have no day yet. In the editor, a row without a day is shown on a sample day (two days from today, then every four days), so you can see the layout, and a yellow note says so. In the preview and on the live page, a row without a day is not in the calendar. Visitors never see the note.
2. Heading
- Heading: "Calendar" by default. Leave it empty to show none, for example when the module sits under a heading of your page.
- Heading level: H2 (the default), H3 or H4, to fit the outline of the page.
Under the heading, the name of the month ("October 2026") and the buttons are always shown.
3. Dates
One row per date, up to 200 rows. The rows can be in any order: the calendar puts them in date order. Each row has:
- Title: the name shown in the calendar, such as "Open workshop".
- Day: the day of the date. A row without a day is left out of the calendar (see above).
- Last day: for a date over several days, such as a weekend retreat. Leave it empty for a single day. A last day before the first day counts as a single day.
- Time: free text, shown exactly as typed, such as
18:00,9:30–12:30or6 pm. It is not read or converted: see "Times and today" below. Empty: no time. - Place: a room, a city or "Online". Empty: nothing.
- Link: where the title leads, such as a page, a registration form, a file or an email address. With a link, the title is a link; without one, it is plain text. If you choose to open it in a new tab, screen readers say so.
- Color: Accent (the default), Second color or Third color, to tell kinds of dates apart, such as courses, talks and closing days. The colors themselves are set in the Style tab.
In a day, a date shows its title, then its time, place and, for a date over several days, "until Oct 16". The time is shown on the first day only; the place on every day.
4. Display
- Open on: The month of the next date (the default) or This month. With the first choice, the calendar opens on the month of the next date that is today or later; a date going on today opens this month. With no date to come, it opens on the month of the last date (this month if there is none).
- Week starts on: Monday (the default) or Sunday.
- Show past dates: on by default. Past days are dimmed either way. Turn it off to leave out dates that ended before today: the calendar then starts at this month. A date over several days that is still going on stays.
- Dates shown in a day before "+ more": 3 by default, from 1 to 10. A day with more dates shows this many, then a "+ 1 more" button. See "Busy days" below.
- List instead of the grid below (px): 560 by default, from 0 to 1200. When the module itself is narrower than this, the month shows as a list of days. With 0, it is always the grid. See "On phones and in narrow columns" below.
- Keep the month in the address: off by default. See "The month in the address" below.
5. Texts
Every word the module writes is a field, in the Texts group. Write them in your page's language:
- "Previous month" and "Next month", the names of the arrow buttons for screen readers, and "Today" (the field Back to this month (button)), the button that comes back to this month;
- "+ {n} more" and "Show fewer", in busy days:
{n}becomes the number of dates not shown yet; - "No dates this month." (Empty month) and "Next date: {date}", for an empty month:
{date}becomes the day of the next date, such as "Tuesday, January 12"; - "today", added after today's date for screen readers;
- "until {date}", after a date over several days:
{date}becomes its last day, such as "Oct 16"; - "(opens in a new tab)", read by screen readers on links that open a new tab;
- "All dates", the heading of the list shown without JavaScript;
- the editor note about dates without a day. Shown in the editor only.
The names of the months and of the days follow the language of the page (without one, the visitor's browser language), with a capital on the first letter only: "Octobre 2026" and "Mardi 13 octobre" on a French page, for example. To translate the module, write the texts in the language of the page; in a multi-language site, each language version of the page has its own copy of the module and its own texts.
6. Appearance
In the Style tab:
- Accent, Second color and Third color: the bar beside each date and the color of its link. The accent is also used for the circle around today's number, the "+ more" button and the focus outline.
- Text, Secondary text (names of the days, time and place, past days, the empty month), Lines (the grid, the buttons, the list), Today (the background of today's box), Today's number (the number in the accent circle, white by default) and Background (white by default).
- Text size: 12 to 20 px, 15 px by default.
- Corner radius: 0 to 20 px, 6 px by default, for the grid, the buttons and today's row in the list.
The module uses your theme's font and headings, and takes the full width of its column.
Month by month and the keyboard
- The arrow buttons go to the previous and next month. Today comes back to this month.
- With the keyboard, Page Up and Page Down go to the previous and next month while the focus is inside the calendar (on a button or a link of a date). Elsewhere on the page, and at the first or last month, these keys scroll the page as usual.
- The months go from the month of the first date (or this month, if it is earlier, or if past dates are hidden) to the month of the last date (or this month, if it is later). At either end, the arrow is turned off. After a move with an arrow or a key, the focus is on the matching arrow button, or on Today when that arrow has just been turned off.
- A month without dates says "No dates this month." with a button to the next date after it, such as "Next date: Tuesday, January 12". The button opens that month.
- On a page left open past midnight, today moves to the new day on its own (within a minute of the focus leaving the calendar, if a visitor is using it at that moment).
Busy days and dates over several days
- A day with more dates than you set in Dates shown in a day before "+ more" shows that many, then a "+ 1 more" button (or "+ 2 more", and so on). The button opens the day in place and becomes "Show fewer". It closes again when the visitor changes month.
- In a day, dates show in date order of their first day, then in the order of the rows. The time is not used to sort them: type the rows of the same day in the order you want them.
- A date over several days shows on each of its days. On the days after the first, its bar is dashed, and "until" gives the last day.
On phones and in narrow columns
When the module is narrower than List instead of the grid below (560 px by default), the month shows as a list: one row per day that has dates, with its full date ("Thursday, October 15") and its dates under it. Today's row is shown too, even without a date, and is highlighted. Days without dates are left out.
The width is the module's own, not the screen's: a calendar in a side column of a wide page shows the list too. It switches as the width changes, such as when a phone turns.
The month in the address
With Keep the month in the address on, the address of the page ends with the month shown, such as ?month=2026-11, as soon as the page opens and each time the visitor changes month. A visitor can share that address, or come back to it, and land on that month. The Back button of the browser does not step back through the months.
A month outside the months of the calendar (see "Month by month"), or that is not a real month (such as 2026-13), is ignored: the calendar opens as usual. Other parts of the address are kept. Leave the option off if two calendars are on the same page: they would share the same month.
Times and today
- Times are text. What you type in Time is shown to every visitor exactly as typed. It is not converted to the visitor's time zone. If your visitors are in several time zones, say which zone in the time, such as "18:00 Paris time".
- Days are calendar days. A date on October 15 is on October 15 for every visitor, wherever they are.
- Today is the visitor's day. Today's mark and the dimmed past days come from the clock of the visitor's device, in their own time zone. Late in the evening in New York, it can already be tomorrow in Paris: each visitor sees their own today.
Without JavaScript
The dates are written in the page itself. If a visitor's browser does not run JavaScript, or a search engine reads the page, the heading shows, then "All dates" and a list of every row: its day (or its first and last day), title (with its link), time and place. The list keeps the order of the rows and includes past dates, even with Show past dates off; a row without a day shows without a date. What needs JavaScript is missing: the month grid, the buttons, today's mark and the list of days on phones.
Accessibility
- The month is a list of days named by the month ("October 2026"). Each day carries its full date for screen readers, such as "Tuesday, October 13", and today adds "(today)" and is marked as the current date.
- When the month changes, screen readers hear the new month's name once, followed by "No dates this month." when it is empty, without interrupting what they were reading.
- The buttons are real buttons with names for screen readers and a visible focus outline in the accent color. The arrows and Today are at least 44 by 44 px. The arrows tell screen readers their keys, Page Up and Page Down. "+ more" tells screen readers whether the day is open or closed.
- The keyboard focus is kept when the month changes: on the arrow button, on Today when an arrow has just been turned off, on the month's name after "Next date", and on the same "+ more" button after it opens or closes.
- Past days are dimmed only visually. Colors tell kinds of dates apart only visually too: say the kind in the title as well, such as "Talk: …", if it matters.
- Check the contrast of your colors: the three colors, the secondary text and the text on your background and on the Today color, and Today's number on the accent.
Limits
- No time zone conversion. Times are shown as typed, the same for every visitor. See "Times and today".
- Today comes from the visitor's device. A visitor whose clock is wrong sees the wrong day marked.
- The dates are typed in the module. They are not synced with HubSpot marketing events, HubDB, your CRM, Google Calendar or any other calendar. A date that comes back every week is typed once per week.
- A month view only. No week or day view, no filter, no search, no "Add to calendar" button, no calendar feed.
- No data for search engines. The module adds no schema.org data (such as Event). Search engines read the dates as text in the page.
- Order in a day follows the rows, not the times. See "Busy days".
- Without JavaScript, a plain list in the order of the rows, past dates included. See "Without JavaScript".
- Up to 200 dates per module. Three colors.
- One month in the address per page: with two calendars on one page, leave Keep the month in the address off.
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).
A date does not show on the live page. Why?
Check that its row has a Day. If Show past dates is off, a date that ended before today is left out.
Can visitors see the times in their own time zone?
No. Times are shown as you type them. Add the zone to the text if your visitors are spread out, such as "18:00 Paris time".
How do I show a course over several days?
Set its first day in Day and its last day in Last day. It shows on each day in between.
How do I tell courses from talks?
Give each kind its own Color in the row, and set the three colors in the Style tab.
The calendar shows a list instead of the grid on my page. Why?
The module is narrower than List instead of the grid below (560 px by default). Lower the number, or set 0 to always show the grid.
Can I link to a given month?
Yes. Turn on Keep the month in the address and link to the page with ?month=2026-11 at the end.
Can I translate the labels?
Yes. All texts are fields, in the Texts group. The names of the months and days follow the language of the page.
Can I use it more than once on a page?
Yes. Each module has its own dates and settings. Leave Keep the month in the address off in that case.
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 |
|---|---|
| Heading | Calendrier |
| Previous month | Mois précédent |
| Next month | Mois suivant |
| Back to this month (button) | Aujourd’hui |
| More in a day | + {n} autres |
| Fewer in a day | Afficher moins |
| Empty month | Aucune date ce mois-ci. |
| Go to the next date | Prochaine date : {date} |
| Today (read by screen readers) | aujourd’hui |
| Several days | jusqu’au {date} |
| Opens in a new tab (read by screen readers) | (s’ouvre dans un nouvel onglet) |
| List of dates heading (without JavaScript) | Toutes les dates |
| Editor note: dates without a day | Certaines dates n’ont pas encore de jour : elles n’apparaissent pas dans le calendrier. En attendant, l’éditeur affiche des jours d’exemple. |
German (Deutsch)
| Field | Text to paste |
|---|---|
| Heading | Kalender |
| Previous month | Vorheriger Monat |
| Next month | Nächster Monat |
| Back to this month (button) | Heute |
| More in a day | + {n} weitere |
| Fewer in a day | Weniger anzeigen |
| Empty month | Keine Termine in diesem Monat. |
| Go to the next date | Nächster Termin: {date} |
| Today (read by screen readers) | heute |
| Several days | bis {date} |
| Opens in a new tab (read by screen readers) | (öffnet in einem neuen Tab) |
| List of dates heading (without JavaScript) | Alle Termine |
| Editor note: dates without a day | Einige Termine haben noch keinen Tag: Sie erscheinen nicht im Kalender. Bis dahin zeigt der Editor Beispieltage. |
Spanish (Español)
| Field | Text to paste |
|---|---|
| Heading | Calendario |
| Previous month | Mes anterior |
| Next month | Mes siguiente |
| Back to this month (button) | Hoy |
| More in a day | + {n} más |
| Fewer in a day | Mostrar menos |
| Empty month | No hay fechas este mes. |
| Go to the next date | Próxima fecha: {date} |
| Today (read by screen readers) | hoy |
| Several days | hasta el {date} |
| Opens in a new tab (read by screen readers) | (se abre en una pestaña nueva) |
| List of dates heading (without JavaScript) | Todas las fechas |
| Editor note: dates without a day | Algunas fechas aún no tienen día: no aparecen en el calendario. Mientras tanto, el editor muestra días de ejemplo. |
Support
Questions or a bug? Email support@airdatethemes.com, in English or French. We answer within two business days.
Going further
This module shows the dates you type in it. Our themes keep the dates of a whole site in one place, and every page follows.
For recurring webinars, Airdate Webinar (199 $) shows the next session with a countdown, the agenda and the replays. See it on the marketplace.
Almanac, our premium theme for training organisations, academies and event teams, has a full calendar tied to a catalogue of programmes, with dated sessions and statuses that update themselves. Coming soon to the marketplace.