訪問者に今後のイベントについて知らせたり、予定を立てたりするために、Webサイトにプロ並みのライブカレンダーが必要ですか？ゼロから何かを構築したり、将来の更新を取得しない可能性のあるカスタムカレンダーアプリを使用したりする代わりに、他の何百万人もの人々が日常的に使用しているものを使用してみませんか？^{(custom calendar app)}

そのルートを進むと、Googleカレンダー^{(Google Calendar)}をサイトに埋め込むことができます。また、無料で使いやすいです。始めるために必要なのはGoogleアカウント^{(Google account)}だけです。

まず、 ^(Get)Googleアカウント^{(Google account)}にログインし、プロフィール写真^{(picture and click)}の横にあるアプリグリッドをクリックして、[カレンダー^(Calendar)]をクリックします。

埋め込みコードを取得する^{(Get the Embed Code)}

埋め込むカレンダーの横にある3つのドットをクリックして、[オプション^{(Options by )}]を開きます。  

ポップアップから[設定と共有]を^{(Settings and sharing)}クリックします。

^(Scroll)[カレンダーの統合]^{(Integrate calendar)}セクションが見つかるまで、[カレンダー^(Calendar)設定]ページを下にスクロールします。

カレンダーを共有する相手だけでなく、すべての人に表示するには、カレンダーを公開^{( make it public)}する必要があります。

これを行うには、[アクセス許可]^{(Access permissions)}の下の[公開^{(Make available to public)}する]の横のボックスを有効にします。

コードをWebページまたは投稿の^{(page or post)}HTMLセクション^{(HTML section)}に埋め込みます。たとえば、WordPressを使用している場合は、新しいページを作成します。

テキスト^{(Text )}をクリックして、 HTMLエディタ^{(HTML editor)}に切り替えます。Googleカレンダー^{(Google calendar and paste)}から埋め込みコード^{(Embed code)}をコピーして、ページに貼り付けます。

[ビジュアル^{(Visual )}]タブをクリックして、ページでのカレンダーの外観を確認します。[プレビュー]^(Preview)を選択して、Webサイトのフロントエンドに表示することもできます。

カレンダーのHTMLコード^{(Calendar HTML code)}を、オブジェクトの埋め込みが許可されている任意のWebページに貼り付けます。

カレンダーのGoogleのデフォルトの形式設定が気に入った場合は、これで問題ありません。カレンダーの色、サイズ、およびその他のオプションを変更するには、その設定をカスタマイズできます。

Googleカレンダーの設定をカスタマイズする^{(Customize Google Calendar Settings)}

埋め込みコードのすぐ下にある[カスタマイズ]ボタンをクリックします。^(Customize)これにより、新しいウィンドウが開きます。

[カレンダー^{(Calendar title)}のタイトル]の下にタイトルを入力して、カレンダーのタイトルを編集または追加します。タイトルを表示する場合は、[タイトル^(Title)]の横のボックスを有効にします。

^(Specify)[表示]で次の設定を確認して、カレンダーに表示する要素を^(Show)指定します。

• タイトル
• ナビゲーションボタン
• データ
• 印刷アイコン
• タブ
• カレンダーリスト
• タイムゾーン

Googleカレンダー^{(Google Calendar)}のデフォルトのサイズ^{(default size)}は800x600です。[幅]^(Width)と[高^(Height)さ]の横にある上下の矢印を移動して、サイズを変更します。

たとえば、カレンダーをサイドバーに埋め込む場合は、幅^(Width)を300などの小さいサイズに減らします。

カスタマイズできるその他の設定は次のとおりです。

• ^{(Background color)}ブランドカラー^{(brand color)}に合わせた背景色
• タイムゾーンと言語
• 境界線（オンまたはオフ）
• デフォルトの月
• 週の最初の日

オプションをカスタマイズしたら、Webページで最終的なライブカレンダーを表示します。^{(live calendar)}カレンダーのイベントを変更すると、自動的に更新されます。

以下^(Below)は、月次ビューのスクリーンショットです。

週ごとにカレンダーを表示することもできます。

変更を加える場合は、いつでもGoogleカレンダー^{(Google Calendar)}の設定に戻って調整できます。

新しい変更を反映するためにフォーマットを更新した後は、必ず新しいHTMLコード^{(HTML code)}をコピーして貼り付けてください。

訪問者にカレンダーイベントを保存させる方法^{(How to Let Visitors Save a Calendar Event)}

訪問者が自分のGoogleカレンダー^{(Google Calendar)}にイベントを保存できるようにするには、ウェブサイトにボタンを追加します。カレンダーが公開されていることを確認してください。^(Make)

Googleカレンダー^{(Google Calendar)}を開きます。変更はコンピューターからのみ行うことができ、モバイルアプリからは行うことができないことに注意してください。

イベントを追加するには、イベントを追加する日を選択し、左上隅にある[作成]をクリックします。^(Create)

^(Fill)ポップアップに^{(popup and click)} イベントの詳細を入力し、[保存^(Save)]をクリックします。

カレンダーでイベントを開くには、イベントをダブルクリックします。次に、右上隅^{(right-hand corner)}にある3つのドットをクリックして[オプション^(Options)]を開き、[イベントの公開^{(Publish event)}]を選択します。

ウェブサイトのポップアップウィンドウ^{(popup window)}からHTMLコード^{(HTML code)}を埋め込み、訪問者が自分のGoogleカレンダー^{(Google Calendar)}にイベントを追加できるようにします。

Webサイトに戻り、イベントボタンを表示する^{(event button)}ソースビューまたはHTML^{(source or HTML)}ビューからコードを貼り付け^{(website and paste)}ます。

訪問者が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でイベントを管理し、 WordPressで自動的に更新する
• カラーコードイベント
• 直感的で簡単に構成できます
• アドオン^{( add-ons)}による追加機能

このプラグインは、 Googleカレンダーのパワー^{(Google Calendar power)}ユーザーに最適です。ユニークな機能の1つは、色分けされたイベントを転送する機能です。

Googleカレンダー用のDan'sEmbedder^{(Dan’s Embedder for Google Calendar)}

^{(Display Google)}Dan's Embedder for Google Calendarを使用して、 ^{(Google Calendar)}Googleカレンダーをリストまたはフルビューで表示します。

WordPressでイベントを管理またはインポートする必要はありません。必要なのは、1つ以上の公開Googleカレンダー^{(Google Calendars)}だけです。その他の機能は次のとおりです。

• ショートコードでオプションを構成する
• 表示するアイテムの数を指定します
• 複数のカレンダーを埋め込む 

このプラグインにはAPIキー^{(API key)}が必要です。以下の手順に従って、次の手順を実行してください。

• GoogleDevelopersConsoleにアクセス^{(Google Developers Console)}
• サイドメニューから、APIと認証^{(APIs and auth)}>資格情報を確認します^(Credential)
• パブリックAPIアクセス^{(Public API access)}セクションから[新しいキーの作成^{(Create new key)}]ボタンをクリックします
• ブラウザキー^{(Browser key)}を選択し、リファラー制限^{(Referrer Limitation)}を空白のままにします
• このキーをプラグイン設定ページに配置します

イベントカレンダーWD^{(Event Calendar WD)}

^(Create)イベントプロモーションを^{(event promotion and manage)}作成し、イベントカレンダーWDを使用して^{(Event Calendar WD)}WordPressブログ^{(WordPress blog)}にイベントを管理または追加します。

WordPressエディター^{(WordPress editor)}を使用してイベントの詳細な説明を提供し、タグを付けて、それぞれにカテゴリを割り当てます。その他の機能は次のとおりです。

• Webサイトでのカレンダーとイベントの表示方法を完全に制御するためのユーザーフレンドリーなインターフェイス
• カレンダーを簡単にカスタマイズおよび管理
• 無制限の数のカレンダーとイベント
• すべてのイベントを最適化して、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カレンダー^{(Google Calendar)}を埋め込むことで大きなメリットが得られます。

カレンダーをWebサイトに直接統合すると、訪問者はサイトにとどまり、予約をしたり、イベントにサインアップしたりする可能性が高くなります。

必要なのは、インターネット接続、Webブラウザー^{(web browser)}、およびサイトでプロ並みのカレンダーを作成して表示するためのGoogleアカウントだけです。^{(Google account)}

How To Embed Google Calendar On Your Website

Do yоu need a professional-looking live calendar on your websitе to let visitors know about upcoming events or to schеdule an appointment? Instead of building something from scratch or uѕing some custom calendar app that might not get future 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を使用してFamilyをTimeに保持する方法

• Googleカレンダーイベントを作成するための2つのChromeアドレスバーのショートカット

• ウェブサイトのトラフィックを増やすためのGoogleAnalyticsユーザー調査方法

• GoogleシートにFilterする方法

• Google Sheets Drop Downリストの使い方

• Googleカレンダーが最高のオンラインカレンダーサービスである理由

• YouTube Premium Subscriptionをキャンセルまたは一時停止する方法

• Google Mapsで複数のStopsを使用する方法

• GmailでEmailを損なわない方法

• Google VoiceにVoicemailを設定する方法

• GoogleシートにLine Graphを作る方法

• Google Search Bar Widget Missing？ Androidで復元する方法

• Googleカレンダーを共有する方法

• Google Chrome and Howの拡張Protectionはそれを可能にするものです

• YouTube Algorithm Workはどうですか？

• 23の便利なGoogleカレンダーのキーボードショートカット

• Google DocsのCreate Bordersの3つの方法

• スケジュールのストレスを軽減するための10のGoogleカレンダーのヒント