You can set up a Google Calendar once you register for a Google account. After creating your calendar, Google provides an embed code that allows you to display the calendar directly on your website.
To add the calendar to your site:
-
Go to your Google Calendar settings.
-
Select the calendar you want to embed.
-
Copy the provided Embed Code.
-
Paste this code into an Advanced – HTML Code section on the page or panel where you want the calendar to appear.
Google calendars support several display styles, including Monthly view, Agenda view, and others. It is important to choose the view that best fits the context of where the calendar will be displayed.
Recommended Display Settings
We recommend the following layout approaches for the best visual results across devices:
-
Monthly View:
Use a 4:3 aspect ratio.
This works well for full calendar pages where users want to see the entire month at a glance. -
Agenda View:
Use a 2:3 aspect ratio.
This is ideal for side panels, homepage sections, or narrow columns where upcoming events are more important than the full month layout.
In most cases:
-
Agenda view works best for smaller panels or homepage sections.
-
Monthly view works best for a dedicated calendar page.
Making the Calendar Responsive
When embedding the calendar inside an Advanced – HTML Code section, we recommend enabling the Responsive option for that section. This allows the calendar iframe to scale properly across desktops, tablets, and mobile devices, improving both usability and appearance.
Switching Between Monthly and Agenda View
You can switch between Monthly and Agenda views by editing the calendar’s embed HTML code.
Inside the <iframe> URL, look for the mode parameter:
-
Monthly View
mode=MONTH -
Agenda View
mode=AGENDA
To change the view, simply replace the value of the mode parameter in the embed URL and save your changes. No other configuration is required.
This makes it easy to reuse the same calendar in different locations on your site, displaying it in the format that best suits each page.
Additional Help
Google provides official documentation on embedding calendars, view options, and customization settings. The following article may be helpful:
https://support.google.com/calendar/answer/41207?hl=en
If you need help fine-tuning layout, responsiveness, or embedding calendars into specific page templates, feel free to ask.