Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 10 Current »

This article explains how to embed a Google or Microsoft Calendar to your Cascade Site.

Table of Contents

\uD83D\uDCD8 Instructions

Adding Google Calendar

Get Your Calendar Embed Code

  1. Open Google Calendar and navigate to the calendar you want to embed.

  2. Click Settings and then click Settings for my Calendars on the left side.

  3. Select your calendar from the list.

  4. Scroll down to the Integrate calendar section and copy the iframe code under the Embed code label.

Embed the Code in Cascade

  1. Navigate to the Cascade page where you want to add the calendar.

  2. In the Source Code editor, place the Embed Code where you want the calendar to appear. It will look something like this:  

    <iframe src="https://calendar.google.com/calendar/embed?src=your_calendar_id"
style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

  3. Click the Submit button to save changes. Your Google Calendar should now be visible on your page.

  4. Publish this page to view the Calendar page on your live site.

Adding Microsoft Outlook Calendar:

Get Your Calendar Embed Code

  1. Log into your Outlook on the web.

  2. Go to your Calendar, select the calendar you want to embed and click Settings and View all Outlook settings.

  3. Click Shared Calendars.

  4. In the section Publish a Calendar, choose the calendar and set the permissions you desire and click Publish.

  5. Click Publish and copy the HTML code provided.

Prepare the iframe Code

  1. Take your published calendar URL and place it within an iframe HTML tag. Here's an example: 

    <iframe src="your_published_calendar_url" style="border: 0" width="800" height="600" 
frameborder="0" scrolling="no"></iframe>


  2. Replace your published calendar URL with the link you received in step 5 above.

Embed the Code in Cascade

  • Navigate to the Cascade page where you want to add the calendar.

  • In the Source Code editor, place the embed code where you want the calendar to appear. The code will look something like this:  

    <iframe src="https://outlook.live.com/owa/calendar/your_calendar_id" 
style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

  • Click the Submit button to save changes. Your Microsoft Outlook Calendar should now be visible on your page.

  • Publish this page to view the Calendar page on your live site.

Replace your_calendar_id with your actual calendar ID in the src attribute of the iframe.

Remember that the styling of the iframe (including the width and height) can be adjusted to suit your page's design. It's also essential to note that certain calendar settings may impact who can view your calendar, so always check those permissions.

  • No labels