1. Create your Google Calendar in Google here:
https://calendar.google.com/calendar/r.
2. In the Google Settings make sure you set the calendar to 'Public'.
3. In the Google 'Integrate calendar' section copy the Embed Code which will look something like:
<iframe src="https://calendar.google.com/calendar/embed?src=ita8msqa4s5bocguqp68ciu4g0%40group.calendar.google.com&ctz=Asia%2FBangkok" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
4. In the Mobirise Program insert an <HTML> block on the page you want the calendar where you want it on the page.
5. Paste the embed code you just copied from the Google settings and make some edits like:
<iframe src="https://calendar.google.com/calendar/embed?src=xxxxxxxqa4s5bocguqxxxxxxu4g0%40group.calendar.google.com&ctz=Asia%2FBangkok&hl=en" style="border: 0;padding:10px;" width="100%" height="600" frameborder="0" scrolling="no"></iframe>The three items in Bold above may need changing. The width if set to
100% instead of the default
800px will force the calendar to fit the screen width and will then also display in mobile devices. The
;padding:10px; will add a small space on all edges so it is not tight to the edge of the page.
If you want to force the calendar to display in a specific language instead of it detecting the users browser language then add the
&hl=en to the end of the URL as shown above. Use the language code applicable for you, e.g.
es for Spanish,
de for German etc.
Job Done!
Publish or Preview the page and admire your work!
