Embedding a Calendar in your Website

Embedding a calendar into a website allows you to integrate one or more GroupCal calendars directly into your site, giving visitors the ability to view and interact with events without leaving the page. There are two ways to embed a GroupCal calendar:

1. For Any Website (via iframe):
   Embed the calendar using an HTML iframe snippet, which requires basic knowledge of how to edit your website’s code. Simply paste the iframe into your site’s HTML, and the calendar will appear seamlessly.
2. For WordPress (via Plugin):
   Easily add the calendar to any WordPress page or post using the dedicated GroupCal plugin—no coding required.

Anyone who wants to showcase their calendars 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.

How to Embed a GroupCal Calendar (Website & WordPress Instructions)

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 the ‘Embed this calendar in a web page’ button.
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. Those settings will apply when embedding using an iframe. When embedding in a WordPress page, the plugin allows to determine the size of the calendar.
   2. Default view – choose which view mode to use.
   3. Calendar title – the title that is shown for the calendar.
   4. Show the GroupCal header – choose whether to show a header that has a button that allows the user to click on a button to join the calendar in the app.
   5. Remove GroupCal branding – choose whether to remove the GroupCal logo from the calendar.
   6. 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.
   7. Choose the embedding method that fits your platform:
      1. Iframe – A universal embed option for any website.
      2. WordPress Shortcode – Insert the calendar into a WordPress post or page using a shortcode.
      3. WordPress Block Widget – Add the calendar as a widget inside WordPress pages.
   8. Copy the generated code which is displayed on the screen.

Embedding the GroupCal calendar in any website

Paste the code into the HTML of your web page where you want the calendar to appear.

Embedding the GroupCal calendar in a WordPress website

Search for the GroupCal plugin on your WordPress admin page and install it. Then you can add the calendar for which you generated the code in the previous steps to any page or post using ShortCode or the widget. For detailed instructions on using the GroupCal WordPress plugin, including shortcodes and block widgets, refer to our WordPress Plugin Guide.