【簡単】Googleカレンダーのサイト埋め込みとカスタマイズ方法を解説

「お客さまに営業日やイベント情報を分かりやすく共有したい」

「Webサイト上のスケジュールを、できるだけ手間なく更新したい」

このような場合に便利なのが、Googleカレンダーの埋め込み機能です。営業日・休業日・イベント・セミナーなどをGoogleカレンダーで管理しておけば、カレンダーを更新した内容がWebサイトの表示にも反映されます。ページごとにHTMLを書き換える必要がないため、店舗や中小企業、イベント運営の担当者にも扱いやすい方法です。

Google公式の埋め込みコードはiframe形式で、WordPressなどのWebサイトに設置できます。ただし、外部の人が閲覧することを前提に公開範囲を設計する必要があります。社内会議や顧客情報を含むカレンダーをそのまま公開せず、サイト掲載専用のカレンダーを作成しましょう。

また、予定を公開することと予約を受け付けることは別の用途です。営業日やイベント日程を見せる場合は公開カレンダーを埋め込み、来店・相談・商談などの予約を受け付ける場合は予約スケジュール（Appointment schedules）の予約ページを使います。従来のappointment slots（予約枠）は、2024年8月7日以降、新規作成も新規予約の受付もできないため、予約受付には予約スケジュールを利用します。

この記事では、GoogleカレンダーをWebサイトに埋め込む手順、WordPressでの貼り付け方、スマホ表示への対応、カスタマイズ、表示されない場合の対処法、予約スケジュールの活用方法、公開用カレンダーを継続して運用するためのポイントを解説します。

GoogleカレンダーをWebサイトへ埋め込む方法

まずは、GoogleカレンダーをWebサイトへ埋め込む基本的な手順を説明します。Google公式の案内では、埋め込みコードの取得はパソコン版のGoogleカレンダーで行います。

公開用のGoogleカレンダーを作成する

最初にGoogleカレンダーを開きます。画面左側の【他のカレンダー】にある【＋】から、【新しいカレンダーを作成】を選択してください。

カレンダー名と説明を入力し、【カレンダーを作成】をクリックします。たとえば店舗の営業情報なら「〇〇店｜営業日」、イベント情報なら「〇〇セミナー予定」のように、用途が分かる名前にしておくと管理しやすくなります。

実務では、社内用と公開用のカレンダーを分けることが重要です。公開用カレンダーには、営業日、休業日、一般公開するイベント、セミナーなど、外部に見せても問題ない予定だけを登録してください。

あわせて、公開用カレンダーの所有者を意識しておきましょう。Google Workspaceでこの手順で作成したカレンダーは「予備カレンダー（secondary calendar）」として扱われ、作成したユーザーが所有者になります。Googleは2026年10月5日、予備カレンダーが所有者アカウントのライフサイクルに従う変更の展開開始を発表しました。所有者のアカウントが削除されると予備カレンダーも削除され、アカウントが停止されるとカレンダーも停止されます。カレンダーを残すには、削除・停止より前に、管理コンソールまたはCalendar APIで所有権を移管する必要があります。

ほかのメンバーに編集権限を渡しているだけでは、所有者アカウントの削除への備えにはなりません。サイトに埋め込む公開用カレンダーは、担当者個人ではなく、退職や異動の影響を受けにくい業務用アカウントで所有するか、所有者と移管担当をあらかじめ決めておくと安心です。

公開設定を確認する

作成したカレンダーを選択し、【設定と共有】を開きます。埋め込み先でGoogleにログインしていない人にも予定を表示するには、対象カレンダーを一般公開するなど、閲覧者が表示できるアクセス権限を設定する必要があります。

【予定のアクセス権限】で一般公開に関する設定を確認し、表示する情報の範囲を用途に合わせて選択してください。イベント名や詳細を掲載する場合は、公開してよい情報だけが予定タイトル・説明・場所に入っていることを確認します。

一般公開した予定は、Webサイトの閲覧者以外にも参照される可能性があります。社内会議名、顧客名、担当者の個人名、電話番号、非公開イベントの内容などを含むカレンダーは公開しないでください。

公開用カレンダーの命名規則や登録ルールを決めておくと、事故を防ぎやすくなります。予定タイトルは「営業日」「臨時休業」「セミナー開催」のように統一し、個人情報や社内情報は記載しない運用がおすすめです。

埋め込みコードを取得してWebページに貼り付ける

対象カレンダーの【設定と共有】を開き、【カレンダーの統合】を選択します。表示される【埋め込みコード】をコピーし、カレンダーを表示したいWebページのHTML編集欄に貼り付ければ埋め込みは完了です。

同じ【カレンダーの統合】には、「このカレンダーの公開 URL」や「iCal形式の公開URL」も表示されます。前者はブラウザで閲覧してもらうためのURL、後者はカレンダーアプリで購読してもらうためのURLです。サイトに直接リンクを置く際の使い分けは、後述の「カレンダーへの直接リンクを設置する」で解説します。

Googleカレンダーの画面構成や名称は更新されることがあります。画面上の位置だけに頼らず、「カレンダーの統合」や「埋め込みコード」といった文言を目印に探すとよいでしょう。

複数のカレンダーをまとめて表示したい場合は、カスタマイズ画面で表示対象を選択できます。「営業日」「イベント」「セミナー」を別々に管理し、サイトでは一つのカレンダーとして見せる運用も可能です。

設置後は、ログアウト状態またはシークレットウィンドウでも表示を確認してください。管理者としてログインしている状態では見えても、一般の閲覧者には権限不足で表示されないことがあります。

WordPressにGoogleカレンダーを埋め込む方法

WordPressへの埋め込みでは、Google公式のiframeコードをそのまま利用する方法が基本です。通常は投稿または固定ページの【カスタムHTML】ブロックにコードを貼り付けます。

WordPress.com、セルフホスト型のWordPress.orgを問わず、利用中のプラン、投稿者権限、テーマ、セキュリティ設定によってiframeの扱いが異なることがあります。特定のブロックが使えることを前提にするよりも、保存後にiframeが残っているかを確認することが大切です。

1. カレンダーを表示したい投稿または固定ページを開く
2. 【カスタムHTML】ブロックなど、HTMLを入力できるブロックを追加する
3. Googleカレンダーで取得した埋め込みコードを貼り付ける
4. プレビューでPC・スマホの表示を確認し、問題がなければ公開または更新する

貼り付け直後には表示されても、保存後にコードやカレンダーが消える場合は、投稿者の権限、WordPressのプラン、セキュリティプラグイン、HTMLサニタイズ機能を確認してください。

iframeだけでは実現できないイベントの絞り込み、独自レイアウト、検索機能などが必要な場合に限り、プラグインや外部サービスを検討しましょう。導入する場合は、更新状況、サポート体制、公開情報の範囲を確認する必要があります。

Googleカレンダーをスマホ対応（レスポンシブ対応）にする方法

埋め込みカレンダーの見え方は、Googleカレンダー側の設定だけでなく、サイト側のiframeサイズやCSSにも影響されます。スマホで表示が崩れる場合は、カレンダーの公開設定、保存後にiframeが除去されていないか、親要素の幅やoverflow、iframeの高さを順に確認しましょう。

Google公式のカスタマイズ画面では、埋め込みサイズは幅・高さともに500以上が案内されています。特に月表示では高さが足りないと予定が見切れやすいため、まずは500px以上を目安に設定します。ただし、この設定値だけでスマホ対応が完了するわけではありません。スマートフォンでは画面幅が500px未満になることが多いため、固定幅ではなく親要素に合わせて横幅を伸縮させ、実機で確認することが重要です。

<div class="googleCalendar">
  <iframe src="埋め込みURL" title="営業日カレンダー"></iframe>
</div>

.googleCalendar iframe {
  display: block;
  width: 100%;
  max-width: 800px;
  min-height: 500px;
  border: 0;
}

@media (min-width: 960px) {
  .googleCalendar iframe {
    height: 600px;
  }
}

テーマによっては、コンテンツ領域の固定幅、iframeへの共通CSS、親要素のoverflow: hidden、余白などが原因で見切れることがあります。カレンダー単体だけでなく、設置先の親要素も確認しましょう。

イベント数が多い場合やスマホ閲覧が中心の場合は、月表示より予定を縦に確認できるスケジュール表示の方が見やすいことがあります。また、モバイルブラウザでは端末や認証・Cookieの状態によって表示が不安定になる場合があるため、埋め込みだけに依存せず、「このカレンダーの公開 URL」への直接リンクを併記しておくと安心です。

Googleカレンダーのカスタマイズ方法

埋め込みカレンダーでは、表示するカレンダー、サイズ、デフォルトの表示形式、言語、タイムゾーンなどを調整できます。対象カレンダーの【設定と共有】から【カレンダーの統合】を開き、カスタマイズ画面で設定してください。

画面の選択肢は更新される場合がありますが、主に次のような項目を確認できます。

• タイトル、ナビゲーション、日付、印刷アイコンなどの表示・非表示
• 幅・高さ
• デフォルトのビュー
• 週の開始日
• 言語とタイムゾーン
• 表示対象のカレンダー

表示項目を用途に合わせて整理する

店舗の営業日をシンプルに見せる場合は、不要なメニューや表示項目を減らすと、閲覧者が必要な情報を探しやすくなります。一方で、イベント情報を確認してもらう場合は、日付移動や表示切り替えなどの操作を残した方が便利なこともあります。

ナビゲーションボタンを非表示にすると、閲覧者が日付を移動しにくくなる可能性があります。見た目を簡潔にするためだけに操作ボタンを削除せず、マウス・タッチ操作を利用する閲覧者も含めて操作性を確認してください。

幅・高さを調整する

埋め込みコードの幅・高さは、カスタマイズ画面やサイト側のCSSで調整できます。カスタマイズ画面では公式が案内する500以上を初期値の目安にし、実際のページ幅と予定数に応じてサイト側のCSSで調整してください。月表示では高さが不足すると予定が省略されやすいため、予定の多い月を表示して見切れがないかを確認すると確実です。

デフォルトのビューを選ぶ

営業日や休業日を月単位で見せるなら【月】表示、イベントやセミナーを時系列で案内するなら【スケジュール】表示が向いています。スマホでの閲覧が多いページでは、縦に予定を確認できるスケジュール表示が使いやすい場合があります。

週の開始日・言語・タイムゾーンを設定する

週の開始日は、閲覧者にとって見慣れた形式を選びます。日本国内向けの店舗サイトでは日曜日始まり、ビジネス用途や海外向けページでは月曜日始まりが適する場合があります。

言語はサイトの対象ユーザーに合わせて設定してください。埋め込みカレンダーのタイムゾーンは表示用に1つ設定する形のため、海外の参加者がいるオンラインイベントでは、予定タイトルや説明欄にも「JST」「日本時間」「UTC」などを明記すると誤解を減らせます。

Googleカレンダーがスマホで表示されない場合

スマホ、とくにモバイルブラウザでは、ブラウザの仕様、認証状態、Cookie、サイト側のCSSなどが影響し、埋め込みカレンダーが表示されない、表示が崩れる、認証画面が繰り返されるといったことがあります。

トラブル時は、次の順番で確認すると原因を切り分けやすくなります。

1. 対象カレンダーの一般公開設定と予定のアクセス権限を確認する
2. WordPressで保存後にiframeが除去されていないか確認する
3. iframeの幅・高さ、親要素の幅、overflow、テーマのCSSを確認する
4. キャッシュ、CDN、最適化プラグインを一時的に切り分ける
5. 別のブラウザ、ログアウト状態、シークレットウィンドウ、別端末でも表示を確認する
6. 「このカレンダーの公開 URL」への直接リンクを設置する

カスタマイズ条件を変更した場合は、埋め込みコードを再取得して貼り替えます。ただし、古いコードであることだけをスマホ表示不良の原因と決めつけず、公開設定やiframeの除去、CSSなどを先に確認することが重要です。

なお、以前は表示されていたカレンダーが急に見られなくなった場合は、公開用カレンダーの所有者アカウントが停止・削除されていないかも確認してください。Google Workspaceでは、予備カレンダーは所有者アカウントの状態に連動します。

【推奨】カレンダーへの直接リンクを設置する

実用的な対策は、埋め込みカレンダーの近くに「Googleカレンダーで開く」「カレンダーが表示されない方はこちら」といったリンクまたはボタンを置くことです。

リンク先には、【設定と共有】→【カレンダーの統合】に表示される「このカレンダーの公開 URL」を使います。一般公開したカレンダーであれば、閲覧者はGoogleアカウントへのログインや登録をしなくても、ブラウザで予定を確認できます。埋め込み表示で問題が起きても、閲覧者が予定を確認する導線を残せます。

カレンダーアプリで予定を購読してもらいたい場合は、閲覧用とは別に「iCal形式の公開URL」を案内します。閲覧用の公開URLと購読用のiCal URLは用途が異なるため、「共有リンク」とひとまとめにせず、「ブラウザで見る」「カレンダーアプリに追加する」のようにボタンの文言を分けると迷わせません。

個別の予定ごとの公開リンクは、モバイルのカレンダーアプリで詳細が正しく読み込まれない場合があります。スマホ向けの代替導線としては、個別予定のリンクではなくカレンダー全体の公開URLを基本にしましょう。

別のブラウザ・Cookie設定を確認する

ブラウザやCookieの状態によって改善する場合もあります。ただし、閲覧者にプライバシー保護を弱める設定変更を一律に求めるのは適切ではありません。ブラウザ変更やCookieの確認は補助的な対処とし、サイト側では直接リンクを用意することを優先しましょう。

公開設定を見直す

「権限がない」「予定を表示できない」と表示される場合は、対象カレンダーの共有範囲や公開設定を確認します。【設定と共有】の【予定のアクセス権限】で、埋め込み先の閲覧者が表示できる設定になっているか確認してください。

設定を変更する前に、公開される予定の内容を見直しましょう。顧客名、社内情報、非公開会議などが含まれる場合は、公開用カレンダーを別に作成するのが安全です。

「予約スケジュール」でWebから予約を受け付ける

営業日やイベント予定を見せるだけでなく、Webサイトから予約を受け付けたい場合は、Googleカレンダーの予約スケジュール（Appointment schedules）を利用します。

従来のappointment slots（予約枠）は、2024年8月7日以降、新規作成も新規予約の受付もできません。過去に成立した予約はカレンダー上に残りますが、旧予約枠のページから新しい予約は入りません。サイトに旧予約枠へのリンクが残っている場合は、予約スケジュールで予約ページを作成し、ボタンやリンクの遷移先を切り替えてください。

予約スケジュールでは、予約可能な曜日・時間帯・所要時間を設定し、専用の予約ページを作成できます。ユーザーは空いている時間を選んで予約でき、予約内容はGoogleカレンダーに反映されます。予約ページはリンクで共有できるほか、Webサイトへ埋め込むこともできます。

来店予約、オンライン相談、商談、個別面談、レッスン、オンボーディングなどでは、公開カレンダーではなく予約ページを使うと分かりやすく安全です。Webサイトには「予約する」ボタンを設置し、公開予定のカレンダーとは別の導線にしましょう。

Googleの予約スケジュールとは別に、外部の予約サービスを使う方法もあります。たとえばJicooでは、2026年9月8日に予約ページなどへ入力支援機能（リアルタイムのエラー表示、半角変換、フリガナ入力支援、入力途中保存）を追加しました。2026年9月時点でBusiness以上のプランが対象で、入力途中保存はブラウザ内に24時間保持され、予約日時などは保存対象外です。これらはJicooの機能であり、Googleの予約スケジュールの機能ではありません。国内向けの相談予約では、予約枠の表示だけでなく、氏名・メールアドレス・フリガナの入力のしやすさもスマホ実機で確かめておくと、入力ミスによる確認の手間を減らしやすくなります。

予約ページの運用アカウントを確認する

予約ページは社外のユーザーが利用する導線です。個人用アカウントをそのまま接客予約に使うのではなく、会社名や店舗名で管理する業務用アカウントを利用することをおすすめします。

公開前には、ログアウト状態またはシークレットウィンドウで予約ページを確認しましょう。担当者個人に依存した運用では、異動・退職時に引継ぎ漏れが起こりやすくなります。予約ページの所有者、編集者、予約変更・キャンセル通知の担当者をあらかじめ決めておくことが大切です。

利用できるプラン・機能を確認する

個人アカウントでも予約ページを1つ作成できますが、利用できる機能には制限があります。複数の予約ページ、複数カレンダーを使った空き時間の確認、リマインダー、支払い、メール検証などは、対象のGoogle WorkspaceまたはGoogle Oneプランが必要です（対象プランの詳細は公開時点で要確認）。

予約受付を設計する際は、必要な機能を先に洗い出しましょう。たとえばB2B商談では前後の準備時間を確保するバッファ設定、繁忙期には予約可能期間や例外的な受付停止、有償相談では支払い機能、迷惑予約が懸念される場合はメール検証が役立ちます。

利用可否は契約しているエディションによって異なるため、導入前にGoogle公式ヘルプと管理画面で対象プランを確認してください。

予約可能な時間が表示されない場合

予約枠が表示されない場合は、予約受付期間、1日の予約上限、予約可能な曜日・時間帯、バッファ時間、空き確認の対象カレンダーを確認します。「予定あり（Busy）」の通常予定は予約可能時間から除外され、「予定あり」の終日予定がある日は予約枠がすべて非表示になることがあります。

日本企業でよくある、終日予定を仮押さえ代わりに登録する運用は、空いているはずの時間が予約ページに出ない原因になり得ます。仮押さえの方法や予定の公開状態をチームで統一しましょう。

複数カレンダーをまたいだ空き状況の確認では、チェック対象にできるカレンダーや機能がプランにより異なります。役員・営業・サポートなど複数の予定表を使う場合は、どのカレンダーを空き確認の対象にするかを決め、公開前に実際の予約ページでテストしてください。

チーム運用や海外との予定調整で役立つ使い方

公開用カレンダーの更新ルールを決める

サイト更新担当者とカレンダー更新担当者が異なる場合は、誰が祝日、臨時休業、営業時間変更、イベント中止を反映するのかを決めておきましょう。Googleカレンダーを更新すればサイト表示にも反映されますが、担当が曖昧だと古い予定が残る原因になります。

更新担当とあわせて、公開用カレンダーの所有者と退職・異動時の移管担当も決めておきます。Google Workspaceでは、所有者アカウントを削除・停止すると公開用の予備カレンダーも削除・停止されるため、アカウントを削除・停止する手続きの前に所有権を移管する手順を、退職時のチェックリストに組み込んでおくと安心です。移管後は、ログアウト状態でサイトの埋め込み表示と「このカレンダーの公開 URL」の両方が引き続き見られるかを確認しましょう。

公開用カレンダーには社内会議名、顧客名、担当者の個人名を入れないルールを設けると安全です。公開範囲を変更する際は、予定タイトル・説明・場所・添付情報に公開してはいけない内容がないか確認する手順も用意しましょう。

Googleカレンダーを原価管理、営業支援、AIエージェントなどと連携する場合、予定タイトルの表記揺れは集計・分類精度に影響します。社内・連携用のカレンダーでは「顧客名｜案件名｜活動種別」のような命名ルールや案件コードを決めておくと、後工程でデータを利用しやすくなります。ただし、顧客名や案件名を含む予定は公開カレンダーに入れず、公開用・社内用・連携用を分けてください。

外部SaaSとの連携遅延・重複登録に注意する

予約システム、受付システム、会議室管理SaaSなどとGoogleカレンダーを連携する場合、障害やAPI処理の遅延によって予定の反映が遅れることがあります。どのシステムを正とするかを決め、重要な予約は管理画面とGoogleカレンダーの件数を定期的に照合してください。

導入時には、予約の作成・変更・キャンセルの3パターンをテストし、同じ予定が重複作成されないかも確認します。重要な予約では顧客への確認メールを最終的な証跡として残すと安心です。

外部の予約ページをサイトに埋め込んでいる場合は、サービス側の画面更新にも備えておきましょう。たとえばJicooは、2026年10月5日からIndividualプランを皮切りに、公開予約ページとサイト埋め込みウィジェットのデザインを順次変更し、日時選択後の入力画面をダイアログ形式にすると告知しています。既に設置している埋め込みコードとURLは変更不要とされています。このように表示だけが変わった場合は、コードを貼り直す前に、スマホ幅で「日時選択→フォーム入力→予約完了」まで操作し、埋め込み枠の高さ、ダイアログの見切れ、ページ内に掲載している操作説明が新しい画面と合っているかを点検してください。

海外との予定共有ではタイムゾーンを確認する

海外の取引先や参加者と予定を共有する場合、タイムゾーンの設定ミスは大きなトラブルにつながります。海外向けのウェビナーや国際イベントでは、カレンダーの設定だけでなく、予定の説明文にも日本時間やUTCなどを明記してください。

日程調整の段階では、Web版Googleカレンダーで最大3つのタイムゾーンを並べて表示できるようになりつつあります。Googleが2026年9月25日に発表した機能で、予定表のグリッドと「Find a Time」で、たとえば日本時間・取引先の所在地・海外拠点の3地域を同時に確認できます。2026年10月時点では段階的に展開中のため、すべての利用者に表示されているとは限りません。また、これは編集・調整に使うGoogleカレンダーのWeb画面の機能であり、サイトに埋め込んだカレンダーを3つのタイムゾーンで表示する機能ではありません。

役員や担当者の予定を秘書・代理人が管理する場合は、個人アカウントのパスワードを共有せず、Googleカレンダーの共有・代理編集権限を利用します。予約ページと代理編集を併用する場合は、予約変更・キャンセルの通知を誰が担当するかも決めておきましょう。

Googleカレンダーをサイトに埋め込むときの注意点

Googleカレンダーの埋め込みは手軽ですが、ビジネス利用では公開範囲と所有者の管理が欠かせません。Webサイトに表示するカレンダーには、公開して問題のない予定だけを登録しましょう。社内用と公開用を分け、予定タイトル・説明欄・場所の記載ルールを整えたうえで、公開用カレンダーの所有者と移管担当を明確にしておくことが重要です。

公開・予約用のアカウントは外部からの招待を受ける機会もあります。不審な招待はリンクや添付ファイルを開かず、必要に応じて送信者をブロックしてください。Google Workspaceを利用している場合は、管理者が招待をカレンダーへ自動追加する設定を組織のルールに沿って管理しましょう。

この招待の受信設定は、Webサイトに埋め込む公開カレンダーの表示権限とは別の設定です。「不審な予定が追加された」問題と「カレンダーがサイトで見えない」問題を混同せず、別々に確認してください。

予約受付との切り分けも必要です。営業日やイベント予定の案内は公開カレンダー、来店・相談・商談の受付は予約スケジュールの予約ページというように、用途別に設計してください。これにより、空き時間や社内予定を意図せず公開するリスクを下げられます。

WordPressでは利用環境に応じたブロックと権限を確認し、埋め込みカレンダーだけに頼らず、「このカレンダーの公開 URL」への直接リンクや予約ページへのボタンを設置しましょう。モバイル環境や閲覧者の設定による表示差があっても、予定確認や予約の導線を確保できます。

GoogleカレンダーをWebサイト運用に活用しよう

GoogleカレンダーをWebサイトに埋め込むと、営業日、休業日、イベント、セミナーなどを手軽に共有できます。カレンダー側を更新するだけでサイト上の予定にも反映できるため、日々の更新負担を減らせます。

埋め込みコードはパソコンで取得し、公開設定を確認したうえで設置します。スマホで見やすくするには、Googleのカスタマイズ画面で案内される幅・高さ500以上を目安にしつつ、サイト側の親要素、iframeの高さ、表示形式を実機で確認しましょう。表示不良時は、公開設定、保存後のiframe、CSS、キャッシュ、ブラウザ環境の順に切り分け、閲覧用の公開URLへの直接リンクも用意しておくと安心です。

予約を受け付ける場合は、埋め込みカレンダーや旧予約枠ではなく予約スケジュールなどの予約ページを使い、公開予定の案内と予約受付を分けて設計してください。まずは、サイト掲載専用の公開カレンダーを作成し、その所有者と退職・異動時の移管担当を決めるところから始めてみましょう。