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 .
4. Add the calendar name, the description, select the time zone and click Create Calendar .
5. Click the Configure link.
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.
Click the arrow next to Settings at the top of the page to return to your calendar.
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.
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.
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.
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).
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.
How you add embed code depends on if you are using the block editor or the classic 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.
Here’s what it looks like when it’s added to the Block Editor.
Paste the embed code into the custom HTML block.
Click on Preview to view the calendar.
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 Insert Embed Code.
Paste the embed code into the Insert Embed code box and click Insert into post.
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 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
- Google Calendar Block
- Add the Google Calendar Block
- Enable Permissions and Generate the Embed Code
- Example of an Embedded Calendar
- Embed a Google Calendar with HTML
- Embed a Google Calendar into your Sidebar
- Sync iCal with Google Calendar
- 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.
Alternatively, you can type /google-calendar in a new block and press enter.
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:
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
- Click the three dots next to your calendar name and select the Settings and Sharing link.
- Go to the Access Permissions section and make your calendar public by checking the checkbox called Make available to public.
- 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.
Example of an Embedded Calendar
↑ Índice ↑
Embed a Google Calendar with HTML
Here a the steps to embed a Google Calendar with HTML:
- Edit the Page or Post you want to add the Google Calendar to.
- Add a new HTML Block.
- Paste the Embed code you copied from your Google Calendar.
- Publish, or Update your page or post.
- The next time you edit your page or post, you will notice the Embed code has been 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
- Follow steps 1-5 above and copy the shortcode from step 5.
- Go to Customize → Widgets and select the widget area you want your calendar to appear on.
- Add a Custom HTML widget to your sidebar.
- Add a title to your widget (if you want one).
- Paste the shortcode into the Custom HTML widget.
- 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 ↑
- 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).
Personalize your Google Calendar
You will be able to control the color, buttons, width, height, and more:
Customize a Google Calendar
Versatile planes and prices
the best for the students
The best for fans
The best for freelancers
The best for small businesses
choose a plan
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!
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.
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.
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.
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.
After that, you’ll be redirected to your project dashboard.
Here, you need to click the ‘Enable APIs and Services’ option.
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.
Next, click the ‘Enable’ button.
This activates the API so that you can generate an API code.
On the next screen, click the ‘Create Credentials’ button.
Then, select ‘API key’ from the drop down list.
This will bring up a popup that contains your API key.
You need to copy this and paste it into your favorite text editor.
After that, head back to the plugin settings screen in your WordPress dashboard and enter your API key.
Then, click the ‘Save Changes’ button.
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.
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.
Next, check the ‘Make available to public’ box in the ‘Access permissions for events’ section.
Then, click ‘Okay’ in the popup 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.
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.
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.
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.
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.
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.
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