Google Calendar – great help with organizing your time

Google Calendar is a web application for organizing your time.

In this tutorial, we’ll learn how to insert Google Calendar into a Webnode website.

1. The first step is to create an account with Google – here

2.  In the official Google Help, you can find more information about creating Google Calendar and getting your HTML code. Its simple:

3. Set Google Calendar as public.

You have to set Google Calendar as a public. So change it in “Access” tab!

4. Insert the HTML code of the calendar on the Webnode website.

You can use this code to place it somewhere on the site – where you want to view Google Calendar.

5. The embedded Google Calendar will appear on the WEBNODE site, but you still need to set up Google Calendar for mobile/tablets.

In the top bar of the editor now click on “Pages” » “Choose a page on which you have Google Calendar“» “SEO Site Settings” »” Header HTML Code” and enter the following code:

And you’re done. Google Calendar is embedded on the website and is responsive, so it means that calendar size adapts to mobile devices (mobile phones, tablets, etc.).

The calendar on the web looks like this:

Summary:

You enter 2 codes on the website. You edit the first code and paste it into the body of the page (<body>) using the Webnode HTML feature.

Insert the second code into the page header (<head>) into the SEO settings of the page where you have the embedded calendar.

Code to the body

Code to the header


 

TIP: Put online chat on the web for faster communication with visitors to your site. I recommend a service that is free – read more in tutorial for Smartsupp

TIP: Put reservation system on the web for online booking in Webnode. Read more in the tutorial: How to add an online reservation system to Webnode? It’s Free!

More awesome tutorials

How to rename “Add to cart” button in Webnode e-shop?

How to rename “Add to cart” button in Webnode e-shop?

Would you like to rename the "Add to cart" button in Webnode?In tutorial "How to rename" CART in the menu in the WEBNODE e-shop?" i showed u how to rename CART in the menu. Let's take a look at your other options. Webnode for e-shops is a great choice for your online...

How to set up your own font in Webnode using Google Fonts library?

How to set up your own font in Webnode using Google Fonts library?

VideotutorialWould you like to change the font in Webnode to one of the Google Fonts?   Few words at the beginningWebnode enables you to change the font on your website under section: “Settings” – “Design” – “Fonts”. Of course, Webnode editor offers the most used...

How to add social icons into footer in Webnode CMS?

How to add social icons into footer in Webnode CMS?

Would you like to add social icons like Facebook, Instagram, YouTube etc. to the FOOTER of your WEBNODE website?Social networks like Facebook or Instagram are popular topics on my website. I wrote these tutorials:   How do I easily link my Facebook to my website...

How to add a searchbox in Webnode website or e-shop?

How to add a searchbox in Webnode website or e-shop?

Would you like a searchbox (searchbar) on your e-shop/website from WEBNODE?Are you looking for a simple and stylish search box that you can put on your website or e-shop in Webnode?Video-tutorialVideotutorial is only in Slovak language.In tutorial How to add a custom...

How to rename “Cart” in the menu in WEBNODE e-shop?

How to rename “Cart” in the menu in WEBNODE e-shop?

Would you like to rename the cart in the e-shop in Webnode from "CART" to "My Cart"?   With my simple tutorial, you will definitely be able to do it. Just subscribe to my newsletter - William Promotions News - and get the pre-prepared code. In the code, you can...

Do you like this tutorial? Share it, please 🙂

Follow me