1. Home
  2. Integration
  3. Embed Teamup Calendar in a Webpage

Embed Teamup Calendar in a Webpage

ℹ️ Embed a Teamup Calendar with iFrame code or link, customizing with Embed Wizard, using link parameters.

See this article to learn about embedding a Teamup calendar on a Facebook page. If you need to embed multiple calendars or need to do so often in a WordPress site, try this WordPress plugin.

Advantages of an embedded calendar

With an embedded calendar, you can make your shared Teamup Calendar available under your existing personal or business brand. Doing so can be an advantage for several reasons:

  • The embedded calendar can correspond to an existing web presence.
  • You can assign an easy-to-remember web address to an embedded calendar.
  • You can reach a wider audience.
  • You can keep your personal or business branding consistent.

See this gallery of live embedded calendars for examples and ideas. 

How to embed a Teamup calendar

Here are the basic steps:

  1. Generate a secure (read-only) calendar link.
  2. Add link parameters to customize the look and feel, OR
  3. Use our Embed Wizard to generate customized iFrame code or a customized link.
  4. Insert the link or iFrame code into your website’s HTML editor.

See more details below.

Typically, it is best to embed a read-only version of your calendar onto your public website. This helps maintain the security of your calendar. Only use a modify or add-only version of your calendar if you want your users to be able to add or modify events to the embedded calendar.

  1. From your calendar, go to Settings > Sharing.

    Reminder: to access calendar settings, you must have administrator access and use a browser. Calendar settings are not the same as user account settings. 

  2. Click on Create Link.
  3. Scroll to the Calendars Shared section.
  4. Choose which sub-calendars to share and set the access permission:
    • Choose All calendars to include all sub-calendars in the embedded calendar, then assign the Read-Only permission, OR
    • Choose Selected calendars to share only certain sub-calendars, then assign the Read-Only permission to shared sub-calendars, and the Not shared permission to sub-calendars you do not wish to include. 

Alternately, you can use an existing calendar link. Most calendars have a Reader link (pre-configured in Settings) which displays all sub-calendars at a read-only permission. You can use the pre-configured link or another one which contains the sub-calendars at an appropriate permission level for public access.

You can use the secure link as-is, or use the Embed Wizard to generate iFrame code or a customized link. Or you can append link parameters to customize the link prior to embedding.

Link parameters are key=value pairs that are appended at the end of a calendar link. For example, you can add link parameters to set the initial calendar view, configure the start date, set the language, and hide the side panel. 

  1. Find the link parameters you need from this list
  2. Add the link parameters to the secure link.
    Here is an example with three link parameters: 
    Note that the initial link has a question mark “?” followed by the first link parameter “date=2023-09-09″ and there is an ampersand “&” between each link parameter.
  3. Copy and paste the secure link with appended parameters into your website’s HTML editor.

See here for more about calendar link parameters. 

Use the Embed Wizard

Our Embed Wizard makes it easy to embed a Teamup Calendar into your website. Don’t worry, you don’t need to write any code. Our embedding tool will do all the work for you. You can use the output as iFrame code or a URL. 

  1. Go to teamup.com/embed to access the Embed Wizard.
  2. Type or paste in the secure link and click the green OK button.
  3. Now you can work with the many options to customize the embedded calendar.
  4. Once you are done, copy the iFrame code or URL to insert into your website.

Customize with the Embed Wizard

The dialog window for the Teamup embed wizard

The Teamup Embed Wizard has two sets of options you can use to customize an embedded calendar. As you make changes, the calendar will show your changes in the preview window on the right. 

  • In calendar appearance options, on the left (Calendar icon), you can set the calendar size, customize the header, and control calendar elements like the sidepanel.
  • In the calendar settings options, on the right (Gear icon), you can set calendar view options, adjust the start date, and set the language and time zone.

A minimal look: embedded calendar example

It’s often helpful to disable elements that aren’t specifically needed on the embedded calendar. A minimal interface is easier for users to navigate. See many examples in our gallery of live embedded calendars.

Here is an example of an embedded calendar with several elements hidden (view selector, search, menu, and profile info) and the side panel closed:

An embedded calendar with multiple calendar elements hidden for a simpler view.

Copy the iFrame code or URL

Once you have the options set as needed, click into iFrame or URL, then click the blue Copy button:

Option to copy iFrame code or URL from Teamup embed wizard

Here’s an example of iFrame code (from the minimal look example, above):

<iframe src="https://teamup.com/ksjuaatozg752texmh?showSearch=0&showProfileAndInfo=0&showSidepanel=0&disableSidepanel=0&showViewSelector=0&showMenu=0&showAgendaHeader=1&showAgendaDetails=0&showYearViewHeader=1" style="width: 100%; height: 800px; border: 1px solid #cccccc" loading="lazy" frameborder="0"></iframe>

On your website, access the html editor in your website’s content management system. Most content management systems allow you to access the html editor when you are creating or editing a new post or page. If you are unsure how to do this, talk to your website administrator for help.

In the html editor, insert the URL or the iframe code. The result should look something like this:

See this calendar in a new window to compare the calendar with the embedded version.

Updated on May 27, 2024
WordPress Cookie Notice by Real Cookie Banner