Embeddable calendar details

Overview

An embeddable calendar is a great way to display events on your website or landing page in a full calendar view. AddEvent offers tons of great features for your embeddable calendar, including timezone support, mobile optimization built-in, the option to embed multiple calendars at once, extensive customization options, and easy installation. This page outlines how to create a calendar, how to install an embeddable calendar on your website, and technical details about how the embeddable calendar works.

How to create a calendar

Before embedding your calendar on your website, you must first create a calendar in AddEvent. There are two ways to create a calendar:

  1. Create a calendar in the dashboard
  2. Create a calendar using our API.

Once your calendar is created, the next step is to create events in your calendar. This can be done in several ways, including in the Dashboard, via the API or Zapier integration, or by synchronizing with an external calendar.

Synchronizing with an external calendar

Synchronizing with an external calendar allows you to import your events from a 3rd party calendar service to AddEvent to share them with your users through AddEvent. This is convenient if your events already exist on another service and you don’t want to manually copy the events. You will need a calendar feed in a valid iCalendar (.ics) format in order to import the events into AddEvent, which is supported by most major calendar services. Events that are created in an external calendar and synchronized to your AddEvent calendar can’t be edited in AddEvent, but they can be shared in all the same ways as any other event or as part of a calendar. You can edit these events in your external calendar and the changes that you make will be synchronized to AddEvent.

How to install your embeddable calendar

Once you have created your calendar and added events to it, the next step is to share the calendar with your users. Read each section below to learn more about each sharing method and which situations they are best suited for.

To install an embeddable calendar on your website, simply copy the code snippet from a calendar page in the AddEvent app. Then paste this code into your website where you want the embeddable calendar to appear. If you are using a website or landing page builder, you will probably need to use the “Custom embed”, ”HTML embed”, or similar option to allow you to paste the code into that section of the website.

End-user experience

When an end-user visits a page with an embeddable calendar, they will see a calendar view of events on that calendar. The user can click on individual events to see more event details, choose to open an event landing page for the event or to add the event to their calendar for a standard event, or to RSVP to an event with RSVP enabled. The user can also choose to subscribe to the calendar, which creates a dynamic link between your users' calendars and AddEvent. This means that all of the events on the calendar will be added to the user’s own personal or work calendar and any changes (such as updates to event details or newly created events) will reflect in your users' calendars. There are several view options available which allow the user to customize which events they want to display, and there is a timezone select which allows the user to choose which timezone they wish to view the events on the calendar in.

Customization

Our embeddable calendar comes with a beautiful standard template, but we also make it easy to customize your calendar to match the look and style of your website and to keep your branding consistent. There are two customization options available for our embeddable calendar:

  • Quick customize: This option allows you to quickly and easily adjust several display options for your embeddable calendar including which calendars are displayed, which features and functionality are included, as well as default view, time, and day formats.
  • Custom templates: Creating a custom template allows you to customize every aspect of the embeddable calendar from the date and time format, to language, colors, and fonts. This method of customization will require knowledge of HTML and CSS.

Technical details

Before creating or sharing your events, you may want to review the following sections for specific technical information about calendars and embedding it on your website. If you need help getting set up, or if you have any questions about the content on this page, please contact support@addevent.com and our wonderful support team will be happy to help you.

Mobile support

The embeddable calendar is fully mobile-optimized, which means that that the embeddable calendar will display a mobile-specific view when the screen is below a certain width. The width at which the calendar changes to the mobile view can be controlled by customizing the calendar with a custom template, which you can read more about in the Customization section above.

Embedding multiple calendars at once

The embeddable calendar supports the option to embed any number of AddEvent calendars in a single view, from just one to as many calendars as you have in your AddEvent account. This is a great option if you want to divide and organize your events into distinct calendars that your users may be interested in viewing either on their own or in various combinations. You can choose which calendars to include, and which calendars to display by default when the user first views the page, and the user can easily customize the view to suit their own needs. To embed multiple calendars at once, you will need to customize your calendar, see the section on Customization above.

Calendar subscribers

Our embeddable calendar solution is part of our calendar functionality that also includes subscription calendars. This means that you can also allow users to subscribe to your calendar and synchronize all of the events on their calendar to their own personal or work calendar. You can find out more information about calendar subscribers on the Subscription calendar solution page or the Subscription calendar details page. You can customize your embeddable calendar to remove the “Subscribe” button, see the section on customization above.

Collecting subscriber information

There are two options for collecting information from your users when they subscribe to your calendar:

  1. Allow users to subscribe anonymously
  2. Collect user data when they subscribe

If you choose to “allow users to subscribe anonymously”, the user will be able to subscribe to the calendar without inputting any of their personal information. AddEvent will still collect some general information about each subscriber, including IP address, location, calendar service, and synchronization data. If the user is inside the EEA (European Economic Area), the IP address is automatically anonymized to comply with GDPR. You can also choose to anonymize this data for all users.

Choosing to “collect user data when they subscribe” allows you to add custom fields which the user must fill out before subscribing to the calendar. By default, the user is required to enter their name and email address, but you can add additional fields to collect any other information that you want. Supported field types include text, number, marketing consent checkboxes, multiple options (radio buttons and checkboxes), email, date, country, state, and query strings. If you choose to collect user data, all users will be redirected to the calendar landing page to fill out this information before they can subscribe to the calendar

Calendar updates

The subscription calendar creates a dynamic connection between AddEvent and the user's calendar which means that your subscription calendar will synchronize with the user's calendar on an ongoing basis. Once a user is subscribed to your calendar, any changes you make to that calendar including updating event details, changing the event time or date, and adding or deleting events on the calendar will be reflected on the user's calendar.

Changes you make to your calendar in AddEvent do not update instantly in your user's calendar. Instead, the frequency with which they update is controlled by how often the particular calendar service that the user is using checks for updates in your subscription calendar. You can find more information about the approximate calendar update times for specific services that we support here, but this generally takes between 3 and 24 hours.

Calendar notifications

Events in AddEvent have an option to include a push notification from the user's calendar service to remind them of upcoming events. You can choose how long the notification is sent before the event takes place. There is only the option for a single calendar notification for each event on the calendar.

These calendar notifications are entirely controlled by the calendar services, and thus AddEvent cannot guarantee them. In the past, calendar services have even been known to disable these push notifications for calendars that their users subscribe to, to prevent a calendar from spamming their users with notifications (something AddEvent does not do). There is usually an option for your users to manually re-enable these notifications by adjusting the calendar settings.

Timezone support

The subscription calendar has timezone support, which means that it automatically converts all of the events on the calendar to the user's timezone. When a user subscribes to a calendar, all of the events will be converted to the user's timezone when they are displayed in the calendar.

When a user views an embeddable calendar, AddEvent predicts their location based on their IP address and chooses a timezone to display the events on the calendar on the basis of that IP address. If the user wants to see the events in a different timezone, or if the timezone that we predict happens to be incorrect, the user can manually select a different timezone using the timezone select option below the embeddable calendar.

Daylight savings time support

The subscription calendar also has support for daylight savings time (DST) rules. We automatically convert all events to the correct time based on the 17+ different daylight savings time rules that exist worldwide.