Skip to main content

Calendar Embedding Guide

T
Written by Tom
Updated over 3 months ago

Embed your AddCal calendars directly into any website or application with our powerful embeddable calendar widget.

Beta Feature: Calendar embedding is currently in beta. We're actively improving it based on user feedback.

Features

The AddCal embeddable calendar comes with powerful features out of the box:

  • Multiple Views - Switch between Month and Schedule (List) views

  • Add to Calendar - One-click "Add to Calendar" buttons for each event

  • Responsive Design - Automatically adapts to mobile, tablet, and desktop screens

  • Timezone Support - Automatic timezone detection with manual override option

  • Subscribe Button - Allow visitors to subscribe to your calendar

  • Past Event Styling - Visual indicators for past events

Quick Start

Step 1: Get Your Embed Code

Visit https://addcal.co/integrations/calendar-embed to:

  • Select your calendar

  • Get your unique calendar UID

  • Copy the embed code with your calendar ID already included

Step 2: Add the Script Tag

Add this script tag to your HTML file, preferably in the <head> section or before the closing </body> tag:

<script src="https://cdn.addcal.co/embed/1.4.0/calendar.min.js"></script>

Step 3: Add the Calendar Container

Place this div where you want the calendar to appear on your page:

<div class="addcal-calendar"
     data-calendar-uid="YOUR_CALENDAR_UID">
</div>

Important: Replace YOUR_CALENDAR_UID with your actual calendar UID from the embed page.

Step 4: You're Done!

The calendar will automatically initialize when the page loads.

Configuration Options

The calendar can be customized using various data attributes:

Option

Type

Default

Description

data-initial-view

String

month

Initial calendar view (month or schedule)

data-initial-date

String

null

Set opening month/date (e.g., "2025-11" or "2025-11-01")

data-open-to-next-event

Boolean

false

Open calendar to the next event after today

data-timezone

String

Auto-detect

Display timezone (e.g., "America/New_York")

data-show-subscribe

Boolean

true

Show calendar subscription button

data-show-timezone

Boolean

true

Show timezone selector

data-branding

Boolean

true

Show "Powered by AddCal" branding (premium can disable)

data-calendar-uid

String

null

Calendar unique identifier (required)

Advanced Usage

Complete Example with All Options

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Calendar</title>
    <script src="https://cdn.addcal.co/embed/1.4.0/calendar.min.js"></script>
</head>
<body>
    <h1>Event Calendar</h1>    <div class="addcal-calendar"
         data-calendar-uid="abc123xyz"
         data-initial-view="month"
         data-initial-date="2025-11"
         data-open-to-next-event="false"
         data-timezone="America/New_York"
         data-show-subscribe="true"
         data-show-timezone="true"
         data-branding="false">
    </div>
</body>
</html>

Multiple Calendars on One Page

You can embed multiple calendars on the same page:

<script src="https://cdn.addcal.co/embed/1.4.0/calendar.min.js"></script><h2>Team Events</h2>
<div class="addcal-calendar" data-calendar-uid="team-calendar-uid"></div><h2>Company Events</h2>
<div class="addcal-calendar" data-calendar-uid="company-calendar-uid"></div>

Each calendar will have its own settings and can be configured independently.

Common Use Cases

Event Landing Page

Perfect for displaying all your upcoming events on a dedicated page:

<div class="addcal-calendar"
     data-calendar-uid="your-uid"
     data-open-to-next-event="true"
     data-branding="false">
</div>

Conference Schedule

Show your conference schedule in list format:

<div class="addcal-calendar"
     data-calendar-uid="your-uid"
     data-initial-view="schedule"
     data-initial-date="2025-11-15"
     data-show-subscribe="true">
</div>

Team Calendar

Embed a team calendar with a specific timezone:

<div class="addcal-calendar"
     data-calendar-uid="your-uid"
     data-timezone="America/New_York">
</div>

Troubleshooting

Calendar Not Showing

Problem: The calendar doesn't appear on the page.

Solutions:

  • Verify the script tag is included before the calendar div

  • Check browser console for JavaScript errors

  • Ensure data-calendar-uid is correct

  • Make sure the calendar is published in your AddCal dashboard

Wrong Timezone

Problem: Events show in the wrong timezone.

Solutions:

  • The calendar auto-detects timezone from the browser by default

  • Set data-timezone explicitly to force a specific timezone

  • Check that event timezones are correct in AddCal dashboard

  • Users can change timezone using the timezone selector (if enabled)

  • Clear browser cache and cookies to reset saved timezone preferences

Events Not Loading

Problem: Calendar shows but no events appear.

Solutions:

  • Verify calendar UID is correct

  • Check that events are published in AddCal dashboard

  • Open browser DevTools Network tab and check for failed API requests

  • Ensure no ad blockers or privacy extensions are blocking requests

  • Verify that your calendar has at least one event

Styling Issues

Problem: Calendar looks broken or misaligned.

Solutions:

  • Check for CSS conflicts with your site's styles

  • Ensure viewport meta tag is present

  • Clear browser cache

  • Try loading the calendar in an isolated test page

Browser Support

The AddCal embeddable calendar supports:

  • Chrome/Edge: Latest 2 versions

  • Firefox: Latest 2 versions

  • Safari: Latest 2 versions

  • Mobile browsers: iOS Safari 12+, Chrome Android

Premium Features

Calendar embedding is available for premium subscribers. With a premium subscription, you can:

  • Remove AddCal branding from the embedded calendar

  • Access the full embed code from the integration page

To upgrade, visit your subscription settings.

Need Help?

If you have questions or need assistance with calendar embedding:

Did this answer your question?