Embedding google calendar in wordpress

New Page

google calendar

Google Calendar is a free calendar app from Google that makes it easy to keep track of important life events in a single play.

Table of contents

  1. Google calendar block
    1. Aggregate Google Calendar Blocking
    2. Enable permissions and generate the embed code
    3. Example of an inset calendar
  2. Embed Google Calendar with HTML
  3. Include a Google calendar on the sidebar
  4. Sync iCal with Google Calendar
  5. Additional Information

Google calendar block

Use Google Calendar Block to aggregate your calendar directly to a post or page.

Aggregate Google Calendar Blocking

To aggregate the Google calendario block , click on the Aggregate block button .

markup-2020-09-10-au-11

Alternativement, puede escribir /google-calendarun nuevo bloque y presionar enter.

markup-2020-09-10-au-11

Pour en savoir plus, consultez nos instructions détaillées sur l’ajout de blocs.

Une fois que vous avez ajouté le bloc, il vous demandera d’ activer les autorisations pour le calendrier et de copier le code d’intégration du calendrier :

markup-2020-09-10-au-11

Activer les autorisations et générer le code d’intégration

Vous pouvez intégrer un calendrier Google dans votre site WordPress.com en utilisant le code d’intégration Google Calendar. Pour générer votre code d’intégration, veuillez suivre ces étapes :

Dans Google Agenda

  1. Cliquez sur les trois points à côté du nom de votre calendrier et sélectionnez le  lien Paramètres et partage .Google Calendario: configuration and use compared
  2. Accédez à la  section Autorisations d’accès  et rendez votre calendrier public en cochant la case intitulée  Rendre accessible au public .Google Calendar - Make Public
  3. Accédez à la section Intégrer le calendrier et copiez le code d’intégration à coller dans le bloc. Le code d’intégration contient le nom de votre compte Google, alors assurez-vous que vous êtes d’accord pour rendre ce nom public.google-calendar-integrate-calendar-1
Exemple de calendrier intégré

↑ Indice ↑

Intégrer un agenda Google avec HTML

Voici les étapes pour intégrer un agenda Google avec HTML :

  1. Modifiez la page ou la publication à laquelle vous souhaitez ajouter le calendrier Google.
  2. Ajoutez un nouveau bloc HTML .Google Calendar - HTML Pad
  3. Collez le code d’intégration que vous avez copié depuis votre agenda Google.Calendario de Google : code d'insertion HTML
  4. Publiez ou mettez à jour votre page ou votre publication.
  5. La prochaine fois que vous modifierez votre page ou publierez, vous remarquerez que le code d’intégration a été converti en code court.

Google Calendario: converted to shortcodeCode d’intégration converti en Shortcode

If you are using the Classic Editor, you can switch to the HTML tab in the editor to paste the Embed code.

↑ Índice ↑

Embed a Google Calendar into your Sidebar

  1. Follow steps 1-5 above and copy the shortcode from step 5.
  2. Go to Customize → Widgets and select the widget area you want your calendar to appear on.
  3. Add a Custom HTML widget to your sidebar.
  4. Add a title to your widget (if you want one).
  5. Paste the shortcode into the Custom HTML widget.
  6. Click the Publish button and go to your site and admire your awesome new calendar.

↑ Índice ↑

Sync iCal with Google Calendar

Although we don’t currently offer a way to embed iCal, you may sync iCal with your Google Calendar account and have your events show up in the embedded Google Calendar.

↑ Índice ↑

Información adicional

  • Lorsque vous ajoutez Google Calendars à votre site WordPress.com, n’ouvrez PAS manuellement le shortcode comme vous le faites normalement avec d’autres services (c’est-à-dire ne commencez pas à taper le shortcode puis collez le code du calendrier). Cela ne fonctionnera pas.
  • Pour personnaliser votre calendrier, cliquez sur le lien Personnaliser sous Intégrer le calendrier dans votre calendrier Google (lors de l’étape 3 ci-dessus).

Google Calendario - PersonalizationPersonnalisez votre agenda Google

You will be able to control the color, buttons, width, height, and more:

calendar-customizeCustomize a Google Calendar

Versatile planes and prices

  • libre

    plan-free-circle

    the best for the students

  • Personnel

    plan-personal-circle

    The best for fans

  • Top quality

    plan-premium-cercle

    The best for freelancers

  • Business

    plan-business-circle

    The best for small businesses

choose a plan

Am I still confused?

Contact support.

Help us improve:

We’re always looking to improve our documentation. If this page didn’t answer your question or left you wanting more, let us know! We love hearing your feedback. For support, please use the forums or contact support form. Thanks!

Name

Email

Website

D

Aggregate Calendario from Google to WordPress

How to embed Google Calendar in WordPress – 3 Easy Methods

March 26, 2020

|In News

|By annabdnmt

Google Calendar is a very useful app that allows you to organize your schedule, manage and share events, and be more productive. That’s why so many people around the world use it and you should too. And what if you could integrate it with your site? Wouldn’t that be amazing? In this guide, we’ll show you how to embed Google Calendar in WordPress step-by-step.

To give you an idea of how useful this tool can be, let’s take me as an example. Long before working with WordPress, I was a university student with a hectic life schedule. It was fun, but I failed to keep up with lots of things since I had so many deadlines to meet and so little memory to remember them all. Then, Google Calendar was launched, and it has saved me since then – not me but many others as well.

Nowadays, there are over 250,000 websites that are categorized as Google Calendar customers, and nearly 100,000 of them use Google Calendar. If you’re not familiar with Google Calendar you may be wondering what does it do to get so much recognition? Google Calendar helps you schedule meetings, create reminders, manage, and respond to meeting invitations, share and view calendars, and many other things.

However, as we are talking about Google Calendar for WordPress websites, there is more to it than you’ve ever known. In this guide, we will show you how to embed WordPress in Google Calendar and how you can make the most of this excellent tool.

Introduction to Google Calendar

Everyone is familiar with the tech giant Google. Among Google’s various applications, Calendar stands out as one of the most effective tools for everyday tasks and activities. In short, it helps organize users’ life, both by working alone and by cooperating with other Google apps like Gmail.

For businesses, Google Calendar is useful because it allows you to create events, send invitations to guests, create recurring events, manage who participates, and set optional attendees among other things. Additionally, there are many other functionalities of Google Calendar for G Suite premium users, such as setting up video conferences as well as adding and managing venues.

Why embed Google Calendar in WordPress?

Now that we understand why individuals, groups, and businesses use this tool, let’s move on to why you should add Google Calendar to your WordPress site:

  1. Let your customers know about future events: Using Google Calendar for your website gives you the ability to inform your customers about upcoming events so that they can make time to participate. This way, you can ensure that everyone is aware in advance and join the events.
  2. Manage personal appointments: If the above is for the sake of users, this purpose is solely for you. You can manage all of your activities by listing them here, adding notes, reminders, and everything needed to simplify your working hours. This is the primary purpose of Google Calendar for personal use, but now as it is integrated with your website, the advantages will be multifold.

Integrating Google Calendar with your WordPress site is an excellent way to keep your users informed about important upcoming events. Additionally, it’s an amazing tool to create events and recurring meetings, manage who participates, and arrange video calls among other things. There are indeed many other plugins that have similar functionalities. So then, why should you stick to Google Calendar? Even though Google hasn’t been the only brand that saw the importance of developing a schedule and management tool for WordPress businesses, Google Calendar has remained on top since the start because its features are undefeatable.

Additionally, it’s Google, so brand recognition is very powerful. Other plugins have different functionalities but the truth is that usually, they’re not very helpful. Also, although most of the plugins require you to pay for premium features, those functionalities are no match for Google Calendar. So, if you have to pay, you’re better off using your money to expand Google Calendar’s functions.

How to embed Google Calendar in WordPress? A Step-by-Step Guide

There are 3 different ways to add Google Calendar to WordPress:

  1. With a plugin
  2. Via the WP block editor
  3. Using HTML

All of these methods are very effective so you should choose the one that best suits your skills and needs. Now, let’s have a closer look at each option.

1) Embed Google Calendar in WordPress with a plugin

Now, let’s have a look at how you can make this integration happen in three easy steps. Several support plugins help you embed Google Calendar in your WordPress site. However, in this tutorial, we’ll be using the highest-recommended plugin: Simple Calendar. This tool helps you display Google Calendar in WordPress in a very easy way.

Besides showing events by week or month or under a list format, it also syncs with your Google Calendar, meaning you won’t have to add anything to WordPress. What is more, you can also customize its look and go further by making use of its many add-ons or connecting with other plugins.

Step 1: Add Simple Calendar to WordPress

The first step to add Google Calendar to WordPress is to install Simple Calendar on your site. To do this, simply:

  • In your WordPress dashboard, go to the Plugins section
  • Click Add New and then type Simple Calendar in the search box
  • There you’ll see the Simple Calendar – Google Calendar Plugin. Click Install Now and wait a few moments until it finishes

Add-Simple-Calendar

  • Go to the Installed Plugins section, and activate it

After you’ve done that, look at your sidebar and you should see a Calendars section with a little calendar icon. That means that you have successfully installed Simple Calendar!

Step 2: Connect Your Site with your Calendar

Once you’ve installed and activated Google Calendar, you need to connect it with your WordPress site. So to configure the plugin, click Calendars – Settings. There, you will see the tab Event Sources, and you will see that it asks for a Google API key. Here you can find how to get the API coming along, but if you don’t want to read the whole thing, here we will brief it for you.

  • Open Google Developers Console
  • On the top right of the screen, click Create Project. Then type the name you want, and click Create

Enter the project name

  • You will then be taken to the APIs and Services page. Here, click Enable APIs and Services to get through to the API Library
  • On the next screen, you will see a search box. Type Calendar API, choose the suggested result Google Calendar API and enable it

Type-Calendar

  • After that, go to the Credentials tab, click Create Credentials, and choose API Key as shown below

Choose-API-Key

  • Now you will see the API key generated for you. Click Restrict Key for safety measures
  • You will be taken to the API key detail page where you will see several options
    • In the Application restriction part, choose HTTP referrers (websites)

Application-Restrictions

    • In the Website restrictions section, select Add an item and enter your site URL. Once you’ve done that, click Done

Restrictions du site Web

    • In the API restrictions section, choose Restrict Key and Google Calendar API when selecting APIs, then click Save

Great! You have safely navigated through the hardest part. Now feel free to copy the API key, go back to the box inside the Calendars Settings WordPress dashboard where it asks for a Google API key, and paste the key. Click Save changes, and move on to the following step. You’re almost there.

Step 3: Display Google Calendar in WordPress

This is the final step where you’ll find out how to display Google Calendar and show it to the visitors of your WordPress website.

  • First, visit Google Calendar and click Settings. You will see a left sidebar, scroll it down to find Settings for my calendars, and opt for the calendar you want to display on WordPress.

Settings-for-my-calendar

  • After clicking on the calendars you want to show, you will see a dropdown where you will click the Access Permissions. Tick the Make available to the public option
  • Then, click Integrate calendar on the same dropdown. Here, copy the ID under the Public address in iCal format
  • Now, go back to the WordPress dashboard, and in the Calendars tab, choose Add New
  • Type the title you want for your Calendar and then scroll down until you see the Calendar settings. There, choose the tab Google Calendar and you will see this:enter-calendar-id
  • Paste the ID you copied in the third step above (Public address in iCal format) to the Calendar ID box
  • Click Publish

Congratulations! You have just embedded Google Calendar.

What if you don’t want to use any third-party tools? We’ve got you covered. Let’s have a look at other methods to add Google Calendar to WordPress without a plugin.

2) Add Google Calendar with the WordPress block editor

Another option to add Google Calendar to any post or page on your site is to use the Google Calendar Block. This method is very simple and effective and doesn’t require any coding.

    1. So, to include the Google Calendar Block on your website, go to a page or post where you want to add the Calendar and click Add Block
    2. Then, type Google Calendar and select the corresponding block
    3. After adding the block, you’ll need to enable permissions for the calendar you want to share and paste the calendar embed code in the corresponding field
    4. So, to get the embed code you need in step 3, go to Google Calendar, click on the 3 dots next to the calendar, and press Settings and sharingAdd Google Calendar to WordPress - Embedded Calendar
    5. After that, go to the Access Permissions section and make your calendar public by ticking the Make available to the public option. You’ll get a warning saying that this will make all your events visible. Click Ok make-calendar-public-1024x286
    6. Then, go to the Integrate Calendar section and copy the Embed code. This is the code you’ll use to add your calendar to your site. If you check the code, you’ll see that it has your email in it so make sure you’re ok with the calendar being public Add Google Calendar to WordPress - Insert Code
    7. Finally, go back to the post or page where you want to display your calendar and paste the embed code in the corresponding field. Then press Embed and save the changes
    8. That’s it! You’ve just embedded Google Calendar on your WordPress site!

You can also customize your calendar by clicking on the Customise button. You can personalize the colors, buttons, size, tabs, icons, and more. Add Google Calendar to WordPress - Customize Calendar

3) Embed Google Calendar in WordPress via HTML

Another easy way to embed Google Calendar in your WordPress site is via HTML. Don’t let the name discourage you if you’re not a developer. This method doesn’t require any coding skills and is very effective.

  1. So, to add Google Calendar to your site using HTML, first go to the page or post where you want to include your calendar
  2. Then, add a new Custom HTML Block. Here you’ll need to paste your calendar’s embed code
  3. To get it,  you need to repeat steps 4 to 6 of the previous block editor method. You’ll need to go to Google Calendar, click on the 3 dots next to your calendar, and then go to Settings and sharing. Then make your calendar public under Access permissions, go to the Integrate Calendar section, and copy the Embed code
  4. Once you got your calendar’s link, paste it in the HTML Block and save the changes
  5. You’ve just added your Google Calendar to WordPress!

NOTE: WordPress will automatically convert the embed code into a shortcode Finally, if instead of using Gutenberg you’re using the Classic Editor, simply paste the embed code in the HTML tab.

Now that you have learned how to display Calendar on your site, let’s have a look at how you can make the most of it.

Tips on Customizing Google Calendar on WordPress

Simple Calendar is the most complex method to add Google Calendar to WordPress so here we’ll give you some tips to make the most of it. What’s great about Simple Calendar is that it allows you to customize the styles of your calendars.

To make it happen, go to your Calendars and choose the All Calendars tab. Then, specify the calendar whose appearance you wish to tweak and open the editor. Scroll the mouse to find Calendar Settings and click the Appearance tab. There the fun begins and you can customize the colors, design, and so on. All in all, some things you can do to customize your calendars are:

  • Choose among a Light and Dark theme for your calendar
  • Decide which specific color you want to indicate your calendar’s active day as well as event-dates
  • Play with your calendar’s color scheme and find one that suits your website’s style

Shortcodes and Widgets to Embed Google Calendar on Posts and Pages

After you’ve integrated added Google Calendar to WordPress, when you create a new post or page, you’ll see an Add Calendar button as shown below.

Add-Calendar

This button works just like Add Media and lets you insert the calendar anywhere you want in the thread. If for some reason you don’t have this button, there are other ways you can add a calendar to your posts/pages: through shortcodes and widgets.

Shortcodes

If you look carefully when adding a new calendar on the Calendars tab, you will see that a shortcode is given to you at the bottom right of the screen. To embed this calendar to your posts/pages, simply type this shortcode anywhere you want to display it.

Aggregate Google Calendar to WordPress - Cortos Codes

Widgets

The Simple Calendar plugin provides you with a widget that you can display on your site. To activate this option, in your WordPress Dashboard go to Appearance > Widgets. Here you will see the available widgets and you have to drag and drop the Simple Calendar widget to the spot you would like it to be displayed.

Screenshot-2020-03-27-at-08

These are easy ways to display your calendar in different parts of your site to make the most of the WordPress and Google Calendar integration.

Tips to make the most of Google Calendar

Embedding Google Calendar in your WordPress site is the first step to better organizing your meetings and events. Most people use Calendar to simply create meetings but this tool can do much more for you. Let’s have a look at some tips to make the most of Google Calendar.

  1. Find a time: When you need to organize a meeting with several people, it can be hard to find a slot that works for everyone. The good news is that Google Calendar has a functionality called Find a time that makes finding the right time much easier. Simply create an event, invite the people that you want, and then go to the Find a time tab to find a slot where everyone is available. Embed-Google-Calendar-into-WordPress-1024x258
  2. Block Appointment slots: Tired of receiving invitations for meetings at inconvenient hours? If you’re using GSuite, you can avoid that by blocking appointment slots. This way, you block the time in which your teammates can schedule meetings with you. To activate this functionality, simply create an event for the time you’re available for meetings and then go to Appointment slots. You’ll see a link that says “This calendar’s appointment page.” Click it and you will be redirected to a web version of your calendar that you can share. Ajouter-Calendar-to-WordPress-Slots
  3. Add holidays and other events: Calendar allows you to add all types of events such as holidays, sports events, ad phases of the moon. To add this option, click on the 3 dots next to your calendar and go to Settings and sharing. Add Google Calendar to WordPress - Calendar Tips Then, in the Add Calendar section, go to Browse calendars of interest and select the ones you want to activate. Once you finish, you’ll find the events you selected in the Other calendars section. Integrate-Google-Calendar-with-the-WordPress-site-1024x772
  4. Time zones  : Today there are more and more teams working from different parts of the world and with different time zones. If that is your case, this advice is perfect for you. Google Calendar lets you set primary and secondary time zones so you’ll always find a good time for your meetings. For activating this option, click on 3 points on the calendar of your calendar and on the configuration and usage compared . Then hit the Set my primary time zone button in Calendar settings . There, check the option to activate the secondary time zone and select the one you want. How to embed Google Calendar in WordPress - Time ZonesAlso, you can add labels to your time zones and display a world clock.

Conclusion

All in all, Calendar will not only help you organize your schedule, but also manage and share events so that your customers can stay up to date with their important events and dates. Adding Google Calendar to WordPress will add more functionality to your website, provide value to users and stand out from your competitors. We have seen 3 different methods to embed Calendar on your site:

  1. With simple Calendario add-in
  2. Use WordPress Blocker Editor
  3. Through HTML

These methods are suitable for beginners and they are all very effective, so choose the one that best suits your needs. As a bonus, we have seen different ways to customize your calendar and add them using shortcodes and widgets. Anyway, we’ve seen some tips to help you get the most out of Google Calendar. Have you tried this guide? Did you find it useful? Please share your thoughts with us in the comments section below! More helpful guides to get the most out of your site:

  • How to publish automatically from WordPress to Facebook
  • Guide: How to integrate WooCommerce with MailChimp
  • How to Setup and Integrate WooCommerce with Stripe

Aggregate a calendar from Google to the website

You can add an interactive version of your calendar to your website and add buttons for your website visitors to save your calendar events.

Insert a calendar into your website

  1. On a computer, open Google Calendar. Only can get the code to embed on computer website, without Google Calendar app. 
  2. In the upper right corner, click Settings Adjusted sing there Settings .
  3. On the left side of the screen, click on the name of the calendar you want to embed.
  4. In the “Integrate calendar” section, copy the iframe code shown. 
  5. Below the embed code, click Customize.
  6. Choose your options, then copy the HTML code shown.

Your embedded calendar will only be visible to people you’ve shared it with. To allow all visitors to see your calendar, you’ll need to make it public.

Allow site visitors to save a calendar event

You can add a Google Calendar button on a website so visitors can quickly secure the event in their own Google Calendars. To allow anyone to save your calendar event, you’ll need to make it public.

  1. Dans un ordinateur, ouvrez Google Calendar . You can only make changes to your calendar visibility from a computer, not from the mobile app.
  2. In a public calendar, create or edit an event.
  3. Click  More Actions sing there Post Event
  4. In the “Publish Event” window, copy the HTML code that is displayed.
  5. Open your website editor, then paste this code where you want the event button to display.

Give your opinion on this article

Choose a section to give your opinion on

Google Google translator

Google Google Translate


Video Embedding google calendar in wordpress

Related Posts

Free chat room code for my website

Contents1 How to set up a free chat room on the website.2 3 comentarios2.1 Trackbacks/Pingbacks2.2 Submit a Comment Cancel reply3 How to Create a Chat Room Website…

Background image full screen css

Contents1 Cómo – Full Page Image1.1 Example1.2 Example2 CSS background image tamaño tutorial: how to codify a complete page background image3 Perfect Full Page Background Image3.1 Méthode CSS géniale,…

WordPress leverage browser caching

Contents1 Aproveche el almacenamiento in hidden del navegador1.1 Will it works for my website?1.2 Where are plugin options1.3 Some JavaScript files still display under Leverage Browser Caching1.4…

WordPress post to facebook page

Contents1 How to Automatically Post to Facebook from WordPress1.1 Download Now: How to Launch a WordPress Website [Free Guide + Checklist]1.2 1. Create an IFTTT account.1.3 2….

Download images from wordpress media library

Contents1 How to export your WordPress media library1.1 Download maintenant : How to launch a WordPress website [Free Guide + Checklist]1.2 How to export your WordPress media…

WordPress single post template

Contents1 How to Create Custom Unique Post Templates in WordPress2 Post Template Files2.1 author.php2.2 Fecha.php3 Handbook navigation4 How to Create Custom Single Post Templates in WordPress5 Video…