Overview

With Calendar.online, you can easily embed your calendar into a website. This is done using a so-called iFrame or through special integrations for various website builders such as Jimdo, Wix, Squarespace, and WordPress.

What is an iFrame?

An iFrame is a window within a webpage that can display content from another source. Your calendar is automatically adjusted to fit the size of the iFrame, so no programming knowledge is required.

Create iFrame Code

  1. Open your calendar via the admin link.

  2. Click the gear icon in the top right corner to access the settings.

  3. Navigate to the Website tab.

  4. Select the desired calendar link (reader or editor link) that you want to embed.

  5. Click the Generate Code button.

  6. Copy the displayed iFrame code. Example of an iFrame code:

<iframe frameborder="0" height="500px" width="100%" src="https://calendar.online/12073b2a94a3ac83cbf7?iframe=true"></iframe>

Customize iFrame Code

  • Height: The default is 500px, but can be adjusted to any value (e.g., 700px).

  • Width: The default is 100%. The width can be set to a fixed value or as a percentage (e.g., 75%).

  • Frameborder: Should remain set to 0 to ensure unrestricted functionality.

  • Source (src): Determines which content is displayed in the window. You can replace the link with a different calendar link. iframe=true at the end of the link should remain unchanged.

Integration into Jimdo

  1. Switch to the edit view of your Jimdo website. To do this, you must use the Website Builder with the coding function.

  2. Between two content blocks, click + Add Content.

  3. Select More Content and Add-ons.

  4. Click on Widget/HTML.

  5. Copy the iFrame code into the text field.

  6. Click on Save.

Integration into Wix

  1. In the editing interface of your Wix website, hover between two theme blocks until a + appears.

  2. Select **Add Strip > Embed HTML.

  3. Paste the iFrame code.

  4. Click on Apply.

Integration into Squarespace

  1. In the editor of your website, hover your mouse between two content blocks until a + appears.

  2. Click on the + and select the menu item Code.

  3. Paste the iFrame code into the new window.

  4. Save the changes.

Integration into WordPress

  1. In your WordPress dashboard, go to Plugins > Install.

  2. Enter digital calendar as the search term in the top right corner.

  3. Install the Calendar.online / Calendar.online plugin.

  4. Activate the plugin.

  5. In your dashboard, go to the Calendar menu item.

  6. Copy the generated shortcode.

  7. In your website’s editor, click the plus sign to add a new block. Select Shortcode.

  8. Paste the generated shortcode into your page.

If iFrames are not supported, you can embed the calendar as a text link or button:

Text link

<a href="https://calendar.online/12073b2a94a3ac83cbf7" target="_blank">Online Calendar</a>

Button

<a href="https://calendar.online/12073b2a94a3ac83cbf7" target="_blank"><button class="btn">Online Calendar</button></a>

Explanatory video