Calendar Button

The Calendar Button component generates and downloads iCalendar (.ics) files for webinar events. This component allows users to easily add webinar sessions to their personal calendar applications.
‍

Props

  • None

Route Params

  • webinarRegistrationId: The unique identifier for the webinar registration. Must be present in the page URL as a query parameter. Must be a valid UUID that corresponds to an existing webinar registration.

Component Attributes

  • data-cc-component="calendarButton" – Initializes this component automatically on page load.

Custom Behavior

  • Adds a click event listener to download an ics file.
  • Default event duration is 90 minutes.
  • Includes two automatic calendar reminders (1 day and 1 hour before start time)
  • Tracks click interaction with metadata.
  • Uses user's local timezone.

Example

Add to Calendar

Adding to a new site

  1. From the Kitchen Sink copy the Calendar Button component (cmd + c OR right-click → Copy).
  2. Open your Webflow project and paste the component where you'd like the start time to appear.
  3. Select the pasted element and convert it into a Webflow Component (right-click → Create Component).
  4. Publish your changes. The button will automatically initialize and be functional when the page URL includes a valid webinarRegistrationId.

Adding to an existing site

  1. Find the element you want to handle the click (or add a new button, link box, etc).
  2. In the Element Settings panel, add this custom attribute:
    • Name: data-cc-component
    • Value: calendarButton
  3. Publish your changes.

Styling notes

Apply your own styles using Webflow's Designer. The component will not modify styling automatically. You can safely add text, icons, or animations to the button.

Accessibility Note: The component preserves any existing accessibility attributes (aria-label, tabindex, etc.) on your button element.