How to embed google calendar in wordpress

New Page

Embed Google Calendar on a page

A form of aggregation of a calendar on the middle site of Google Calendar.

Google Calendar is a free web-based calendar that can be used to keep track of important events in one place from cualquier dispositivo en cualquier lugar. Creas varios calendarios para diferentes usos in el mismo Google Calendar y para cada calendario puedes elegir:

  • keep private
  • share with friends via email
  • make it public so that others can subscribe or view them.

For example, you can create a personal calendar that you keep private, that others cannot see, and a school calendar that you share with parents, family, and students.

The Calendar widget in Appearance > Widgets is not for  a calendar of events ; creates a calendar in your sidebar with clickable links to your published posts for particular dates. The dates that appear in bold indicate the dates that you have published. It does not allow you to set up a calendar of events. Its only use is to display links to your posts by date.

Configure Google Calendar

This is how you set up a Google Calendar:

1. Create a Gmail account (if you have one).

2. Go to Google Calendar and start the session with the Google account.

3. On the left, next to “Other calendars”, click + > Create new calendar .

Create new calendar

4. Add the calendar name, the description, select the time zone and click Create Calendar .

Add calendar information

5. Click the Configure link.

Haga click Configure

6. This takes you to the Calendar Settings page. Scroll down to Access permissions for events and select Make available to public . When you see “Warning: Making your calendar public will make all events visible worldwide, including via Google search. Are you sure?” you must click OK or other people won’t be able to see the calendar.

Poner a disposición del público

Click the arrow next to Settings at the top of the page to return to your calendar.

Haga clic en Configuración

 Si vous développez le menu Mon calendrier, vous verrez maintenant que votre nouveau calendrier a été créé.

7. Cliquez sur +Créer pour ajouter un événement à votre calendrier.

Haga clic en Crear

8.  Add title, date and time, select your calendar from the Calendar drop down menu (in our example it is Important Class date), add a description and click Save.

Crea el evento

9.  Your event will now be added to your Calendar.  You repeat this process to add events to your Calendar.

You can add and delete events from your Google Calendar at any time by logging in and updating the event.

10.  You edit an event by clicking on the name of the event then click the Edit link update the information and click Save.

Editar un evento Embed in Page

Google Calendars can be embedded into a page or a text widget using their embed code.

Go to Settings and Sharing in the Google Calendar you want to add (hover over the calendar you want to embed and click on the Options and select Settings and Sharing).

Seleccione Configuración y compartir

Scroll down to the Embed code and copy the embed code.

Click on Customize if you want to change the size of the Calendar or customise the look.

Haga clic en Personalizar

How you add embed code depends on if you are using the block editor or the classic editor.

Block Editor

Add a custom HTML block if you are using the block editor.

To add custom HTML block you click on the + icon at the right of any empty block or at the top left of the editor then search for HTML and click on the custom HTML block icon.

Agregar bloque HTML personalizado

Here’s what it looks like when it’s added to the Block Editor.

Bloque HTML

Paste the embed code into the custom HTML block.

Pegar el código de inserción

Click on Preview to view the calendar.

Vista previa del calendario

Classic Editor

Your Add Media button on your classic editor is used to add embed code to a post or page.

Place your cursor in the page where you want the calendar to be embedded and click on Add Media button.

Click on Add Media

Click on Insert Embed Code.

Click on Embed code

Paste the embed code into the Insert Embed code box and click Insert into post.   

Paste embed code

When you view the page on your site you will now see your Calendar embedded.

If your readers see the message you don’t have permission to view this calendar it means you didn’t make your calendar public and you need to change your Calendar Settings to Public.

Google Calendar

Google Calendar is a free calendar application from Google that makes it easy to keep track of life’s important events all in one place.

Table of Contents

  1. Google Calendar Block
    1. Add the Google Calendar Block
    2. Enable Permissions and Generate the Embed Code
    3. Example of an Embedded Calendar
  2. Embed a Google Calendar with HTML
  3. Embed a Google Calendar into your Sidebar
  4. Sync iCal with Google Calendar
  5. Additional Info

Google Calendar Block

You can use the Google Calendar Block to add your calendar directly into a post or a page.

Agregue el bloque de calendario de Google

In order to add the Google Calendar Block, click on the Add Block button.

markup-2020-09-10-at-11

Alternatively, you can type /google-calendar in a new block and press enter.

markup-2020-09-10-at-11

For more, visit our detailed instructions on adding blocks.

Once you add the block, it will ask you to enable permissions for the calendar and to copy the calendar embed code:

markup-2020-09-10-at-11

Enable Permissions and Generate the Embed Code

You can embed a Google Calendar into your WordPress.com site by using the Google Calendar embed code. To generate your embed code, please follow these steps:

In Google Calendar

  1. Click the three dots next to your calendar name and select the Settings and Sharing link. Google Calendar - Settings and Sharing
  2. Go to the Access Permissions section and make your calendar public by checking the checkbox called Make available to public. Google Calendar - Make Public
  3. Go to the Integrate Calendar section and copy the Embed code to paste into the block. The embed code contains your Google account name, so be sure you’re okay with making that name public. google-calendar-integrate-calendar-1
Example of an Embedded Calendar

↑ Índice ↑

Embed a Google Calendar with HTML

Here a the steps to embed a Google Calendar with HTML:

  1. Edit the Page or Post you want to add the Google Calendar to.
  2. Add a new HTML Block. Google Calendar - HTML Block
  3. Paste the Embed code you copied from your Google Calendar. Google Calendar - HTML Embed Code
  4. Publish, or Update your page or post.
  5. The next time you edit your page or post, you will notice the Embed code has been converted to shortcode.

Google Calendar - Converted to Shortcode Embed code converted to 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

  • When adding Google Calendars to your WordPress.com site, do NOT manually open the shortcode as you normally do with other services (i.e. do not start typing the shortcode and then paste the calendar code ). It won’t work.
  • To customize your calendar, click the Customize link under Integrate calendar into your Google calendar (during step 3 above).

Google Calendar - CustomizePersonalize your Google Calendar

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-circle

    The best for freelancers

  • Business

    plan-business-circle

    The best for small businesses

choose a plan

Still confused?

Contactez le support.

Aidez nous à améliorer:

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

E-Mail

Website

Δ

How to Add a Google Calendar in WordPress (Step by Step)

Last updated on October 6th, 2021 by Editorial Staff | Reader DisclosureDisclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

Shares 689 Share Tweet Share Facebook Messenger WhatsApp Email

Do you want to add a Google Calendar in your WordPress site?

Google Calendar is a useful app to use for your website, since it makes it easy to share your in-person and virtual events for all your visitors to see.

In this article, we will show you how to add a Google Calendar in WordPress, step by step.

How to add Google Calendar in WordPress (step by step) How to add Google Calendar in WordPress (step by step)

Why Add Google Calendar to WordPress

Google Calendar is one of the most widely used free Google Tools. By adding Google Calendar to WordPress, you can easily display upcoming events to your visitors.

This lets you show upcoming webinars, virtual retreats, online sermons, coaching calls, and more.

Plus, when you make changes to your Google Calendar, your website calendar will update automatically with no added work on your end.

That being said, let’s show you how to add a Google Calendar to your WordPress site.

Adding Google Calendar in WordPress Using a Plugin

First thing you need to do is install and activate the Simple Calendar – Google Calendar Plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to go to Calendars » Settings to setup the plugin.

Then, click the ‘Google Developers Console’ link.

Click Google Developer Console link Click Google Developer Console link

This will bring you to the Google Cloud Platform, where you can connect the plugin to your Google Calendar. This requires giving the plugin access to your calendar data with a Google API key.

To do this, click the ‘Create Project’ button.

Google Cloud click create project Google Cloud click create project

This brings you to a screen where you need to provide a name for your project and choose the ‘Organization’ and ‘Location’.

The name can be anything you want, but we recommend using something that helps you identify the project. For the other two fields, you can simply enter the URL for your website.

Then, click the ‘Create’ button.

Name and create new API project Name and create new API project

After that, you’ll be redirected to your project dashboard.

Here, you need to click the ‘Enable APIs and Services’ option.

Enable APIs and services Enable APIs and services

This brings you to a page that shows all of Google’s APIs.

You need to select the ‘Google Calendar API’ in the ‘Google Workspace’ section to continue.

Select Google Calendar API Select Google Calendar API

Next, click the ‘Enable’ button.

This activates the API so that you can generate an API code.

Enable Google Calendar API Enable Google Calendar API

On the next screen, click the ‘Create Credentials’ button.

Then, select ‘API key’ from the drop down list.

Create credentials for the API key Create credentials for the API key

This will bring up a popup that contains your API key.

You need to copy this and paste it into your favorite text editor.

Copy API key Copy API key

After that, head back to the plugin settings screen in your WordPress dashboard and enter your API key.

Then, click the ‘Save Changes’ button.

Enter the API key and save Enter the API key and save

Now you have successfully connected your WordPress website with Google Calendar, and are ready to add your calendar to your website.

Making Your Google Calendar Public

If you want to share a Google Calendar, then first you’ll need to change the calendar settings to make it public.

To do that, first you need to open up the Google Calendar you want to add to your WordPress site.

Then, click the ‘Gear’ icon and select ‘Settings’ from the drop down list.

Configuring Google Calendar Google Calendar settings

After that, click on the name of the calendar you want to share in the ‘Settings for my calendars’ section.

This will open up the individual calendar settings on a new page.

Click on Google Calendario Click on Google Calendar

Next, check the ‘Make available to public’ box in the ‘Access permissions for events’ section.

Then, click ‘Okay’ in the popup box.

Check the box to make available to the public Check the box make available for public box

Once you’ve done that, scroll down to the ‘Integrate calendar’ section.

Here you’ll need to copy the ‘Calendar ID’ and paste it into your preferred text editor, so you can have it handy for a later step.

Copy Calendar ID Copy Calendar ID

Adding Your Google Calendar to WordPress

Next, you need to use the Simple Calendar plugin to create a new calendar that you will embed into your site.

From your WordPress dashboard, simply go to Calendars » Add New to bring up the calendar editor.

Add new calendar Add a new calendar

First, enter a title for your calendar. You will notice that the plugin has already added some shortcodes and text in the text area. You can leave that as it is and scroll down to the ‘Calendar Settings’ box below the text editor.

Luego, haga clic en la pestaña ‘Calendario de Google’ y pegue la ID del calendario que copió en su editor de texto anteriormente.

Aggregate ID from Google Calendar Add a Google Calendar ID

También puede hacer clic en otras pestañas en el cuadro de configuración del calendario para personalizar cómo se mostrará el calendario en su sitio de WordPress.

Cuando haya terminado, simplemente haga clic en el botón ‘Publicar’ para guardar su calendario.

Muestre Google Calendar en su sitio de WordPress

El calendario que acaba de crear aún no está visible en su blog de WordPress . Todavía necesita agregar el calendario a una publicación o página de WordPress.

Para agregar su calendario a una página, simplemente vaya a Páginas » Agregar nuevo y asigne un nombre a su página.

Then click on the “Más” icon to open the blocking menu and select the “Código corto” option.

Create a new Google Calendar page Create a new Google Calendar page

After that, you need to enter the shortcode for your new calendar.

You can find this by going to Calendars » All Calendars and looking for the associated shortcode.

Find the calendar shortcode Find calendar shortcode

Once you’re done making changes to your calendar page, simply click the ‘Publish’ button.

You can add this shortcode to any area of ​​your website, including widgets, to simply display your new calendar.

They are new calendars are live maintenance on the WordPress site. It will update automatically as you add new events.

When your users hover over an event, the event details will be displayed.

Example of Google Calendar events Example of Google Calendar events

If you want to allow users to book appointments through Google Calendar, check out our guide on how to add Google Calendar events from your WordPress contact form.

Hopefully this article was designed to learn how to use Google Calendar and WordPress. It is also possible to see the new comparison of the difference between a number of dominio and a alojamiento web and new selections of experts of the best software of nomina para su pequeña empresa.

If you’re invited to this article, subscribe to a new YouTube channel for WordPress video tutorials. Also puede encontrarnos on Twitter and Facebook .

Shares 689 Share Tweet Share Facebook Messenger WhatsApp Email

Google Google translator

Google Google Translate


Video How to embed google calendar in wordpress

Related Posts

How to add seo keywords in wordpress

Contents1 Cómo agregar palabras clave de SEO en WordPress (aumentar el CTR y las clasificaciones)1.1 Post Title1.2 Headline1.3 Header Tags1.4 Introduction and Conclusion1.5 Body Copy1.6 URL1.7 Meta…

How to embed google calendar into wordpress

Contents1 How to Add a Google Calendar in WordPress (Step by Step)2 Add a Google calendar to your website3 calendario de Google3.1 Versatile plans and pricing4 Video…

How to change the logo in wordpress

Contents1 How to Add a Custom Logo to Your Site Header2 Site Logo2.1 Planes y precios versátiles3 Add, remove or edit a custom logo4 Video How to…

How to add a popup on wordpress

Contents1 Easily create a WordPress emergent form (2 forms)1.1 ¿Por qué usar un formulario emergente de WordPress?1.2 Método #1: Crear un formulario emergente con OptinMonster + WPForms1.3…

How to roll back wordpress version

Contents1 How to Revert WordPress: Undo WordPress Updates (Easy Way)2 How to Downgrade WordPress & Roll Back to a Previous Version2.1 1. A WordPress update included significant changes…

How to rollback wordpress version

Contents1 How to Downgrade WordPress and Revert to an Older Version1.1 1. A WordPress update included significant changes that are not compatible with your theme or plugins1.2…