Versions Compared

Old Version 10

changes.mady.by.user Sherral Trotter

Saved on

compared with

New Version Current

changes.mady.by.user Baylee Banks

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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 Source Code editor, place the Embed Code where you want the calendar to appear. It will look something like this:  

    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>

  3. Click 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 page 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 and , click Settings and View all Outlook settings.

  3. Click Shared Calendars.

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

  5. Click Publish and copy the HTML code provided.

...

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

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

    Code Block
    languagehtml
    <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 your changes. Your Microsoft Outlook Calendar should now be visible on your page.

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

Info

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 is essential to note that certain calendar settings may impact who can view your calendar, so . Be sure to always check those the permissions.

...