I am new to BSS and the forum. This is my first post, so bear with me. I would like embed my google calendar into a new site I am building. How can I find how to to this?
Don’t mind reading but no idea where to search. Perhaps a BSS user has already done this?
If not possible, maybe some alternative approachs?
TIA
You can embed it using an iframe, but one of the problems with Google’s calendar is that it’s not responsive. The better way is to use Bootstrap Studio’s Responsive Embed component, because then it will be at least somewhat responsive.
First you need the calendar’s public URL. Log into your Google account, click on the calendar icon in Google’s menu. From the Calendar page, click on the gear icon in the upper right (the settings menu) and choose Settings. From the left menu, scroll down to “Settings for my calendars” and select the calendar you want to embed.
Next click “Access permissions for events” and check the box next to “Make available to public” (you can’t embed a calendar unless you first make it public.) Next, click on “Integrate calendar.” Highlight and copy the calendar’s public URL (it starts with https://calendar.google.com/calendar/embed…)
You can also customize the calendar first by clicking on the Customize button. This will allow you to set a bunch if different options pertaining to what the calendar displays.
In Bootstrap Studio, drag a Responsive Embed component on to your page where you want the calendar to appear. Select it and then go to the options panel and paste the public URL code you copied into the Source URL field. Lastly, change the Aspect Radio to 4 by 3. You’re done.
You will not see the calendar in the Bootstrap Studio workspace. It will actually show an error that reads “Javascript is required to view this page…”, but when you preview the page in a browser, the calendar will be visible.
Because Google’s calendar is not responsive by default, even using the Responsive Embed component, it will be hard to read on a mobile device. There is a hacky sort of way around this by making a responsive iframe, and changing the calendar’s view settings for small screens, but I find it to be kind of cludgy. But it does work.
Google Calendar simply wasn’t designed for viewing on phones, and Google doesn’t care enough to recreate it as a mobile-friendly feature.
Perfect! Thank you so much!