¿Necesita un calendario en vivo de aspecto profesional en su sitio web para informar a los visitantes sobre los próximos eventos o para programar una cita? En lugar de crear algo desde cero o usar alguna aplicación de calendario personalizada^{(custom calendar app)} que podría no recibir actualizaciones futuras, ¿por qué no usar algo que millones de personas usan a diario?

Yendo por ese camino, puede incrustar un Calendario de Google^{(Google Calendar)} en su sitio. También es gratis y fácil de usar. Todo lo que necesita para empezar es una cuenta de Google^{(Google account)} .

Comience^(Get) iniciando sesión en su cuenta de Google^{(Google account)} , haga clic en la cuadrícula de aplicaciones junto a su foto de perfil y haga clic^{(picture and click)} en Calendario^(Calendar) .

Obtener el código de inserción^{(Get the Embed Code)}

Abra Opciones haciendo^{(Options by )} clic en los tres puntos adyacentes al calendario que desea incrustar.  

Haga clic en Configuración y compartir^{(Settings and sharing)} desde la ventana emergente.

Desplácese^(Scroll) hacia abajo en la página de configuración del calendario hasta que encuentre la sección ^(Calendar)Integrar calendario^{(Integrate calendar)} .

Para que su calendario sea visible para todos y no solo para aquellos con los que lo comparte, deberá hacerlo público^{( make it public)} .

Para hacer esto, active la casilla junto a Poner a disposición del público^{(Make available to public)} en Permisos de acceso^{(Access permissions)} .

Incruste el código en la sección HTML^{(HTML section)} de una página web o publicación^{(page or post)} . Por ejemplo, si está utilizando WordPress , cree una nueva página.

Haga clic en Texto^{(Text )} para cambiar al editor de HTML^{(HTML editor)} . Copie el código^{(Embed code)} de inserción de su calendario de Google y péguelo^{(Google calendar and paste)} en la página.

Haga clic en la pestaña Visual para ver cómo se ve el calendario en su página. También puede seleccionar Vista previa^(Preview) para verlo en la parte frontal de su sitio web.

Pegue el código HTML del calendario^{(Calendar HTML code)} en cualquier página web en la que tenga permitido incrustar objetos.

Si le gusta la configuración de formato predeterminada de Google para el calendario, está listo para comenzar. Para cambiar el color, el tamaño y otras opciones de su calendario, puede personalizar su configuración.

Personalizar la configuración del calendario de Google^{(Customize Google Calendar Settings)}

Haga clic en el botón Personalizar^(Customize) ubicado directamente debajo del código de inserción. Esto abrirá una nueva ventana.

Edite o agregue un título a su calendario escribiéndolo en Título del calendario^{(Calendar title)} . Si desea que se muestre el título, habilite la casilla junto a Título^(Title) .

Especifique^(Specify) qué elementos desea mostrar en su calendario al verificar las siguientes configuraciones en Mostrar^(Show) :

• Título
• Botones de navegacion
• Datos
• icono de impresión
• Pestañas
• Lista de calendario
• Zona horaria

El tamaño predeterminado^{(default size)} de Google Calendar es 800 por 600. Cambie el tamaño moviendo las flechas hacia arriba y hacia abajo junto a Ancho^(Width) y Alto^(Height) .

Por ejemplo, si desea incrustar un calendario en una barra lateral, reduzca el ancho^(Width) a un tamaño más pequeño, como 300.

Otras configuraciones que puede personalizar incluyen:

• Color de fondo^{(Background color)} para que coincida con el color de su marca^{(brand color)}
• Zona horaria e idioma
• Borde (activar o desactivar)
• Mes predeterminado
• Primer día de la semana

Después de personalizar las opciones, vea su calendario^{(live calendar)} en vivo final en su página web. Cuando cambie un evento en su calendario, se actualizará automáticamente.

A continuación^(Below) se muestra una captura de pantalla de la vista mensual.

También puede ver su calendario por semana.

Si desea realizar cambios, siempre puede volver a la configuración de Google Calendar y ajustarlos.

Asegúrese de copiar y pegar el nuevo código HTML^{(HTML code)} después de realizar cualquier actualización de formato para reflejar los nuevos cambios.

Cómo permitir que los visitantes guarden un evento del calendario^{(How to Let Visitors Save a Calendar Event)}

Para permitir que los visitantes guarden su evento en su propio Calendario de Google^{(Google Calendar)} , agregue un botón a su sitio web. Asegúrate^(Make) de que tu calendario sea público.

Abre tu Calendario de Google^{(Google Calendar)} . Tenga en cuenta que los cambios solo se pueden realizar desde una computadora y no desde una aplicación móvil.

Para agregar un evento, seleccione el día al que desea agregarlo y haga clic en Crear^(Create) en la esquina superior izquierda.

Complete^(Fill) los detalles de su evento en la ventana emergente y haga clic en ^{(popup and click)} Guardar^(Save) .

Para abrir un evento en su calendario, haga doble clic en él. Luego haga clic en los tres puntos en la esquina superior derecha^{(right-hand corner)} para abrir Opciones^(Options) y seleccione Publicar evento^{(Publish event)} .

Incruste el código HTML^{(HTML code)} de la ventana emergente^{(popup window)} en su sitio web para permitir que los visitantes agreguen el evento a su propio Calendario de Google^{(Google Calendar)} .

Vuelva a su sitio web y pegue^{(website and paste)} el código de la vista fuente o HTML^{(source or HTML)} donde desea que se muestre el botón del evento^{(event button)} .

Cuando un visitante hace clic en el botón Calendario de Google^{(Google Calendar button)} , abrirá su calendario y le agregará el evento. También puede invitar a personas a su evento utilizando el enlace que se muestra en la misma ventana emergente^{(popup window)} .

Incruste Google Calendar en WordPress usando complementos^{(Embed Google Calendar into WordPress Using Plugins)}

Como con la mayoría de las funciones en WordPress , hay un complemento para eso. Incrustar un calendario de Google^{(Google Calendar)} en un sitio web de WordPress^{(WordPress website)} no es una excepción. A continuación hay varios complementos de WordPress que puede considerar usar. 

Complemento de calendario simple^{(Simple Calendar Plugin)}

Simple Calendar muestra tus eventos por semana, mes o en una lista. Es fácil de configurar, responde a dispositivos móviles y se puede personalizar según sus necesidades.

Otras características incluyen: 

• Gestiona eventos en Google y haz que se actualicen automáticamente en WordPress
• Eventos de código de color
• Intuitivo y fácil de configurar
• Funcionalidad adicional con complementos^{( add-ons)}

Este complemento es una excelente opción para los usuarios avanzados de Google Calendar . ^{(Google Calendar power)}Una característica única es la capacidad de transferir eventos codificados por colores.

Embedder de Dan para Google Calendar^{(Dan’s Embedder for Google Calendar)}

Muestre^{(Display Google)} los calendarios de Google en una lista o vista completa con Dan's Embedder para Google Calendar .

No hay necesidad de administrar o importar eventos en WordPress . Solo necesitas uno o más Google Calendars públicos . Otras características incluyen:

• Configurar opciones con shortcodes
• Especificar cuántos elementos mostrar
• Incrustar múltiples calendarios 

Este complemento requiere una clave API^{(API key)} . Sigue los siguientes pasos para obtener el tuyo:

• Visite la consola de desarrolladores de Google^{(Google Developers Console)}
• En el menú lateral, verifique las API y la autenticación^{(APIs and auth)} > Credencial^(Credential)
• Haga clic en el botón Crear nueva clave^{(Create new key)} en la sección de acceso a la API pública^{(Public API access)}
• Seleccione la clave del navegador^{(Browser key)} y deje la limitación^{(Referrer Limitation)} de referencia en blanco
• Ponga esta clave en la página de configuración del complemento

Calendario de eventos WD^{(Event Calendar WD)}

Cree^(Create) una promoción de eventos y administre^{(event promotion and manage)} o agregue eventos a su blog de WordPress^{(WordPress blog)} con Event Calendar WD .

Proporcione una descripción detallada de sus eventos utilizando el editor de WordPress^{(WordPress editor)} , adjunte etiquetas y asigne categorías a cada uno. Algunas otras características incluyen:

• Interfaz fácil de usar para un control total sobre cómo muestra calendarios y eventos en su sitio web
• Personalice y administre fácilmente sus calendarios
• Un número ilimitado de calendarios y eventos.
• Optimice cada evento para mejorar el SEO y la visibilidad en los motores de búsqueda^{(SEO and search engine visibility)}
• Habilite los botones para compartir en redes sociales para correr la voz sobre sus eventos

Calendario de reservas simple de WP^{(WP Simple Booking Calendar)}

^(Quickly)Instale e incruste rápida y fácilmente Google Calendars en su sitio web.

La versión gratuita de WP Simple Booking Calendar le brinda acceso a las funciones básicas que necesita, como realizar un seguimiento de sus eventos. Los aspectos más destacados de la versión gratuita incluyen^{(version include)} :

• Disposición Responsive
• Copia^(Backup) de seguridad y restauración de datos y calendarios
• Muestra tu disponibilidad 

Para funciones de publicación y edición más avanzadas, puede actualizar a la versión Premium^{(Premium version)} .

Los usuarios que deseen administrar y mostrar la disponibilidad de sus servicios en su sitio web o anunciar^{(website or announce)} próximos eventos se beneficiarán enormemente al incorporar un calendario de Google^{(Google Calendar)} en su sitio.

La integración de un calendario directamente en su sitio web mantendrá a los visitantes en su sitio y aumentará las posibilidades de que hagan una cita o se registren para un evento.

Todo lo que necesita es una conexión a Internet, un navegador web^{(web browser)} y una cuenta de Google^{(Google account)} para crear y mostrar un calendario de aspecto profesional en su sitio.

How To Embed Google Calendar On Your Website

Do you need a professional-looking liνe calendar on your website to let visitors know abоut upcomіng events or to schedule an appointment? Instеad of building ѕоmеthing from scratch or using some custom calendar apр that might not get futurе updates, why not use something that mіllions of others are uѕing on a daily basis?

Going that route, you can embed a Google Calendar onto your site. It’s also free and easy to use. All you need to get started is a Google account.

Get started by logging into your Google account, click on the apps grid next to your profile picture and click on Calendar.

Get the Embed Code

Open Options by clicking on the three dots adjacent to the calendar you want to embed.  

Click on Settings and sharing from the popup.

Scroll down the Calendar settings page until you find the Integrate calendar section.

To make your calendar visible to everyone and not only those you share it with, you will need to make it public.

To do this, enable the box next to Make available to public under Access permissions.

Embed the code into the HTML section of a web page or post. For example, if you are using WordPress, create a new page.

Click on Text to switch to the HTML editor. Copy the Embed code from your Google calendar and paste it into the page.

Click on the Visual tab to see what the calendar looks like on your page. You can also select Preview to see it on the front end of your website.

Paste the Calendar HTML code into any web page where you’re allowed tto embed objects.

If you like Google’s default format settings for the calendar, you’re good to go. To change the color, size, and other options of your calendar, you can customize its settings.

Customize Google Calendar Settings

Click the Customize button located directly under the embed code. This will open a new window.

Edit or add a title to your calendar by typing it under Calendar title. If you want the title to show, enable the box next to Title.

Specify which elements you want to show on your calendar by checking the following settings under Show:

• Title
• Navigation buttons
• Data
• Print icon
• Tabs
• Calendar list
• Time Zone

The default size of the Google Calendar is 800 by 600. Change the size by moving the up and down arrows next to Width and Height.

For example, if you want to embed a calendar on a sidebar, reduce the Width to a smaller size such as 300.

Other settings you can customize include:

• Background color to match your brand color
• Time zone and language
• Border (on or off)
• Default month
• First day of the week

After you customize the options, view your final live calendar on your web page. When you change an event on your calendar, it will update automatically.

Below is a screenshot of the monthly view.

You can also view your calendar by week.

If you want to make any changes, you can always go back to your Google Calendar settings and adjust them..

Be sure to copy and paste the new HTML code after making any formatting updates  to reflect the new changes.

How to Let Visitors Save a Calendar Event

To enable visitors to save your event on their own Google Calendar, add a button to your website. Make sure your calendar is public.

Open your Google Calendar. Note that changes can only be made from a computer and not a mobile app.

To add an event, select the day you want to add it to and click on Create in the top left-hand corner.

Fill in the details of your event in the popup and click Save.

To open an event in your calendar, double-click it. Then click the three dots in the upper right-hand corner to open Options, and select Publish event.

Embed the HTML code from the popup window on your website to enable visitors to add the event to their own Google Calendar.

Go back to your website and paste the code from the source or HTML view where you want the event button to display.

When a visitor clicks on the Google Calendar button, it will open their calendar and add the event to it. You can also invite people to your event using the link displayed in the same popup window.

Embed Google Calendar into WordPress Using Plugins

As with most functions in WordPress, there is a plugin for that. Embedding a Google Calendar into a WordPress website is no exception. Below are several WordPress plugins for you to consider using. 

Simple Calendar Plugin

Simple Calendar shows your events by week, month, or in a list. It’s easy to set up, mobile responsive, and customizable to your needs.

Other features include: 

• Manage events in Google and have them updated automatically in WordPress
• Color code events
• Intuitive and straightforward to configure
• Additional functionality with add-ons

This plugin is an excellent choice for Google Calendar power users. One unique feature is the ability to transfer color-coded events.

Dan’s Embedder for Google Calendar

Display Google calendars in a list or full view with Dan’s Embedder for Google Calendar.

There is no need to manage or import events in WordPress. You only need one or more public Google Calendars. Other features include:

• Configure options with shortcodes
• Specify how many items to show
• Embed multiple calendars 

This plugin requires an API key. Follow the steps below to get yours:

• Visit Google Developers Console
• From the side menu, check APIs and auth > Credential
• Click the Create new key button from the Public API access section
• Select Browser key and leave Referrer Limitation blank
• Put this key on the plugin settings page

Event Calendar WD

Create an event promotion and manage or add events to your WordPress blog with Event Calendar WD.

Provide a detailed description of your events using the WordPress editor, attach tags, and assign categories to each one. Some other features include:

• User-friendly interface for full control over how you display calendars and events on your website
• Easily customize and manage your calendars
• An unlimited number of calendars and events
• Optimize every event for better SEO and search engine visibility
• Enable social sharing buttons to spread the word about your events

WP Simple Booking Calendar

Quickly and easily install and embed Google Calendars on your website.

The free version of WP Simple Booking Calendar gives you access to the basic features you need such as keeping track of your events. Highlights of the free version include:

• Responsive layout
• Backup and restore data and calendars
• Display your availability 

For more advanced publishing and editing functions, you can upgrade to the Premium version.

Users who want to manage and display their availability for their services on their website or announce upcoming events will benefit greatly from embedding a Google Calendar on their site.

Integrating a calendar directly on your website will keep visitors on your site and increase the chances they’ll make an appointment or sign up for an event.

All you need is an internet connection, a web browser, and a Google account to create and display a professional-looking calendar on your site.

Related posts

• Cómo Embed Google Forms EN Your Website

• Cómo usar Google Calendar: 10 Pro Tips

• Cómo usar Google Family Calendar para mantener su Family en Time

• 2 accesos directos de la barra de direcciones de Chrome para crear eventos de Google Calendar

• Métodos de investigación de usuarios de Google Analytics para aumentar el tráfico del sitio web

• Cómo Filter EN Google Hojas

• Cómo usar las notificaciones de Google Calendar para apoyar los hábitos atómicos

• Cómo cambiar el Default Google Account

• Cómo compartir un calendario de Google

• Cómo hacer un Google Form: A Complete Guide

• ¿Qué es un Metric and Dimension en Google Analytics?

• 3 maneras de Create Borders en Google Docs

• 8 Google Search Tips: Siempre encuentra lo que eres Looking para

• Usted puede eliminar todo el correo de Gmail a la vez?

• Cómo usar SUMIF en las hojas Google

• Cómo Export and Import Chrome Bookmarks

• Cómo hacer un Business Card en Google Drive

• Cómo hacer una Line Graph en las hojas Google

• 9 características Hidden en Google Maps Debes revisar

• Agregue indicaciones de manejo de Google Maps a su sitio web