A full-featured event calendar with month, week, day, and timeline views. Categories, search, speaker details, popup overlays, timezone support, and complete style control from the editor.
Week view with Monday-Friday company activities. Multiple overlapping events, team dinners, workshops, and presentations across 5 days.
March 24-28 · Barcelona
Month view with full Spanish locale. Month and day names auto-translated. All UI labels in Spanish via content fields. Shows locale support for international sites.
Conferencias, talleres y seminarios web para equipos de producto y diseño
Day view in dark mode with Poppins font. Same calendar, completely different look — just by changing the style fields. Deep navy background with accent red.
April 15, 2026 · Main Venue
Timeline view with horizontal time axis and track rows for parallel sessions. Events span their time range as horizontal blocks within their assigned track. Ideal for conferences, workshops, and multi-room events.
June 12, 2026 · Convention Center
Calendar Pro is a full-featured event calendar module for HubSpot. It renders events in four distinct views — month, week, day, and timeline — each fully styled and responsive. Visitors can browse dates, search events, filter by category, and open detailed event popups. Everything is configured from the HubSpot editor with zero code required.
Traditional calendar grid showing the entire month. Events appear as color-coded pills on their respective dates. Days with more events than can fit show a "+N more" overflow link. Today is highlighted. Click any event pill to open the detail popup.
Seven-column time grid with a vertical time axis from the configured start to end hour. Events render as positioned blocks based on their start and end times. All-day events appear in a separate row above the time grid. A red line marks the current time.
Single-column time grid for one day. Same time axis as week view but with more room for event details. Ideal for days with many overlapping events.
Conference-style schedule with horizontal tracks (e.g., "Main Stage", "Workshop Room"). Events are placed in their assigned track as blocks across a horizontal time axis. Best for multi-track conferences and all-day event programs.
Events are managed through a repeater field in the Content tab. Each event has the following fields:
Categories are defined in a separate repeater with three fields per category: a slug (used as the identifier), a display name (shown in legends and popups), and a color value (hex). Event pills on the calendar inherit their category color automatically. The category legend can be positioned above or below the calendar and toggled independently.
Filter by category using the legend pills — clicking a category shows only events in that category. Click "All" to reset the filter. Categories with no events for the current view are dimmed automatically.
Enable the timeline view from the Settings tab. Define tracks in the tracks repeater — each track has a slug and display name. Assign events to tracks using the track field. The timeline view renders a horizontal time axis with track lanes stacked vertically. Events without a track assignment appear in the first track by default.
Timeline view is ideal for multi-room conferences, workshop schedules, and any scenario where parallel sessions need to be visualized side by side.
Clicking any event opens a contextual popover positioned near the clicked event (Google Calendar style). The popup shows a colored accent bar, event title, date and time, category badge, location with icon, speaker card with photo, rich text description, and CTA button. The popup closes on outside click (configurable), Escape key, or the close button. Popups scroll with the calendar and stay anchored to their event.
Set the locale field in Settings to any language code (e.g. es, fr, de, zh, ja, ro) and all month names, day names, and date formatting automatically translate via the browser Intl API. Leave empty to use the visitor browser language. All UI labels (Today, Month, Week, Day, search placeholder, category names) are separate text fields you can set to any language.
Set a base timezone for your events in the Settings tab. When "Show visitor local time" is enabled, times automatically convert to the visitor local timezone with a badge indicating the detected zone. All timezone conversions happen client-side using the Intl API.
Every visual property is controlled from the Style tab in the HubSpot editor. Nothing is hardcoded in the module CSS.
All color fields support full opacity control, making dark mode possible by simply adjusting the color values in the Style tab. No special dark mode toggle needed — the same fields that make a light calendar also make a dark one.