Embedding your google calendar(s) into a Page on your site gives you an easy way to display your events without having to worry about setting up an import. You can embed a single calendar, multiple calendars or an upcoming events list. Setting up your calendar this way means when you add, edit or update an event in google, your website will automatically update in real time. No longer will you have to force an import or wait for the next scheduled import.
How to get calendar embed code
1) Sign into your google calendar.
2) Click the three dots next to any of the calendars you want to embed and select Settings and Sharing.
3) Scroll down to Integrate calendar. If you want to embed a single calendar, you can highlight and copy the embed code listed there. If you want to modify the single calendar code or embed multiple calendars, click on the customize button. This will open the Google Embeddable Calendar Helper.
4) On the left side of the screen, you can:
- Add a calendar title
- Check the box(es) next to what you want to show and select what default view to use
- Check the box(es) next to the calendars to display
5) When you are finished selecting your options, copy the HTML code at the top of page.
6) If you want to embed a list to display as upcoming events on your home page, change the default view to Agenda.
Now you want to embed the code into the Page on your site, whether it's the agenda list on your home page or the full calendar on a calendar page.
1) Create a new Page or navigate to an existing Page. Either Turn on Builder or Edit Page and scroll down to the Themify Custom Panel > Themify Builder tab.
2) Add a HTML / Text / Shortcode module and paste the code. Click Done and Save builder changes.
Or if you are already using a Widget module to display your calendar...
...change the Select Widget drop down to Custom HTML and paste the code.
3) Navigate to front end to view embedded agenda list or calendar.