Embeddable Calendar

This help doc provides information about the Embeddable Calendar and explains how to embed it on your website.

Embeddable calendars are a fantastic tool to engage your customers, increase attendance at your events, and provide a simple and beautiful overview of your upcoming events directly on your website. Our embeddable calendars are packed full of features and allow you to manage and share all your events with your users with ease. Embedding a calendar on your website is perfect for so many different use cases: embed a class calendar on your course website, let your customers know when your next promotional events are happening, or let users know about upcoming tutorials, webinars, and special events.

AddEvent’s embeddable calendars integrate quickly and seamlessly with your website. If you use a website builder like Wix, Squarespace, WordPress, Weebly, Leadpages, or Jimdo, we’ve got you covered – our embeddable calendar will work perfectly there too.

Adding an embeddable calendar to your website is as simple as creating the calendar and your events in AddEvent, customizing it to suit your needs, and then copying and pasting the code into your website.

Embedding a calendar on your website

From your Dashboard:

  1. Hover over the calendar that you would like to embed on the left part of your Dashboard.
  2. Click the three dots to the right of your selected calendar and then click Calendar page.
  3. Scroll down to the Embeddable calendar section and click Customize + Share.
  1. Click Show embed options.
  1. Click Copy next to the embed option that you want to use.

Embed Options

Embed code (default)

This is the most common embed option. Works with the majority of HTML/code embed options. When you use this version, the calendar automatically resizes based on the size of the content within the embedded iframe. It also enables click-outside functionality to hide popups and drop-down options.

URL/Link to the embeddable calendar

This option is a plain URL that you can add to an iframe.

Most website and landing page builders allow you to paste custom snippets of code using a "custom HTML"/"custom embed" block. This makes it really easy to add an embeddable event, calendar, or events list to your website or landing page. However, certain sites don't allow custom code to be added to your page. They usually do allow you to embed content from another site using a link/URL.

Embed your calendar as an iFrame

This option includes an iframe and is commonly used with services like Microsoft SharePoint.

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

Click the Customize + Share button to view the customization options. 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. See the left-hand column in your calendar for all the customization options.

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.

Watch this tutorial!