How to Embed a Calendar Widget on Your Squarespace Website embeddable calendar

Updated Dec 6th, 2024 by Camella Bridges

Embeddable calendars, oftentimes referred to as calendar widgets or calendar plugins, are a fantastic tool for engaging your customers, boosting attendance at your events, and providing a simple and beautiful overview of your upcoming events directly on your Squarespace website. Our calendars are packed with features, allowing you to manage and share all your events effortlessly.

By embedding a calendar on your website, you create a public calendar where customers or clients can see your calendar widget. Our interactive Squarespace calendars allow viewers to switch between month, week, and list views. They can also subscribe to your calendar, adding all of your upcoming events to their personal calendars. AddEvent supports numerous calendar apps, including Google Calendar, Outlook Calendar, Apple Calendar, Office 365, and Yahoo Calendar.

Popular Uses for Website Calendars

  • Course Calendars: Embed a course calendar on your coaching and course website.
  • Promotional Events: Inform your customers about your next promotional events.
  • Marketing Events: Share a calendar of marketing events, such as upcoming tutorials, webinars, and special customer events.

What’s an embeddable calendar?

An embeddable calendar, also known as a calendar widget, is a dynamic website feature that can be seamlessly integrated into your site. With just a few clicks, visitors can view your events calendar, see upcoming events, and even add events to their own calendar apps.

Unlike static images or links, an interactive embeddable calendar widget allows users to scroll through months, click on event details, and interact directly by registering or RSVPing to events—all from your Squarespace event calendar plugin.

AddEvent offers a modern events calendar solution that automatically syncs your business’s event calendar across multiple platforms, including Google Calendar, Outlook, and Apple Calendar. This versatile tool integrates seamlessly into your Squarespace website, allowing you to display a calendar or upcoming events list directly on your site, making it visually appealing for customers to access.

With customizable options to match your brand, setting up an AddEvent event calendar plugin is as simple as copying the provided HTML calendar code and pasting it into your website builder, whether it’s Wix, Squarespace, WordPress, or another platform.

Combining Embeddable Calendars and Subscription Calendar Widgets

One of the most powerful features of AddEvent’s embeddable calendars is that they double as subscription calendars. This means users can subscribe to your calendar directly from the embedded version on your website or through any of our other calendar-sharing methods.

What’s a Subscription Calendar?

When a user subscribes to your embeddable calendar, a dynamic link is created between the calendar in AddEvent and their calendar service. You can think of this as a calendar feed that goes from your AddEvent calendar directly into your subscriber’s calendar so they always have your updated events. You can think of “calendar subscribers” the same way you would think of social media followers – they can be customers, clients, friends, or people who just like your business.  

If you’re familiar with the “Holidays in Your Country” calendar that you see in Google Calendars, or if you’ve ever added a co-worker’s calendar to your work calendar, then you’ve used a subscription calendar before! 

Subscription calendars ensure that any new events or updates your business makes will automatically reflect in the subscriber’s calendar. You can choose to allow users to subscribe anonymously or collect customized information from them in the subscription process. Collecting information from your “followers” allows you to see who has subscribed. It is particularly helpful if you’re running a membership program where clients should only have access while they are members.

If you prefer not to offer the subscription option, you can easily remove the subscription button when customizing your embeddable calendar.

Different ways to share your calendar:

  • Add to Calendar Button: This is for easy integration on your website.
  • Add to Calendar Links: Suitable for emails, SMS, and social media.
  • Calendar Landing Page: Automatically created for easy sharing on social media.
  • Direct Links to Calendar Services:
    • Apple Calendar
    • Google Calendar
    • Office 365
    • Outlook
    • Outlook.com
    • Yahoo Calendar

Simple but Powerful Customization

At AddEvent, we believe your website calendar widget should perfectly complement your website, that’s why we offer two powerful customization options:

Quick Customize

Quick Customize allows you to select specific buttons or features to display, set default views, choose the starting day of the week, and define the time format.

Custom Calendar Templates

For those with coding knowledge, our custom calendar templates enable you to modify every aspect of the embeddable calendar using JavaScript. This allows for extensive customization to seamlessly match your calendar’s design with your website’s theme.

Integrate AddEvent’s Embeddable Calendars

AddEvent’s embeddable calendars integrate quickly and easily with your website. Whether you use popular website builders like Wix, Squarespace, WordPress, Weebly, Leadpages, or Jimdo, our embeddable calendar works perfectly across most platforms.

Adding a calendar widget to your website is simple. Just create the calendar, add your upcoming events in AddEvent, customize it to suit your needs, and copy and paste the embed code into your website’s HTML editor.

This article will guide you through creating, customizing, and embedding your calendar widget in just a few easy steps!

How to Add a Calendar Widget to Your Squarespace Website

Create or log in to your AddEvent account

  • First, create or log in to your AddEvent account.
    • Sign up for an AddEvent account if you don’t already have one. Choose from our free Hobby plan or one of our paid plans, which come with lots of additional features. Learn more about our plans on our plans and pricing page.

Create your calendar

  • Create your calendar in the AddEvent dashboard. Add the calendar details, including the name, description, time zone, and display settings.
    • One of the best features of an AddEvent subscription calendar is that you can collect any relevant information from users when they subscribe to your public calendar. 

Add events to your calendar

  • Add the upcoming events From the AddEvent dashboard (you can always add new ones later) that you want to show on your events calendar.
    • Remember to fill out the event details section so your guests know where and when the fun is happening!

Now that your events are added to your calendar, it’s time to add your events calendar to Squarespace!

(You can easily add or update events in the future, and they will automatically appear on your Squarespace event calendar plugin. This is the advantage of using a dynamic, embeddable calendar over a static image!)

Customize your embeddable calendar plugin or events list

  • On the calendar page, scroll down to the “Embed” section.
    • Here, you’ll find two options: Embeddable Calendar and Embeddable Events List. These options provide different ways to format your calendar. 
    • If you want a calendar widget that looks like a traditional calendar, you want to use our “Embeddable Calendar” option.
    • If you want an interactive events list widget, you can use our “Events List” option as this has a smaller footprint and lists your upcoming events instead of putting them in a calendar view.
  • You have two options for customizing your embeddable calendar: Quick Customize and Custom Calendar Templates.
    • In short, these options let you tailor the calendar’s features, default settings, colors, and more, ensuring it seamlessly matches your website branding.
  • Click “Customize + Share” to adjust calendar features such as the default view, first day of the week, time format, and more.

For this example, we’ll guide you through the steps to embed the full calendar widget. The process is the same for embedding the embeddable events list, so you can still follow along without any worries!

  • When your embeddable calendar widget looks exactly the way you want it, click the button at the top of the page to view the different embedding options. These include embed code (also referred to as HTML code), URL, and iFrame with a URL. Copy the code. 

Head to your Squarespace account

  • Create or log in to your Squarespace account. Once inside, locate the Squarespace Editor for your site.
  • Navigate to the page where you want to add the AddEvent tool. Click “Add a Section” in the desired area and select “Add a Blank Section.”
  • In the upper left corner of the new section, click “Add Block.”
  • Choose the “Embed” option and insert the code you copied from your AddEvent embeddable. 
  • Resize the element to your preferred dimensions for the AddEvent tool, and then click the “Edit” icon.
  • Move the selector from Link to Code Snippet, then click Embed Data right below that.
  • Paste the embeddable code you copied from AddEvent and click “Save.”

It’s important to note that Squarespace’s preview of embedded objects is often skewed. Save and exit the editor to see the page rendered correctly. Then, you can check that the calendar’s sizing and functionality are correct.

Try AddEvent’s Embeddable Calendars for Free

Embeddables are one of the many perks to AddEvent’s paid functionality. If you want to use AddEvent’s embeddable calendar but are currently on a Hobby plan, reach out to us at trial@addevent.com or fill out this form to request a free trial of our paid plans so you can take your embeddable calendar or events list for a spin!


FAQs:

How to add a calendar to your Squarespace site?

  1. Create a free AddEvent account
  2. Create, or import your calendar
  3. Add some events to your calendar.
  4. Customize your embeddable calendar plugin or events list.
  5. Grab the calendar code snippet from your calendar in AddEvent.
  6. Embed the calendar on your Squarespace site.

How to embed a calendar on your Squarespace site

To embed a calendar on your WordPress site, you can create a calendar with events in AddEvent. Generate the embed code in AddEvent and add this code to your Squarespace website.

Let's create events together 😍

Please fill out this field