Page Comparison

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

Table of Contents

...

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-hand 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.
   

   

...

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

   

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

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

   Image Modified

3. Save and publish the pageClick the Submit button to save your changes. Your Google Calendar should now be visible on your page.

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

   

Adding Microsoft Outlook Calendar:

Get Your Calendar Embed Code

1. Log into your Outlook account on the web.

2. Go to your Calendar, select the calendar you want to embed

...

1. , click Settings and View all Outlook settings.
   

   Image Modified

2. Click Shared Calendars.

3. In the section Publish a Calendar, choose the calendar

...

1. , set the permissions you desire and click Publish.
   

   Image Modified

2. 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:
   

   Code Block
   language html
   <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 25 above.
   

   

Embed the Code in Cascade

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

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

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

• Save and publish the pageClick the Submit button to save your changes. Your Microsoft Outlook Calendar should now be visible on your page.

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

\uD83D\uDCCB Related articles

...