How to Embed your Calendar on your Website

With a Timely account, you can easily embed an events calendar into your website to display events online. Once the calendar is embedded, all changes made to your published events are updated automatically on your website. Learn all the steps to embed it on your site in this article.

Timely's event platform can be embed on any public or private website or mobile application. It works perfectly with many website content platforms, including HTML, WordPress, SquareSpace, Wix, Shopify, BigCommerce, Weebly, Joomla, Tumblr and Drupal.

For general instructions on how to embed a Timely calendar of events on your site, you can either watch this short video tutorial, or review the step by step description below. Your choice!

1. Embed Code

Click on the Embed Code shortcut on the top right of your dashboard in order to get access to your calendar’s embed section. From the Type dropdown menu, make sure you select the Calendar option.

print screen of embed code settings to embed your calendar

2. Advanced Settings

Under Advanced Settings, modify any necessary changes, including the Date Range and Default View of your calendar.

print screen of advanced settings to embed your calendar

3. Using Filters

If you wish, under the Filters tab, you can filter down the calendar view by displaying only some certain events, instead of displaying the entire calendar.

print screen of filters settings to embed your calendar into your website

4. Embed the Calendar on your Website

Once all the necessary changes are done, copy the Widget code and paste it into your website page. See below detailed instructions for WordPress, SquareSpace, Weebly, Wix and Drupal websites.

For instructions on how to embed your calendar on all other content management systems (CMSs) or mobile applications, please contact support.

4.1. WordPress Websites

For WordPress users, please follow the detailed instructions below:

1. Log in to your WordPress dashboard.

2. Click Pages, from the navigation menu.

3. Choose the page you want to edit, and you’ll be directed to the WordPress visual editor.

4. Click on the block inserter tool next to the content area where you want to place the calendar, and select Custom HTML block:

5. After adding the Custom HTML block, paste the previously copied Timely embed code into the Write HTML... field:

6. Update the changes and the calendar will appear on your WordPress page.

4.2. SquareSpace Websites

For SquareSpace users, please follow the detailed instructions below:

Squarespace All plans:

1. Log in to your Squarespace account.

2. In the Home menu, click Pages.

3. Select the page you want to edit and click Edit in the top-left corner.

4. Hover over the section where you want to add the block, click an insert point and select Embed from the menu.

print screen of SquareSpace insert points

5. Enter the URL of the item you're embedding. In other words, your Timely's standalone calendar link. Example: https://events.timely.fun/xxxxxxx/posterboard

print screen of SquareSpace embed options

6. Save the changes and the calendar will appear. If you still don't see the calendar, try logging out of Squarespace.

Squarespace Business and Commerce plans

1. Log in to your Squarespace account.

2. In the Home menu, click Pages.

3. Select the page you want to edit and click Edit in the top-left corner.

4. Hover over the section where you want to add the block, click an insert point and select Code from the menu.

5. Add your Timely embed code in the text field.

6. Save the changes and the calendar will appear. If you still don't see the calendar, try logging out of Squarespace.

4.3. Weebly Websites

For Weebly users, please follow the detailed instructions below:

1. You need to use the Weebly Embed code element to embed the Timely code. First, drag the element to your page where you want to show the calendar:

2. Click the element and the Edit Custom HTML option:

3. And paste the Timely embed code you created:

4.4. Wix Websites

For Wix users, please follow the detailed instructions below:

1. Log in to your Wix account.

2. Inside Wix Website Editor, select the page you want to embed Timely calendar and add a custom element as shown in the image below:

3. Select "Choose Source" and set the "Server URL" option with the value: https://events.timely.fun/embed-wix.js

4. Select "Set Attributes" and set at least the attribute "data-src" with the Timely calendar url. To the calendar be responsive in smaller screens set the data-width with the value "var(--customElementWidth)"

5. Save your changes and the calendar will appear.

4.5. Drupal Websites

For Drupal users, please follow the detailed instructions below:

1. Log in to your Drupal dashboard.

2. In the top menu, click Content.

3. Click on the page where you want to embed the calendar.

4. When you open the Edit Basic page, click the Source option, and select the Full HTML text format after which you can paste the previously created and copied Timely embed code.

5. Save the changes and the calendar will appear on your Drupal page.

5. Advanced Calendar Embedding Options

For advanced calendar embedding options, check our posts on how to customize server side embedding or add a custom domain.

For more user guidance, please go to our Help Center. If you have any questions or need additional assistance, do not hesitate to contact us. Alternatively, you can open a support ticket from your Timely account’s dashboard.