{"id":30787,"date":"2021-10-13T15:00:04","date_gmt":"2021-10-13T13:00:04","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=30787"},"modified":"2021-10-12T14:39:44","modified_gmt":"2021-10-12T12:39:44","slug":"add-wordpress-google-calendar","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/add-wordpress-google-calendar\/","title":{"rendered":"How to Add Google Calendar in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Calendars are an integral part of our daily lives, both in the personal and business environments. While some are made of paper, there is a growing need for online calendars that can help with scheduling tasks, events, meetings, being aware of deadlines, or simply staying more organized. As such, it\u2019s no surprise that calendars have become a necessity for WordPress websites across many business niches.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]While there are many calendar options available, the one that stands out for its professionalism and ease of use is the Google Calendar. And it\u2019s the one we\u2019ll be tackling in this article while discussing how you can add a Google Calendar to your WordPress website. Follow along as we cover all you need to know to get your WordPress site a Google Calendar and keep your visitors, readers, and customers in touch with upcoming events, meet-ups, classes, limited sale periods, and much more. To make it easier to navigate, we&#8217;ve broken this process down into smaller steps:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#configuring-the-google-calendar-api-and-api-key\">Configuring the Google Calendar API and API key<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#making-a-google-calendar-public\">Making a Google calendar public<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#displaying-the-google-calendar\">Displaying the Google calendar<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">How to add Google Calendar in WordPress<\/h2>\n<p>[\/vc_column_text][vc_column_text]While it\u2019s clear how a Google Calendar can benefit you, the question remains about how to add it to your site. You can add this functionality using custom code, but finding a suitable WordPress plugin for adding a Google Calendar is far more user-friendly. That\u2019s why we\u2019ll focus on explaining the process using the Simple Calendar plugin.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <a href=\"https:\/\/wordpress.org\/plugins\/google-calendar-events\/\" target=\"_blank\" rel=\"noopener\">Simple Calendar<\/a> is a freemium plugin that makes it easy to integrate Google Calendar with WordPress and display the calendars in a grid or list view. The free version of the plugin allows you to display only the Google Calendars that are made public, with options to adjust the time zone, date\/time format, and start of the week view.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The plugin also offers premium add-ons for Google Calendar and FullCalendar. The Google Calendar premium add-ons allow for the display of both public and private Google Calendars, and they support highlighting events with the same colors found in matching events within the Google Calendar app. With a premium addon, you can also display a more detailed list of information, including event attendee names, avatars, RSVP status, and the event organizer information. All this is accompanied by premium support service.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Besides setting up the plugin, a big part of the configuration process involves using the Google Cloud Platform. Since we will be showing you how the process works using only the free version of this plugin, we will need to create a simple API key. However, if you opt to use the Google Calendar premium add-ons, you\u2019ll need an OAuth Client ID instead. Furthermore, the whole configuration process is a bit lengthy, which is why we divided it into three sections, each dedicated to a specific part of the process.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"configuring-the-google-calendar-api-and-api-key\"><\/a>Configuring the Google Calendar API and API key<\/h3>\n<p>[\/vc_column_text][vc_column_text]The first part of the configuration process involves integrating a Google Cloud project with the Simple Calendar plugin. That project needs to have the Google Calendar API enabled and the integration will be done using an API key. Let\u2019s take a look at how this is done.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">installing the plugin<\/a>, <strong>navigate to the Calendars &gt; Settings section<\/strong>. This will place you within the <strong>Event Sources<\/strong> tab by default. To proceed, you will need to insert a properly created Google API Key tied to the Google Calendar API.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"557\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Event-Sources.jpg\" class=\"attachment-full size-full\" alt=\"Event Sources\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Event-Sources.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Event-Sources-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Event-Sources-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Event-Sources-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Therefore, the next step involves creating a Google project and an adequate Google API key.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To do this,<strong> navigate to the <a href=\"https:\/\/console.cloud.google.com\/\" target=\"_blank\" rel=\"noopener\">Google Cloud Console<\/a> <\/strong>and<strong> log in with your Google account. We recommend you do so in a separate browser tab as you will need to switch back-and-forth between the plugin setup and the Google Cloud Console later.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you\u2019ve logged in to the Google Cloud Platform, you will need to create a new project.<strong> If you\u2019ve created Google projects before, one of those will be selected by default. Click on the project name<\/strong> to view a list of all your projects and get the <em>New Project<\/em> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Click-on-Project-Name.jpg\" class=\"attachment-full size-full\" alt=\"Click on Project Name\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Click-on-Project-Name.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Click-on-Project-Name-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Click-on-Project-Name-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Click-on-Project-Name-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After <strong>clicking on the <em>New Project<\/em> button<\/strong>, you will see the New Project screen.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"595\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-New-Project.jpg\" class=\"attachment-full size-full\" alt=\"API New Project\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-New-Project.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-New-Project-300x184.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-New-Project-768x472.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-New-Project-620x381.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>On the other hand, if you haven\u2019t created any Google projects previously, you will need to click on the <em>Create project<\/em> button located within the Dashboard\u2019s main screen. This will lead you to the same New Project screen.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Create-Project.jpg\" class=\"attachment-full size-full\" alt=\"API Create Project\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Create-Project.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Create-Project-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Create-Project-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Create-Project-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After opening the New Project screen, <strong>insert a project name<\/strong> and <strong>press the <em>Create<\/em> button<\/strong>. If you wish, you can also assign a location to the project before creating it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"503\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Create-Project-2.jpg\" class=\"attachment-full size-full\" alt=\"API Create Project\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Create-Project-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Create-Project-2-300x156.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Create-Project-2-768x399.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Create-Project-2-620x322.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The new project will be created shortly after. Then you\u2019ll need to add the Google Calendar API to it. <strong>Navigate to APIs &amp; Services &gt; Library<\/strong> from the menu on the left.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"545\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Library.jpg\" class=\"attachment-full size-full\" alt=\"API Library\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Library.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Library-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Library-768x432.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Library-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Scroll down a bit<\/strong> to the Google Workspace section, and <strong>click on the Google Calendar API<\/strong>. If you aren\u2019t able to find it, you can look for the Google Calendar API using the search bar at the top.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"598\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Choose-Google-Calendar.jpg\" class=\"attachment-full size-full\" alt=\"API Choose Google Calendar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Choose-Google-Calendar.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Choose-Google-Calendar-300x185.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Choose-Google-Calendar-768x474.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Choose-Google-Calendar-620x383.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you click on the Google Calendar API, its page will be displayed. To add the API to your newly-created project, <strong>press the <em>Enable<\/em> button<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Enable-Calendar.jpg\" class=\"attachment-full size-full\" alt=\"API Enable Calendar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Enable-Calendar.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Enable-Calendar-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Enable-Calendar-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Enable-Calendar-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]However, to properly use the Google Calendar API, you will need to create a Google API key that is tied to it or the Google project you previously created. In this case, we will show the latter. <strong>Click on Credentials from the left side menu<\/strong>, while staying within the Google Calendar API.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Credentials.jpg\" class=\"attachment-full size-full\" alt=\"API Credentials\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Credentials.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Credentials-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Credentials-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Credentials-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This will open the Credentials page belonging to the Google Calendar API. However, clicking on the <em>Create credentials<\/em> link in the top part of the page will <strong>not<\/strong> create the Google API key that we want. Instead, you will be given the following options: OAuth Client ID, Service account, and Help me choose (between the two previously mentioned options). Those same options would be available if you clicked on the<em> Create Credentials<\/em> link that comes after the message saying \u201cTo use this API, you may need credentials. Click \u2018Create credentials\u2019 to get started.\u201d in the previous screen.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Since we want a simple API key that checks quota and access, we need to <strong>click on the <em>Credentials in APIs &amp; Services<\/em> link located within the Credentials compatible with this API.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Credentials-in-APIs.jpg\" class=\"attachment-full size-full\" alt=\"API Credentials in APIs\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Credentials-in-APIs.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Credentials-in-APIs-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Credentials-in-APIs-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Credentials-in-APIs-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This will allow us to assign a Google API key directly to this project. <strong>Alternatively, the same could be done by returning to the Dashboard section of your project after enabling the Google Calendar API and then navigating to APIs &amp; Services &gt; Credentials.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"545\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/APIs-Services-Credentials.jpg\" class=\"attachment-full size-full\" alt=\"APIs &amp; Services Credentials\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/APIs-Services-Credentials.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/APIs-Services-Credentials-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/APIs-Services-Credentials-768x432.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/APIs-Services-Credentials-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]On this page, you will get an overview of all the API keys that you previously created, as well as the option to create new ones. To create a new API key,<strong> click the <em>Create credentials<\/em> link<\/strong> located in the top section of the page. At this point, <strong>you will see the three options we mentioned previously accompanied by a fourth one called API key, which you should select.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Key-Credentials.jpg\" class=\"attachment-full size-full\" alt=\"API Key Credentials\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Key-Credentials.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Key-Credentials-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Key-Credentials-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Key-Credentials-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Shortly after, <strong>your API key will be created and displayed in a popup window. You will be able to copy it from here either manually or by using the Copy button next to the key.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Key-Created.jpg\" class=\"attachment-full size-full\" alt=\"API Key Created\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Key-Created.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Key-Created-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Key-Created-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Key-Created-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You will also see a warning stating that you should restrict the key to prevent unauthorized use in production. However, <a href=\"https:\/\/docs.simplecalendar.io\/\" target=\"_blank\" rel=\"noopener\">the plugin documentation<\/a> doesn\u2019t require you to set restrictions on the API key. As such, you can simply proceed to the following step\u2014pasting your API key within the plugin.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, you can still choose to set restrictions by clicking on the<em> Restrict key<\/em> or the <em>Edit API key<\/em> option next to the appropriate key in the API Keys list. If you opt to do that, we recommend putting an API restriction only. For example, you can restrict the API key to the Google Calendar API only, as shown below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"572\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Restrictions-Error.jpg\" class=\"attachment-full size-full\" alt=\"Restrictions Error\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Restrictions-Error.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Restrictions-Error-300x177.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Restrictions-Error-768x453.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Restrictions-Error-620x366.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You should be aware that setting an application restriction may lead to a <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-fix-403-forbidden-error-in-wordpress\/\">403 Error<\/a> in later steps. For example, when editing a specific calendar custom post item later on in the configuration process. The error screen you get might look something like this. If this happens to you, you can go back and disable the restrictions you set, or reach out to the plugin\u2019s authors for assistance.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"405\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Restrictions-Error-2.jpg\" class=\"attachment-full size-full\" alt=\"Restrictions Error\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Restrictions-Error-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Restrictions-Error-2-300x125.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Restrictions-Error-2-768x321.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Restrictions-Error-2-620x259.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]With that being said, after creating the API key, you should copy and paste it within the appropriate field in the plugin options. This is done by<strong> switching to the tab where you have the WordPress dashboard open<\/strong> and <strong>navigating to the Calendars &gt; Settings<\/strong>. Then you need to <strong>paste the key within the<em> Google API Key<\/em> field located in the <em>Event Sources<\/em> tab<\/strong>. Finally, <strong>press the <em>Save Changes<\/em> button<\/strong> below to save the inserted key.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"529\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Event-Sources.jpg\" class=\"attachment-full size-full\" alt=\"API Event Sources\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Event-Sources.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Event-Sources-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Event-Sources-768x419.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/API-Event-Sources-620x338.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This concludes the first and most important part of the configuration process.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"making-a-google-calendar-public\"><\/a>Making a Google calendar public<\/h3>\n<p>[\/vc_column_text][vc_column_text]The following part of the process involves making a Google calendar publicly viewable. This step is mandatory if you\u2019re using the free version of the plugin, as it can only display publicly viewable calendars. You can skip it if you\u2019ve opted for a premium add-on that allows you to display private calendars.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To make a calendar public, log in to <a href=\"https:\/\/calendar.google.com\/\" target=\"_blank\" rel=\"noopener\">Google Calendar<\/a> and<strong> locate the calendar<\/strong> that you wish to display. Then, <strong>click on the three dots next to that calendar<\/strong> and <strong>select the <em>Settings and sharing<\/em> option<\/strong> from the dropdown menu that appears.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"657\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar.jpg\" class=\"attachment-full size-full\" alt=\"Calendar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-300x203.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-768x521.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-620x420.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"650\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-Settings-and-Sharing.jpg\" class=\"attachment-full size-full\" alt=\"Calendar Settings and Sharing\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-Settings-and-Sharing.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-Settings-and-Sharing-300x201.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-Settings-and-Sharing-768x515.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-Settings-and-Sharing-620x416.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This will open the settings page for that calendar. <strong>Scroll down to the<em> Access permissions for events<\/em> section<\/strong> and <strong>tick the checkbox next to the <em>Make available to public<\/em> option<\/strong>. Finally, <strong>press the <em>Ok<\/em> button<\/strong> in the popup window to confirm your choice.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"505\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-Warning.jpg\" class=\"attachment-full size-full\" alt=\"Calendar Warning\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-Warning.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-Warning-300x156.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-Warning-768x400.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-Warning-620x323.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]On the other hand, <strong>if you haven\u2019t created any calendars previously, you can do so by clicking on the + button. It\u2019s located within the Other calendars section of the Google Calendar main screen. Then, press the<em> Create new calendar<\/em> option to proceed.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"641\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Adding-a-Calendar.jpg\" class=\"attachment-full size-full\" alt=\"Adding a Calendar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Adding-a-Calendar.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Adding-a-Calendar-300x198.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Adding-a-Calendar-768x508.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Adding-a-Calendar-620x410.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"505\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Create-New-Calendar.jpg\" class=\"attachment-full size-full\" alt=\"Create New Calendar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Create-New-Calendar.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Create-New-Calendar-300x156.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Create-New-Calendar-768x400.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Create-New-Calendar-620x323.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the following screen,<strong> insert the name and description for your calendar, and set the time zone and owner.<\/strong> Then, <strong>press the <em>Create calendar<\/em> button<\/strong> to finish creating it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Add-Calendar.jpg\" class=\"attachment-full size-full\" alt=\"Add Calendar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Add-Calendar.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Add-Calendar-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Add-Calendar-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Add-Calendar-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Once you\u2019ve done that, you can proceed to make the newly created calendar available to the public as described above.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With that done, the following step is to integrate the calendar with our WordPress plugin. This is accomplished using a calendar ID. To find that ID, <strong>click on the calendar\u2019s <em>Settings and sharing<\/em> link<\/strong> and <strong>scroll down to the <em>Integrate calendar<\/em> section<\/strong>. Alternatively, if you haven\u2019t returned to the previous window after setting the calendar to be public, you only need to scroll down a bit to that section. From there,<strong> locate the <em>Calendar ID<\/em> option<\/strong> and <strong>copy the ID<\/strong> that is shown.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"649\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-ID.jpg\" class=\"attachment-full size-full\" alt=\"Calendar ID\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-ID.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-ID-300x201.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-ID-768x514.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-ID-620x415.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"displaying-the-google-calendar\"><\/a>Displaying the Google calendar<\/h3>\n<p>[\/vc_column_text][vc_column_text]With this Calendar ID, we can jump straight ahead into the final step of this configuration process\u2014displaying the calendar on your WordPress website. This will require you to create a calendar item using the plugin and integrate the Google Calendar ID you previously copied. To clarify, the calendar item is a custom post type item enabled by the plugin. After you create it within the WordPress dashboard, you can choose from several different ways of displaying it on your website.[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Using the calendar item permalink<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To start with, you need to create a calendar item. This is done by <strong>switching to the previous browser tab<\/strong> and <strong>navigating to Calendars &gt; Add New. Set a name for your calendar item<\/strong> and <strong>scroll down to the Calendar Settings<\/strong>. From there, you will be able to edit various aspects of the calendar item, as well as integrate the Google Calendar you previously made public.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Click the Google Calendar tab<\/strong> and <strong>locate the Calendar ID option<\/strong> within the Google Calendar Settings that will be displayed on the right. Then, <strong>paste the previously copied Google Calendar ID within this field<\/strong> and <strong>press the <em>Publish<\/em> button<\/strong> to create a calendar item.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Add-New-Calendar.jpg\" class=\"attachment-full size-full\" alt=\"Add New Calendar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Add-New-Calendar.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Add-New-Calendar-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Add-New-Calendar-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Add-New-Calendar-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"500\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Calendar Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-Settings-300x155.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-Settings-768x396.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-Settings-620x320.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Creating-a-Calendar-Publish.jpg\" class=\"attachment-full size-full\" alt=\"Creating a Calendar Publish\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Creating-a-Calendar-Publish.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Creating-a-Calendar-Publish-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Creating-a-Calendar-Publish-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Creating-a-Calendar-Publish-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Calendar Settings section offers various options for editing your calendar item. You can use the editor to add additional content, some of which will be added by the plugin by default. However, this isn\u2019t necessary and we opted not to add anything more in the editor.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After publishing the calendar item, you will be able to<strong> access its page by clicking on the corresponding permalink that will appear next to the calendar item\u2019s name.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This is the easiest of four possible ways that the plugin allows you to display your integrated Google Calendar.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Using the Attach Calendars section<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Another way that you can integrate a calendar to pages, posts, and custom post types is to attach it in two predefined places\u2014before the content or after it. This is done using the Attach Calendars section that the plugin creates.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To use it,<strong> navigate to Calendars &gt; Settings<\/strong> and <strong>open the Calendars tab<\/strong>. Then,<strong> locate the Attach Calendars option, select where you want to display the calendar(s)<\/strong>, and<strong> press the <em>Save Changes<\/em> button<\/strong> to apply the changes.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"521\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Attach-Calendars.jpg\" class=\"attachment-full size-full\" alt=\"Attach Calendars\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Attach-Calendars.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Attach-Calendars-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Attach-Calendars-768x413.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Attach-Calendars-620x333.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]By default, the Attach Calendars option will be blank. You select where you want to add your calendar by clicking on the field and selecting the appropriate option from the dropdown that appears. For this article, we added a calendar to pages and posts only, but you can include any custom post types that are registered on your website.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To display the calendar in one of those two predefined places,<strong> click to edit a page, post, or custom post type<\/strong> (depending on what you selected previously) and <strong>locate the Attach Calendar section<\/strong> created by the plugin. If you\u2019re using the Gutenberg editor, that section will be located on the right, while the Page\/Post tab is selected.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you find that section, <strong>select the name of the calendar custom post item<\/strong> that you created earlier. If you created multiple calendar items, the list will contain all those that are published for you to choose from. Then <strong>tick the checkbox next to the desired placement of the calendar item<\/strong>\u2014after or before content\u2014and <strong>press the <em>Update<\/em> button<\/strong> to update your current page\/post.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"653\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Page-Attach-Calendar.jpg\" class=\"attachment-full size-full\" alt=\"Page Attach Calendar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Page-Attach-Calendar.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Page-Attach-Calendar-300x202.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Page-Attach-Calendar-768x518.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Page-Attach-Calendar-620x418.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then,<strong> review the page\/post<\/strong> where you added the calendar and examine the results. Please note, you will need to repeat the second part of this process for every page\/post where you wish to add a calendar using this method.[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Using the Simple Calendar widget<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Another easy way of displaying a calendar item is by using the widget provided by the plugin.<br \/>\n[\/vc_column_text][vc_column_text]To do this, <strong>navigate to Appearance &gt; Widgets, locate the Simple Calendar widget, and add it to your widget area of choice.<\/strong> Within the widget, <strong>select the calendar custom post item you want to display, add a title<\/strong> if you want, and <strong>press the <em>Save<\/em> button<\/strong> to update the widget.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Simple-Calendar-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Simple Calendar Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Simple-Calendar-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Simple-Calendar-Widget-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Simple-Calendar-Widget-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Simple-Calendar-Widget-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]When you\u2019re done, <strong>review a page\/post where this widget area is shown<\/strong> and <strong>check the results.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Using the calendar shortcode<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The final way that this plugin allows you to display calendar items is via the [calendar] shortcode. By inserting the appropriate shortcode call, you will be able to display a specific calendar item on any part of your website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To do this, <strong>navigate to Calendars &gt; All Calendars<\/strong> and<strong> click to edit one of your previously created calendar items.<\/strong> Then,<strong> locate the Calendar Shortcode section<\/strong> on the right and <strong>copy the shortcode call<\/strong> within.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"573\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-Shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Calendar Shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-Shortcode.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-Shortcode-300x177.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-Shortcode-768x454.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Calendar-Shortcode-620x367.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If we observe this shortcode call closely, we can see that it contains a single parameter\u2014the post ID of the calendar custom post item. In fact, this is the only parameter that the shortcode accepts.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To use the shortcode, you will need to insert its call within an element that renders shortcodes. For Gutenberg, that is the Shortcode block. To use it, <strong>click to edit a page or a post<\/strong>, and <strong>add a Shortcode block<\/strong> to it. Then, <strong>paste the copied shortcode call inside the block<\/strong> and <strong>press the <em>Update<\/em> button.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Paste-the-Calendar-Code.jpg\" class=\"attachment-full size-full\" alt=\"Paste the Calendar Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Paste-the-Calendar-Code.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Paste-the-Calendar-Code-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Paste-the-Calendar-Code-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Paste-the-Calendar-Code-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The procedure is slightly different if you aren\u2019t using the Gutenberg editor. <strong>For Classic Editor users, you can add the shortcode call directly inside the Visual tab of your editor. WP Bakery users can put the shortcode call inside the Visual tab of the Text Block element. And Elementor users can place it within the Visual tab of the Text Editor element.<\/strong> Since we already covered the steps on how to do this in detail in <a href=\"https:\/\/qodeinteractive.com\/magazine\/create-shortcode-in-wordpress\/\">our article on custom shortcodes<\/a>, we recommend taking a look at it, and especially the section on <a href=\"https:\/\/qodeinteractive.com\/magazine\/create-shortcode-in-wordpress\/#using-custom-shortcodes\">the use of custom shortcodes<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With that being said, <strong>after inserting the shortcode call inside your editor and updating the page\/post, you will need to review the changes, just as before.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This wraps up all the ways you can display an integrated Google Calendar using the Simple Calendar plugin. Each of these methods has its pros and cons, reflected in the level of difficulty of implementation and the location where the calendar item can be displayed. You should review them all and carefully choose the one that suits you best.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, you can see how the display of the calendar item we created for this article turned out on the screenshot below. Don\u2019t forget, the plugin also offers a way to edit the view of the calendar item. This is done using the options found in the Calendar Settings below a specific calendar item. With very minimal changes made to those options, this is our result:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Result-Final.jpg\" class=\"attachment-full size-full\" alt=\"Result Final\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Result-Final.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Result-Final-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Result-Final-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Result-Final-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]Google Calendar is an excellent tool for keeping your visitors informed of any scheduled plans related to your website and business. Besides the many practical benefits of using it, it also offers easy integration with WordPress. There\u2019s no time like the present for making tremendous improvements to your website\u2019s organization.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Since the integration process is done using a WordPress plugin, completing it is very simple and accessible to a wide range of WordPress users, especially those with little or no technical knowledge. And while the process may take a bit of time, by carefully following the instructions we outlined in the article, you will be able to display a Google Calendar on your WordPress website in a few steps. Moreover, you can choose from several ways permitted by the plugin to pick the one you find easiest and most convenient to use.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>In this article, we&#8217;ll explain why your WordPress site needs a Google calendar and the different ways you can add one to your pages. Check it out!<\/p>\n","protected":false},"author":11229,"featured_media":30864,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[81,4,39,13],"class_list":["post-30787","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-google","tag-tips","tag-tools","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/30787","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=30787"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/30787\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/30864"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=30787"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=30787"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=30787"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}