Embeddable Calendar how-to

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. 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. You can also choose what information you would like to collect from users when they subscribe to your calendar from this point (see below).
   
   
   
2. Add events to your calendar
   From the AddEvent dashboard, add the events that you want to show on your calendar. We’ve got tons of fantastic features for each event, like event series, 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, our add to calendar links for emails, our event landing page, and our embeddable events.
   
   
   
   Tip: If you already have these events in an external calendar service, you can import events into your calendar from this service 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 on the calendar at any point in the future and they will automatically show up on your embedded calendar.
   
   
3. Customize your embeddable calendar
   On the calendar page, scroll down to the “Embeddable calendar” section. You have two options for customizing your embeddable calendar: quick customize and custom calendar templates. We go into more detail about each of these customization options below, but these two options allow you to customize the features, default options, color and so much more so you can match our embeddable calendar to your website theme perfectly.
   
   
   
4. Copy the code for the embeddable calendar
   When your embeddable calendar looks exactly how you want it to, simply click copy at the top of the page to copy the code for your embeddable calendar.
   
   
5. Paste into your website
   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.
   
   

Embeddable calendar and subscription calendar combined

One of the most powerful pieces of functionality offered by our embeddable calendar is that AddEvent’s embeddable calendar and AddEvent’s subscription calendar are the same thing! You can let a user subscribe to your calendar directly from the calendar embedded on your website or you can use any of our other sharing methods: an add to calendar button for your website, add to calendar links for your emails, a calendar landing page or direct links to the calendar service for your embeddable calendar. 

If a user subscribes to your embeddable calendars, this creates a dynamic link between the calendar in AddEvent and their calendar service, which means that 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 data on each of your users before they can subscribe.

If you don’t want to allow users to subscribe to your calendar, that’s as simple as removing that option when you are customizing your embeddable calendar.

Simple but powerful customization

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

1. Quick customize allows you to choose which specific buttons or features are shown on the embeddable calendar when it is on your website, as well as default views, starting day and time format.
    
2. 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 embeddable calendar so you can match the calendar to your website theme perfectly.
   

Embeddable events

You can also use the same technique to embed a single event on your website. Like our embeddable calendar, our embeddable events are completely customizable and will integrate seamlessly with your custom site or any website builder that you use like Wix, Squarespace, WordPress, Weebly, Leadpages, or Jimbo.

Sign up to AddEvent today to try out our fantastic event and calendar sharing tools including our embeddable calendar and if you have any further questions check out our extensive documentation or contact us to learn more!