• Finalized

    • Adding a Calendar to Cascade

    Owned by Sherral Trotter, created
    Last updated: May 24, 2023 by Baylee Banks
    3 min read

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

    Table of Contents

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

    Embed the Code in Cascade

    1. Navigate to the Cascade page you want to add 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:  

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

    3. Click Shared Calendars.

    4. In the section Publish a Calendar, choose the calendar, 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 you want to add 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:  

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

     Related articles