Aivilo Web
Calendar Module

A simple, vanilla javascript-based calendar built for HubSpot

Note: HubSpot is no longer accepting updates to existing modules in the HubSpot Ecosystem, including this module! In an effort to provide the community with the most up-to-date version of this module, I've included the code below.

Please purchase the module from the HubSpot Marketplace and replace the code in the module with code featured below! Purchasing the module will provide you with the module editing fields you need customize the module.

Visit https://app.hubspot.com/marketplace/[YOUR HUBID]/products/aiviloweb/aivilo-web-calendar-module to purchase.


What's new from the 3/26/22 Update

  • Add recurring events!
    • Weekly
    • Biweekly
    • Monthly
    • Bimonthly
    • Yearly
    • Custom Weekly Frequency (every 3, 4, 5, 6, 7, or 8 weeks)
  • Greater customization of event cards

Additional module features

  • Mobile responsive calendar
  • Create an infinite number of events to populate on the calendar by date
  • Manually choose how many event cards to show
  • Date sorter and month advancement options
  • Add custom CSS class for custom CTA buttons
  • Set a primary and secondary color for module elements

Documentation

Add Event

Add an unlimited number of events. Each event automatically populates on the module calendar. Manually rearrange the events if displaying events in chronological order is desired.

Note: This module does not automatically sort events based on date or time, nor will it automatically remove events from the editing pane once they have passed. Events whose dates have passed will automatically be removed from the listing of event cards, but will remain below the calendar on the live page.


Event Options

Add settings to each of your events. Add an Event Title, Event Description, Event Link, Event Date, and Event Time.

The Event Title will populate on the calendar under the specified event date. Multiple events on the same day will stack on top of one another on the calendar in the order of the events in the editing pane.

The Event Title, Event Description, Event Date, Event Time, and a call-to-action button hyperlinked to the an event landing page at the specified Event URL will appear in the Event Card below the calendar.

Choose a Single Day, Multiple Day, or Recurring Event type. For recurring events, create a weekly, biweekly, monthly, bimonthly, or yearly recurring event.

Customize the event card that populates below the calendar with more freedom. A rich text editor allows you to customize the information you add about your event

Note: More event settings will become available in later versions of this module.


Calendar Options

Number of Event Cards to Show Set a number of event cards to show below the calendar. The number of event cards displayed will be no greater than the number of events added in the "Add Event" section.

Add Class for Event Card Button: Add a custom CSS button class for CTA buttons located inside of the event cards to help stay on-brand.

Primary Color: Type in a hex code color value to stay on brand.

Secondary Color: Type in a hex code color value to stay on brand.