Embed Teamup Calendar in a Webpage

It is easy to embed a Teamup Calendar in an existing website or intranet.  With an embedded calendar, you can make your shared Teamup Calendar available under your existing personal or business website name. 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.

Note: If you wish to embed a Teamup Calendar on a WordPress website, you can use our plugin: see here for more information. 

How to embed a Teamup calendar

To embed a Teamup Calendar into your website, you’ll be using the iframe tag.  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.

Step 1.  Copy the calendar link

From your calendar, go to Settings > Sharing. Note: you need to have a calendar administrator link to access the Settings. Create a read-only link. Customize it, if you would like, to share only selected sub-calendars.

Alternately, you can use an existing 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.

Copy the link you want to use for embedding the calendar.

Step 2.  Insert the iframe code to your website

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 iframe code, which should look like the following:

 

<iframe src="https://teamup.com/ks09175eafc7c69bf8" frameborder="0" width="100%" height="700"></iframe>

 

The result should look like this:

 

In the iframe code you pasted in, you now need to change the Teamup link to your calendar’s read-only link which you created. Look for iframe src= and replace the calendar link that follows the = with your own calendar link, from Step 1.

Please ensure that the web link has the proper permissions assigned. Please make sure not to use your calendar’s administrator link for the src value. Doing so would allow all visitors to make changes to events and to access your calendar’s settings.

Step 3. Customize the appearance of the embedded calendar

You can make some changes to the way your embedded calendar appears by using link parameters and adjusting the values in the iframe code.

  • Default view: If your calendar’s default view is not displaying many events, or you would like to show the full titles in your embedded calendar, you can append a link parameter ?view=l to the calendar link you embed.  Additional link parameters are available if needed.  For more details, see Calendar Link Parameters.
  • Hide logo and calendar title: When the calendar is embedded into a web page, it is often desirable to hide logo and title of the calendar because the target page already has a logo and title. This can be achieve with request parameters.
  • Simplified calendar view: To show a simplified calendar, you can add ?showHeader=0 to hide the header of the calendar.
  • You can adjust the size of your embedded calendar using the iframe code:
    • width: Width of the calendar. Usually this is set to the maximum width of the content region of your web site.
    • height: Height of the calendar. 700 is a good value to start with and experiment to find your optimal height.

Examples of embedded calendars

Example 1

Example 2

Below is a simple embed case, using this iframe code:

 

<iframe src="https://teamup.com/ks09175eafc7c69bf8?view=mw4" frameborder="0" width="100%" height="700"></iframe>

Example 3

And here is the same calendar, embedded and displaying in List view. The calendar logo and title have been hidden using request parameters showTitle and showLogo:

 

<iframe src="https://teamup.com/ks09175eafc7c69bf8?view=l&sidepanel=c&showTitle=0&showLogo=0" frameborder="0" width="100%" height="700"></iframe>

Example 4

If you need the embedded calendar to be auto-refreshed, insert a meta tag in the header of the web page as shown below:

<meta http-equiv="refresh" content="90">

 

This will refresh the calendar every 90 seconds.

Note that with a Premium subscription you can set calendars to auto-refresh using a calendar parameter, as explained here.

Example 5: Embedding a Calendar In Full-Page Mode

If you want to publish a calendar under your own URL and hide the Teamup URL the following approach is useful: Embed the calendar such that it fills the entire browser page. Calendar users don’t see that the calendar is embedded and it appears as hosted on your domain.

See a live example here: Zwift Rides

To see how this is done have a look at this code example.

Learn more:

Keywords: Embed calendar into a web site, display calendar on intranet, custom calendar link, auto refresh

 

Leave A Comment?