Embeddable Calendar how-to

Updated May 2nd, 2024 by   Nicolas Zenker

Embeddable calendars are a fantastic tool for engaging your customers, increasing attendance at your events, and providing a simple and beautiful overview of your upcoming events directly on your website. Our calendars are packed full of calendar features and allow you to manage and share all your events with your users with ease.

Embedding a calendar on your website allows you to create a public calendar where customers or clients can see your calendar widget. Since our embeddable calendar widget creates an interactive calendar, viewers can change the calendar settings to display in month view, week view, or list view. Better yet, they can even subscribe to your calendar to get all of your upcoming events added to their personal calendar. AddEvent supports many calendar apps, including Google Calendar, Outlook Calendar, Apple Calendar, Office 365, and Yahoo Calendar.

Examples of How to Use a Website Calendar:

  • Embed a course calendar on your coaching and course website.
  • Let your customers know when your next promotional events are happening
  • Share your event calendar of marketing events, such as upcoming tutorials, webinars, and special customer events.

See It In Action:

Take a look at our “Embeddable Calendar” page to demo our interactive calendar. 

AddEvent’s embeddable calendars integrate quickly and seamlessly with your website. If you use any of the main website builders like Wix, Squarespace, WordPress, Weebly, Leadpages, or Jimdo, we’ve got you covered – our embeddable calendar works perfectly across most builders and web pages.

Adding an embeddable calendar to your website is as simple as creating the calendar, adding your upcoming events in AddEvent, customizing it to suit your needs, and then copying and pasting the embed code (most common and works with most html code editors) into your website.

This article will show you how to create, customize, and embed your calendar in 5 super-easy steps!

How to embed a calendar on your website

1. Create your calendar in the AddEvent Dashboard.

Add the calendar details including the name, description, time zone, and display settings.

One of the key features of having an events calendar on AddEvent is that you can collect information from users when they subscribe to your public calendar.

2. Add events to your calendar

From the AddEvent dashboard, add the upcoming events (you can always add new events later) that you want to show on your events calendar. Don’t forget to fill out the event details section so your guests know all the fun event details.

We’ve got tons of fantastic calendar features for each event, such as event series, time zone selector, recurring event rules, and RSVP functionality. You can also share these events individually using all of our great tools, like our add to calendar button for websites and landing pages, add to calendar links for emails, our event landing pages, and embedding an embeddable event tile.

Tip: If you already have these events in an external calendar service, you can import events into your calendar from Google Calendars or any main calendar app in an iCalendar (.ics) format.

Now that you have your events in your calendar, it’s time to embed it on your website!

You can also add or update events in the future, and they will automatically show up on your embedded calendar. That’s the beauty of using a dynamic embeddable calendar for your website calendar instead of just an image!

3. Customize your embeddable calendar

On the calendar page, scroll down to the “Embed” section.

You will see two options – Embeddable Calendar and Embeddable Events List. This gives you two different ways to set your calendar format.

Embeddable Calendar

An embeddable calendar is going to give you a full month, week, or schedule view of your upcoming events embedded on your website. This is the traditional calendar interface you would expect to see from a calendar plugin for your web calendar. It’s up to you to decide how you want your calendar format to look!

AddEvent's Embeddable Calendar Options

Embeddable Events List

An embeddable events list will give you a list of events so users can easily scroll through your upcoming events without the traditional calendar view.

Embeddable Events List Image

For the sake of this example, we will walk through the steps to embed the full calendar. The steps are the same, so if you’re embedding the embeddable events list, don’t fear—you can still follow along!

You will have two options for customizing your embeddable calendar: quick customize and custom calendar templates. We will go into more detail about each of these customization options below. The TL;DR is that these options allow you to customize the calendar features, default options, color, and more. These allow you to match our embeddable calendar to your website branding seamlessly.

Click on “Customize + Share” to customize calendar features like default view, the first day of the week, time format, etc.

When your embeddable calendar looks exactly how you want it to, simply click the button at the top of the page to see the different embed options. Options included are embed code (also referred to as html code), URL, and iFrame with a URL.

4. Copy the code for the embeddable calendar

5. Paste Embed Code Into Your Website Builder of Choice

Paste the code for your embeddable calendar directly into your website or your website builder. It’s as simple as that!

Tip: If you are using a website builder, you should typically look for a code snippet or custom HTML section to put the embed code, URL, or iFrame.

Embeddable Calendars and Calendar Subscriptions Combined

One of the most powerful pieces of calendar functionality offered by our embeddable calendars is that AddEvent’s embeddable calendar and AddEvent’s subscription calendar are the same thing!

You can let your end-user subscribe to your calendar directly from the calendar embedded on your website, or you can use any of our other calendar sharing methods!

Subscription Calendars

If a user subscribes to your embeddable calendars, a dynamic link between the calendar in AddEvent and their calendar service is created.

If you don’t know what that means, don’t worry, we will try again! We know it’s a bit of a foreign concept, so let’s dive in!

If you add new events or update your event details, these changes will be shown in your user’s calendars. You can allow users to subscribe to your calendar anonymously or collect completely customizable fields on each of your users before they can subscribe.

If you don’t want users to subscribe to your calendar, no problem! You can remove that option when you customize your embeddable calendar.

Calendar Sharing Methods:

  • Add to Calendar button for your website
  • Add to Calendar Links for Emails and Social Media
  • Calendar Landing Page
    • Created automatically and perfect for sharing on social media
  • Direct Links to the following Calendar Services:
    • Apple Calendar
    • Google Calendar
    • Office 365
    • Outlook
    • Outlook.com
    • Yahoo Calendar

Simple but powerful customization

At AddEvent, we believe that you shouldn’t have to compromise when it comes to how your web calendar widget looks on your website. We give you two powerful customization options to customize your embeddable calendar: quick customize and custom calendar templates.

Quick Customize

Quick Customize allows you to choose which specific buttons or features are shown on the website calendar when they are on your website, as well as default views, starting day, and time format.

Custom Calendar Templates

Custom calendar templates allow you to customize every aspect of the embeddable calendar using JavaScript. While this method does require some coding knowledge, we make it as simple as possible to change everything you could possibly need or want to change about your calendar design and give you the most customizable calendar options so you can match the calendar to your website theme perfectly.

Embeddable events

You can also use the same technique to embed a single calendar event on your website instead of using an entire web calendar. Like our embeddable calendar, our embeddable events are completely customizable and will integrate seamlessly with your custom site or any website builder, such as Wix, Squarespace, WordPress, Weebly, Leadpages, or Jimbo.

Using AddEvent’s Embeddable Calendars

When it comes to creating a beautiful embeddable calendar, AddEvent is here to help. Get started for free by creating your calendar and events today!

Note: If you would like to use AddEvent’s embeddable calendar, you will need to be on a paid plan. Reach out to customer support or fill out this form to request a free trial of our paid plans.

Let's create events together 😍

Please fill out this field