How to embed google calendar into wordpress

New Page

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

Last updated October 6, 2021 by Editorial Team | Reader Disclosure Disclosure : Our content is reader approved. This means that if you click on some of our links, we may earn a commission. Find out how WPBeginner is funded, why it matters, and how you can support us.

Share 689 Fresh Tweeter Fresh Facebook Messenger WhatsApp Email

Want to add a Google Calendar to your WordPress site?

Google Calendar is a useful app for your website because it makes it easy to share your in-person and virtual events for all 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 allows you to view upcoming webinars, virtual retreats, online sermons, counseling calls, and more.

Also, when you make changes to your Google calendar, your website calendar will automatically update without any additional work on your part.

That said, we’re going to show you how to add a Google calendar to your WordPress site.

Add Google Calendar in WordPress using a plugin

The first thing you need to do is install and activate 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 configure the plugin.

Then click on the “Google Developer Console” link.

Click on the Google Developer Console link Click on the Google Developer Console link

This will take you to 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 on the ‘Create a project’ button.

Click on Google Cloud to create a project Click on Google Cloud to create a project

This takes you to a screen where you need to provide a name for your project and choose “Organization” and “Location”.

Le nom peut être ce que vous voulez, mais nous vous recommandons d’utiliser quelque chose qui vous aidera à identifier le projet. Pour les deux autres champs, entrez simplement l’URL de votre site Web.

Cliquez ensuite sur le bouton ‘Créer’.

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

Después de eso, serás redirigido al tablero de tu proyecto.

Aquí, debe hacer clic en la opción ‘Habilitar API y servicios’.

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 the Google Calendar API Select the 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.

Google calendar settings 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 Calendar 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 a 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.

Then, click on the ‘Google Calendar’ tab and paste the Calendar ID you copied into your text editor earlier.

Add a Google Calendar ID Add a Google Calendar ID

You can also click on other tabs in the calendar settings box to customize how the calendar will display on your WordPress site.

When you’re done, simply click the ‘Publish’ button to save your calendar.

Display Google Calendar on Your WordPress Site

The calendar you just created isn’t visible on your WordPress blog yet. You still need to add the calendar to a WordPress post or page.

To add your calendar to a page, simply go to Pages » Add New, and give your page a name.

Then, click the ‘Plus’ icon to bring up the blocks menu and select the ‘Shortcode’ 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 finding the associated shortcode.

Find 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.

Your new calendar will now be live on your WordPress site. It will automatically update as you add new events.

When your users mouse over an event it will display the event details.

Example of Google Calendar events Example of Google Calendar events

If you want to let users book appointments through Google Calendar, then see our guide on how to add Google Calendar events from your WordPress contact form.

We hope this article helped you learn how to add Google Calendar in WordPress. You may also want to see our comparison of the difference between a domain name and web hosting and our expert picks of the best payroll software for your small business.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Comparte 689 Cuota Pío Cuota Facebook Messenger WhatsApp Correo electrónico

Add a Google calendar to your 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.

Embed a calendar on your website

  1. On a computer, open Google Calendar. You can only get the code to embed in your website from a computer, not the Google Calendar app. 
  2. In the top right, click Settings Settings and so Settings.
  3. On the left side of the screen, click the name of the calendar you want to embed.
  4. In the “Integrate calendar” section, copy the iframe code displayed. 
  5. Under the embed code, click Customize.
  6. Choose your options, then copy the HTML code displayed.

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.

Let site visitors save a calendar event

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

  1. On a computer, open Google Calendar. You can only make changes to your calendar visibility from a computer, not the mobile app.
  2. On a public calendar, create or edit an event.
  3. Click More actions and so Publish event
  4. En la ventana “Publicar evento”, copia el código HTML que se muestra.
  5. Abra el editor de su sitio web, luego pegue este código donde desea que se muestre el botón del evento.

Dar su opinión sobre este artículo

Elija una sección para dar su opinión sobre

calendario de Google

Google Calendar es una aplicación de calendario gratuita de Google que facilita el seguimiento de los eventos importantes de la vida en un solo lugar.

Tabla de contenido

  1. Bloque de calendario de Google
    1. Agregue el bloque de calendario de Google
    2. Habilitar permisos y generar el código de inserción
    3. Ejemplo de un calendario incrustado
  2. Incrustar un calendario de Google con HTML
  3. Incruste un calendario de Google en su barra lateral
  4. Sincroniza iCal con Google Calendar
  5. Información adicional

Bloque de calendario de Google

Puede usar Google Calendar Block para agregar su calendario directamente a una publicación o página.

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-au-11

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

markup-2020-09-10-au-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-au-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. Vaya a la  sección Permisos de acceso  y haga público su calendario marcando la casilla de verificación  Poner a disposición del público . Google Calendar - Make public
  3. Vaya a la sección Integrar calendario y copie el código de inserción para pegarlo en el bloque. El código de inserción contiene el nombre de su cuenta de Google, así que asegúrese de que está de acuerdo con hacer público ese nombre. google-calendar-integrate-calendar-1
Ejemplo de un calendario incrustado

↑ Índice ↑

Incrustar un calendario de Google con HTML

Estos son los pasos para incrustar un calendario de Google con HTML:

  1. Edite la página o publicación a la que desea agregar el calendario de Google.
  2. Agregue un nuevo bloque HTML . Google Calendar - HTML Block
  3. Pegue el código de inserción que copió de su Google Calendar. Google Calendar - HTML embed code
  4. Publicar o Actualizar su página o publicación.
  5. La próxima vez que edite su página o publicación, notará que el código de inserción se ha convertido en código abreviado.

Google calendar - converted to shortcode Código de inserción convertido a Shortcode

Si está utilizando el Editor clásico , puede cambiar a la pestaña HTML en el editor para pegar el código de inserción.

↑ Índice ↑

Incruste un calendario de Google en su barra lateral

  1. Siga los pasos 1-5 anteriores y copie el código abreviado del paso 5.
  2. Vaya a Personalizar → Widgets y seleccione el área de widgets en la que desea que aparezca su calendario.
  3. Agregue un widget HTML personalizado a su barra lateral.
  4. Agrega un título a tu widget (si quieres uno).
  5. Pegue el código abreviado en el widget HTML personalizado.
  6. Haga clic en el botón Publicar y vaya a su sitio y admire su nuevo y asombroso calendario.

↑ Índice ↑

Sincroniza iCal con Google Calendar

Aunque actualmente no ofrecemos una forma de integrar iCal, puede sincronizar iCal con su cuenta de Google Calendar y hacer que sus eventos aparezcan en el Google Calendar incorporado.

↑ Índice ↑

Información adicional

  • Al agregar Calendarios de Google a su sitio de WordPress.com, NO abra manualmente el código abreviado como lo hace normalmente con otros servicios (es decir, no comience a escribir el código abreviado y luego pegue el código del calendario). Esto no funcionará.
  • Para personalizar su calendario, haga clic en el enlace Personalizar debajo de Integrar calendario en su Calendario de Google (durante el paso 3 anterior).

Google Calendar - Customize Personaliza tu calendario de Google

You can control the color, buttons, width, height and more:

calendar-customizeCustomize a Google Calendar

Versatile plans and pricing

  • Free

    plan-free-circle

    the best for students

  • Personal

    circle-of-personal-plan

    The best for fans

  • Prime

    plan-premium-circle

    The best for freelancers

  • Company

    plan-business-circle

    Best for Small Business

choose a package

Am I still confused?

Contact support.

Help us improve:

We are always looking to improve our documentation. If this page didn’t answer your question or made you want to know more, let us know! We love to hear your comments. For help, use the forums or contact the support form. Thanks!

name

E-mail

Website

Δ


Video How to embed google calendar into 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 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…

How to edit footer in wordpress elementor

Contents1 How to Edit Page Headers and Tarts with Elementor in WordPress1.1 Elementor – Header, Footer and Blocks1.2 Instalar y activar el complemento1.3 Add Header or Footer…