How to embed Google calendar in Notion
There's two main options when it comes to embedding Google calendar inside notion:
- The free (but ugly) way.
Google calendar has an embed option. You can use this to embed your Google calendar on different websites. There's a lot of limitations to this, but we'll get to that later.
Head to your Google calendar account. On the left hand side you will see the 'My calendars' section. It looks like this:
Choose the calendar that you would like to embed, right click it and click settings and sharing.
This next page contains a lot of information. However, scroll down until you get to the 'integrate calendar' section. It looks like this:
The section labelled 'Public URL to this calendar' is what we want. Copy this into your clipboard.
Now you've got the embed code, head back to Notion. Click anywhere on a page, click the + icon to add a block, scroll all the way down and find the embed option:
The embed block allows to add widgets from other websites, in this case the Google Calendar widget.
Once you click that, Notion will ask you for a embed link. Paste the Google Calendar public url into this, and then click Embed Link.
Once you click embed link you will see a Google calendar on your Notion page that looks something like this:
That's it, you have successfully added Google Calendar to your notion page.
Hmmm...as you may have noticed it works but it's a little ugly. There's also very little room for customisation.
A big limitation is the fact that you can't display events from two different calendars inside one widget. For example, you might have a company page in Notion where you want to display your personal events, but also your public company events. Using the Google calendar widget you would need to embed two completely separate widgets.
It's also something of a small travesty to be using software as beautiful as Notion and then adding the Google calendar embed to it.
2. Use Event Calendar App
Event Calendar App lets you create beautiful calendar embeds. This is how they look in notion:
You can choose a bunch of different colours, styles, add images, filters and all sorts of things.
Event Calendar App also lets you combine feeds from multiple calendars and display them in a single widget.
Let's have a deeper look at how we would embed Event Calendar App in Notion.
Head to Event Calendar App and create an account.
Once you've followed the onboarding you'll come to the dashboard page that looks like this:
We first need to plug our Google events into ECA.
Head back to your Google calendar, right click the calendar you want to add again and click settings and sharing:
This time, look for the option that says 'Public address in ical format'.
Copy this.
In ECA, select 'Calendar Sync' in the left hand menu:
You will then see the option to connect an ICS feed.
Click connect and add the details for the ics (google calls this an ical feed) feed that we got earlier.
You should now see your ICS feed in the dropdown above:
Good, that means ECA is now aware of your Google calendar.
Head back to the dashboard homepage and click new widget
This will take you into the widget editor.
On the left hand side you will see the 'Event Sources' tab, click this and select the ICS feed of your Google events that you added earlier. This will bring all your Google events into Event Calendar App.
The great thing about Event Calendar App is that it really gives you everything to make your events look great. Here's the end result after I added some images to my events:
To add the widget to notion, click on Embed Instructions on the left. It will take you to a tab that looks like this:
Slightly confusingly, we don't need the embed code for notion. What we need instead is what Event Calendar App calls the 'Direct URL. In this case my direct URL is notiondemo.eventcalendarapp.com.
All that you need to do now is head back to notion, select the embed block again and add your Event Calendar App 'Direct URL'.
That's it! You now have a beautiful Event Calendar inside notion.
