It is easy to embed a Teamup Calendar into any web site or Facebook page. 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.
How to embed a Teamup calendar
Our Embed Wizard makes it easy to embed a Teamup Calendar into your website. You’ll be using the iframe tag — but don’t worry, you don’t need to write any code. Our embedding tool will do all the work for you.
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. Have your calendar link ready
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 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.
Step 2. Use the Embed Wizard to generate the embed code
Go to teamup.com/embed to access the Embed Wizard.
Copy and paste the link from step 1 and click the green OK button. Now you can work with the many options to customize the embedded calendar. Once you are done, copy the embed code from the button in the top left.
Step 3. Insert the iframe code into 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. The result should look like this:
Examples of embedded calendars
- See a live example here.
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:
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.
- How to Share the Same Event Calendar in Multiple Places
- How to Embed Teamup Calendar in Blogger
- Using Teamup Plugin for WordPress Sites (Beta)
- Calendar Link Parameters
Keywords: Embed calendar into a web site, display calendar on intranet, custom calendar link, auto refresh