Do you need a professional calendar on your site to keep your visitors informed of upcoming events or to schedule an appointment? Instead of building something from scratch or using some kind of custom calendar app that might not get updates in the future, why not use something that millions of others use on a daily basis?
By following this path, you can embed Google Calendar on your site. It’s also free and easy to use. All you need to get started is a Google account.
Google Calendar On Your Website”/>
To get started, sign in to your Google account, click the app grid next to your profile picture, and click Calendar.
Google Calendar On Your Website”/>
Get the embed code
Open Options by clicking on the three dots next to the calendar you want to embed.
Google Calendar On Your Website”/>
In the pop-up window, click Settings & Sharing.
Google Calendar On Your Website”/>
Scroll down the calendar settings page to the “Integrate Calendar” section.
Google Calendar On Your Website”/>
To make your calendar visible to everyone, not just those with whom you share it, you need to make it public
To do this, select the Make Available to Everyone check box in the Access Rights section.
Google Calendar On Your Website”/>
Paste the code into the HTML section of a web page or publication. For example, if you are using WordPress, create a new page.
Click Text to switch to the HTML editor. Copy the embed code from Google Calendar and paste it into the page.
Google Calendar On Your Website”/>
Click the Visualize tab to see how the calendar looks on your page. You can also select “Preview” to see it in the interface of your website.
Google Calendar On Your Website”/>
Paste the HTML code of the calendar into any web page where you are allowed to embed objects.
If you like Google’s default calendar format settings, you’re done. To change the color, size, and other parameters of the calendar, you can customize its options.
Customize Google Calendar Settings
Click the Configure button located directly below the embed code. A new window will open.
Edit or add a title to your calendar by entering it below the calendar title. If you want the title to appear, check the box next to the title.
Google Calendar On Your Website”/>
Specify which items you want to display in your calendar by checking the following settings in the Show section:
- Title
- Navigation buttons
- Data
- Print icon
- Tabs
- List of calendars
- Time zone
Google Calendar On Your Website”/>
The default Google Calendar size is 800 x 600. Resize it by moving the up and down arrows next to the Width and Height boxes.
For example, if you want to embed a sidebar calendar, reduce the width to a smaller size, such as 300.
Google Calendar On Your Website”/>
Other options you can customize include:
- Background color to match your brand color;
- Time zone and language;
- Border (enabled or disabled)
- Default month
- First day of week
Google Calendar On Your Website”/>
After adjusting the settings, view the latest live calendar on your webpage. When you change an event in your calendar, it updates automatically.
Below is a screenshot of the monthly overview.
Google Calendar On Your Website”/>
You can also view your calendar by week.
Google Calendar On Your Website”/>
If you want to make any changes, you can always go back to your Google Calendar settings and change them.
Be sure to copy and paste the new HTML after making any formatting updates to reflect the new changes.
How to allow your visitors to save an event to Calendar
To enable visitors to save your event to their own Google calendar, add a button to your website. Make sure your calendar is open to everyone.
Open your Google Calendar Please note that changes can only be made from a computer, not from a mobile app.
To add an event, select the day on which you want to add it and click “Create” in the upper left corner.
Google Calendar On Your Website”/>
Enter your event information in the pop-up window and click Save.
Google Calendar On Your Website”/>
To open an event in your calendar, double-click it. Then click the three dots in the upper right corner to open Options and select Publish Event.
Google Calendar On Your Website”/>
Paste the HTML code from the popup into your website so visitors can add the event to their own Google Calendar
Google Calendar On Your Website”/>
Go back to your website and paste the code from your source or HTML view where you want the event button to appear.
Google Calendar On Your Website”/>
When a visitor clicks the Google Calendar button, they open their calendar and add an event to it. You can also invite people to your event using the link displayed in the same popup.
Embed Google Calendar in WordPress with Plugins
As with most features in WordPress, there is a plugin for that. Embedding Google Calendar in a WordPress website is no exception. Below are a few WordPress plugins that you can use.
Simple Calendar Plugin
Simple Calendar Plug-in
Simple Calendar shows your events by week, month or as a list. It’s easy to set up, mobile-responsive, and customizable to suit your needs.
Google Calendar On Your Website”/>
Other features include:
- Manage events in Google and automatically update them in WordPress.
- Color code events.
- Intuitive and easy to customize
- Additional features with add-ons
This plugin is a great choice for advanced Google Calendar users. A unique feature is the ability to transmit color-coded events.
Dan’s Embed Google Calendar
Dan’s Embedder for Google Calendar
Display Google calendars as a list or in full view with Dan’s Embedder for Google Calendar
Google Calendar On Your Website”/>
No need to manage or import events in WordPress. You only need one or more public Google calendars. Other features include:
- Customize options using shortcodes.
- Specify the number of items to display.
- Embed multiple calendars
This plugin requires an API key. To get yours, follow these steps:
- Visit the Google Developer Console.
- From the sidebar, select API & Authentication> Credentials.
- Click the Generate New Key button in the Public API Access section.
- Select a browser key and leave the Referrer Limit field blank.
- Place this key in the plugin settings page.
WD Events Calendar
Event Calendar WD
Create promotions and manage or add events to your WordPress blog using the WD Events Calendar.
Google Calendar On Your Website”/>
Provide a detailed description of your events using the WordPress editor, attach tags and assign categories to each one. Some other features include:
- A user-friendly interface for complete control over the display of calendars and events on your website.
- Easily customize and manage calendars.
- Unlimited calendars and events
- Optimize each event for better SEO and search engine visibility.
- Enable social media sharing buttons to spread the word about your events.
- Responsive layout
- Backing up and restoring data and calendars
- Displaying your availability
WP Simple Booking Calendar
WP Simple Booking Calendar
Quickly and easily install and embed Google Calendars on your website.
Google Calendar On Your Website”/>
The free version of WP Simple Booking Calendar gives you access to basic functions you need, such as keeping track of your events. Key features of the free version:
For more advanced publishing and editing features, you can upgrade to the Premium version.
Users who want to manage their availability for their services and display them on their website or announce upcoming events will greatly benefit from embedding Google Calendar into their site.
Integrating a calendar directly into your site will keep visitors on your site and increase the chances that they will 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 calendar on your site.
–
Comments on “How To Embed Google Calendar On Your Website”