Embedding a Calendar in your Website

Embedding a Calendar in your Website

 

Embedding a calendar in a website refers to the process of integrating one or more GroupCal calendars into a web page, allowing visitors to view and interact with the calendar directly on the website. The embedded calendar can display events from multiple GroupCal calendars, together in one unified calendar view, on your website.

Anyone who wants to showcase their calendar publicly on their website can benefit from embedding a GroupCal calendar. This includes influencers, brands, businesses, event organizers, and communities.

The embedded calendar keeps its connection to the GroupCal platform. Updates to the calendar, including updates to events made to that calendar by any of the members, are synced to the calendar embedded in the website.

Visitors to your website see a read only version of the calendar. They cannot make changes to its events.

This functionality is only available in the GroupCal Web app.

To embed a GroupCal calendar in a web page, follow these steps:

  1. Open the calendar details popup in GroupCal.
  2. Under the Members section, make sure that the calendar has a link. If that is not the case, add a new link to the calendar.
  3. Click on the button to embed the calendar on a website.
    GroupCal event details popup - embed a calendar in a website

  4. This will open a new screen that allows you to customize the calendar’s appearance and settings:
    1. Set the width and height of the calendar view. It’s recommended to use the % option to allow the calendar view to adjust dynamically to your website window size, including to mobile devices.
    2. Default view – choose which view mode to use.
    3. Calendar title – the title that is shown for the calendar.
    4. Included calendar – the embedded calendar can display events from multiple GroupCal calendars, together in one unified calendar view, on your website. Choose which calendars to include in the embedded calendar.
      Embed GroupCal calendars in your website
  5. Copy the generated code which is displayed on the screen.
  6. Paste the code into the HTML of your web page where you want the calendar to appear.