您是否需要网站上具有专业外观的实时日历来让访问者了解即将发生的事件或安排约会？与其从头开始构建一些东西或使用一些可能无法获得未来更新的自定义日历应用程序^{(custom calendar app)}，不如使用数以百万计的其他人每天都在使用的东西？

走这条路，你可以在你的网站上嵌入一个谷歌日历。^{(Google Calendar)}它也是免费且易于使用的。您只需一个Google 帐户^{(Google account)}即可开始使用。

^(Get)首先登录您的Google帐户，单击您的个人资料^{(Google account)}图片^{(picture and click)}旁边的应用程序网格，然后单击日历^(Calendar)。

获取嵌入代码^{(Get the Embed Code)}

通过单击与要嵌入的日历相邻的三个点来  打开选项。^{(Options by )}

单击弹出窗口中的设置和共享^{(Settings and sharing)}。

^(Scroll)向下滚动日历^(Calendar)设置页面，直到找到集成日历^{(Integrate calendar)}部分。

要使您的日历对所有人可见，而不仅仅是与您共享的人，您需要将其公开^{( make it public)}。

为此，请在访问权限下启用^{(Access permissions)}对公众可用^{(Make available to public)}旁边的框。

将代码嵌入网页或帖子的^{(page or post)}HTML 部分^{(HTML section)}。例如，如果您使用WordPress，请创建一个新页面。

单击文本^{(Text )}以切换到HTML 编辑器^{(HTML editor)}。从您的Google 日历^{(Google calendar and paste)}中复制嵌入代码^{(Embed code)}并将其粘贴到页面中。

单击“视觉^{(Visual )}”选项卡以查看日历在您的页面上的外观。您还可以选择预览^(Preview)以在您网站的前端查看。

将日历 HTML 代码^{(Calendar HTML code)}粘贴到允许您嵌入对象的任何网页中。

如果您喜欢 Google 的默认日历格式设置，那就可以了。要更改日历的颜色、大小和其他选项，您可以自定义其设置。

自定义 Google 日历设置^{(Customize Google Calendar Settings)}

单击嵌入代码正下方的自定义按钮。^(Customize)这将打开一个新窗口。

通过在日历标题^{(Calendar title)}下键入标题来编辑或添加日历。如果要显示标题，请启用Title旁边的框。

^(Specify)通过检查Show下的以下设置来^(Show)指定要在日历上显示的元素：

• 标题
• 导航按钮
• 数据
• 打印图标
• 标签
• 日历列表
• 时区

Google 日历^{(Google Calendar)}的默认大小^{(default size)}为800 x 600。通过移动Width和Height旁边的向上和向下箭头来更改大小。

例如，如果您想在侧边栏嵌入日历，请将宽度^(Width)减小到较小的尺寸，例如 300。

您可以自定义的其他设置包括：

• 背景颜色^{(Background color)}与您的品牌颜色相匹配^{(brand color)}
• 时区和语言
• 边框（打开或关闭）
• 默认月份
• 一周的第一天

自定义选项后，在网页上查看最终的实时日历。^{(live calendar)}当您更改日历上的事件时，它会自动更新。

以下^(Below)是月度视图的屏幕截图。

您还可以按周查看日历。

如果您想进行任何更改，您可以随时返回您的Google 日历^{(Google Calendar)}设置并进行调整。

在进行任何格式更新以反映新更改后，请务必复制并粘贴新的HTML 代码。^{(HTML code)}

如何让访问者保存日历事件^{(How to Let Visitors Save a Calendar Event)}

要让访问者将您的活动保存在他们自己的Google 日历^{(Google Calendar)}上，请在您的网站上添加一个按钮。确保^(Make)您的日历是公开的。

打开你的谷歌日历^{(Google Calendar)}。请注意，只能从计算机而非移动应用程序进行更改。

要添加事件，请选择要添加事件的日期，然后单击左上角的创建。^(Create)

在弹出窗口中填写^(Fill)活动的详细信息，然后单击^{(popup and click)} 保存^(Save)。

要在您的日历中打开一个事件，请双击它。然后点击右上角^{(right-hand corner)}的三个点打开Options，然后选择Publish event。

在您的网站上嵌入弹出窗口中的^{(popup window)}HTML 代码^{(HTML code)}，使访问者能够将活动添加到他们自己的Google 日历^{(Google Calendar)}中。

返回您的网站，然后将源代码或 HTML^{(source or HTML)}视图中的代码粘贴到您希望显示^{(website and paste)}事件按钮^{(event button)}的位置。

当访问者单击Google 日历按钮^{(Google Calendar button)}时，它将打开他们的日历并将事件添加到其中。您还可以使用同一弹出窗口^{(popup window)}中显示的链接邀请人们参加您的活动。

使用插件将 Google 日历嵌入 WordPress^{(Embed Google Calendar into WordPress Using Plugins)}

与WordPress中的大多数功能一样，有一个插件。将Google 日历^{(Google Calendar)}嵌入WordPress 网站^{(WordPress website)}也不例外。下面是几个WordPress插件供您考虑使用。 

简单的日历插件^{(Simple Calendar Plugin)}

简单日历^{(Simple Calendar)}按周、月或列表显示您的事件。它易于设置、移动响应，并可根据您的需求进行定制。

其他功能包括： 

• 在Google^(Google)中管理事件并在WordPress中自动更新它们^(WordPress)
• 颜色代码事件
• 直观且易于配置
• 附加功能的附加功能^{( add-ons)}

这个插件是谷歌日历高级^{(Google Calendar power)}用户的绝佳选择。一个独特的功能是能够传输颜色编码的事件。

Dan 的 Google 日历嵌入器^{(Dan’s Embedder for Google Calendar)}

^{(Display Google)}使用 Dan's Embedder for Google Calendar以列表或完整视图^{(Google Calendar)}显示Google 日历。

无需在WordPress中管理或导入事件。您只需要一个或多个公共Google 日历^{(Google Calendars)}。其他功能包括：

• 使用简码配置选项
• 指定要显示的项目数
• 嵌入多个日历 

这个插件需要一个API 密钥^{(API key)}。请按照以下步骤获取您的：

• 访问谷歌开发者控制台^{(Google Developers Console)}
• 从侧面菜单中，检查APIs and auth > Credential
• 单击公共 API 访问^{(Public API access)}部分中的创建新密钥^{(Create new key)}按钮
• 选择浏览器键^{(Browser key)}并将引用者限制^{(Referrer Limitation)}留空
• 将此密钥放在插件设置页面上

活动日历 WD^{(Event Calendar WD)}

^(Create)使用Event Calendar WD创建活动促销并管理^{(event promotion and manage)}或添加活动到您的WordPress博客^{(WordPress blog)}。

使用WordPress 编辑器^{(WordPress editor)}提供事件的详细描述，附加标签，并为每个事件分配类别。其他一些功能包括：

• 用户友好的界面，可完全控制您在网站上显示日历和事件的方式
• 轻松自定义和管理您的日历
• 无限数量的日历和事件
• 优化每个事件以获得更好的SEO 和搜索引擎可见性^{(SEO and search engine visibility)}
• 启用社交分享按钮以传播有关您的活动的信息

WP简单的预订日历^{(WP Simple Booking Calendar)}

^(Quickly)在您的网站上快速轻松地安装和嵌入Google 日历。^{(Google Calendars)}

WP Simple Booking Calendar的免费版本使您可以访问所需的基本功能，例如跟踪您的活动。免费版的^{(version include)}亮点包括：

• 响应式布局
• 备份^(Backup)和恢复数据和日历
• 显示您的可用性 

如需更高级的发布和编辑功能，您可以升级到高级版^{(Premium version)}。

想要在他们的网站上管理和显示他们的服务可用性或宣布即将举行的活动的用户将从在他们的网站上嵌入^{(website or announce)}谷歌日历^{(Google Calendar)}中受益匪浅。

直接在您的网站上集成日历将使访问者留在您的网站上，并增加他们预约或注册活动的机会。

您只需要一个互联网连接、一个网络浏览器^{(web browser)}和一个Google 帐户^{(Google account)}，即可在您的网站上创建和显示具有专业外观的日历。

How To Embed Google Calendar On Your Website

Do you nеed a professional-looking live calendar on your wеbsite to let visitors know about upсoming events or to schedule an appointment? Instead of building something frоm scratch or using some custom calendar app that might not get futυre updates, why not use something that millions of others are using 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

• 如何在Your Website上Embed Google Forms

• 如何使用Google Calendar：10 Pro Tips

• 如何使用Google Family Calendar在Time上保持Family

• 2 个用于创建 Google 日历事件的 Chrome 地址栏快捷方式

• 谷歌分析用户研究方法来提高网站流量

• 如何取消或暂停YouTube Premium Subscription

• 什么是COVID Protection Google Exposure Notifications？

• 减轻日程压力的 10 个 Google 日历提示

• Google Docs中的3种方式到Create Borders

• 8 Google Search Tips：总是找到你是Looking的

• 如何在Google Docs中插入签名

• 如何在Google纸上制作Line Graph

• 23个方便的谷歌日历键盘快捷键

• 如何共享 Google 日历

• 什么是谷歌“不寻常的流量”错误以及如何解决它

• 如何在Gmail中发送Private Emails

• 如何在Google纸张中Filter

• 您能立即删除Gmail的所有电子邮件吗？

• 如何使用Google Sheets Drop Down列表

• 如何在Google Maps中使用多个Stops