Embed Teamup Calendar into a Webpage

It is easy to embed a Teamup Calendar into an existing website.  Some advantages of embedding a calendar into a website are:

  • Making a calendar available under a personal domain name that corresponds to existing web presence.
  • Assigning an easy to remember web address to a calendar.
  • Reaching a wider audience

How to embed a Teamup calendar

Follow the steps below to embed a Teamup Calendar into your website using the iframe tag.  Typically it is best to embed a read-only version of your calendar into your public website, unless you want your users to be able to add or modify events.

Step 1.  Copy the calendar link

Go to your calendar Settings > Sharing (you need to be a calendar administrator to access the Settings), create a read-only link, customize it if you would like to share only selected sub-calendars.  Alternatively use an existing link as most calendars have a Reader link pre-configured in your Settings which displays all sub-calendars with the read-only permission.  Copy the link you want to use for embedding.

Step 2.  Insert the iframe code to your website

Go to your web site where you want to embed your calendar.  Change to the html editor (most content management system allows you to do so, e.g. on a WordPress site, it is “Text” instead of “Visual”).  Then 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:

What you need to do now:

  • src – Replace this with your calendar web address you copied in Step 1. Please ensure that the web link has the proper permissions assigned. If your calendar 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 read article Calendar Link Parameters.
    Please make sure not to use your calendar’s administrator link for the src value.  Otherwise it would allow all visitors to make changes to events and settings in your calendar. This is risky and not recommended.
  • width – Width of the calendar. Usually this is set to the maximum width of the content region of your web site.
  • height – Height of calendar.  700 is a good value to start with and experiment to find your optimal height.
  • Hiding 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.

Example 1

See a live example here.

Example 2

A simple embed case using this HTML code:

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

Example 3

The same calendar embedded and displaying List view. 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.

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

Leave A Comment?