【最新版】WebサイトにGoogleカレンダーを数か月分表示する方法

あ～Googleカレンダーの公開URLを取得するだけで、翌月のカレンダーを表示する埋め込みコードができるツールが欲しい！
と思ったとき、探すより早く作れるのがAIの良いところです。
経緯や説明はいいから、とにかく早く便利なツールを使いたい人はボタンクリック👆

お久しぶりです。あっという間に一年が終わろうとしていますね。
今年は私にとって、楽しいことや、学ぶべきことが多くて、他の年よりも早く感じられる一年でした。その中でも、開業して間もなく入会した士業勉強会である「ナレッジクロス」の本部運営に関われるようになったのは、とても大きな出来事でした。

ナレッジクロスの勉強会を見学していただくにあたり、開催日の日程をGoogleカレンダーで確認してもらえるようにしています。
基本的には毎月第二火曜日、オンライン配信がメインです。
2026年1月は新年会もかねて、リアル＋オンラインのハイブリッド開催になりますので、興味がある方はぜひご参加いただければと思います！

Googleカレンダーを埋め込む方法は簡単

さて、店舗経営をされている方は、営業日を登録しているカレンダーをWebサイトに登録したいと考える人も多いのではないでしょうか。
毎回Webサイトを更新しなくても、Googleカレンダーなら自動的に毎月を表示してくれるので楽ですよね。
WordPressなどのコンテンツでGoogleカレンダーを表示される方法は結構簡単です。

【1】Googleカレンダーの設定を開く

【2】マイカレンダーの設定から表示させたいカレンダーを選択

【3】予定のアクセス権限を「一般公開して誰でも利用できるようにする」に変更
※変更しないと予定の内容が表示されません。
※枠の太さやカレンダーの色、週ごとか月ごとか等もこのページでカスタマイズしましょう。

【4】埋め込みコード（<iframe src=~”)をコピーする

【5】WordPressの場合は「ショートコード」「カスタムHTML」などのブロックを選択し、
コピーしたショートコードを貼り付ける。

完成！Googleカレンダー側が用意してくれているコードを貼るだけで良いので、すごく楽に対応できました。

ところが「今日の翌月」のカレンダーを表示させるのは案外大変。

ここまでやって、翌月もどこかで設定すれば出るようになるかな～と思っていました。
しかし、現時点（2025年11月）では、Googleカレンダー側の設定に翌月を表示させる機能は実装されていません。
そのうちされるといいなと思いながら、表示させる方法を模索しました。
参考にしたサイトはにこりさんのサイトです。とても分かりやすくまとめられていました。

やり方ですが、どうやらJavascriptで表示月を変えているようです。Javascriptとはなんぞや？
→Javascriptは「Webページに動きをつけるためのプログラミング言語」です。Webサイトって一度更新するとずっと同じ表示を続けますが、
ここにJavascriptを組み込むと、サイトに動きを出したり自動で日付を更新したりしてくれる便利な奴です。
このサイトで言うとTOPページの動いているところなんかもJavascriptです。

どこを「動的」にするか？

今回動的にしたいのは、埋め込んだGoogleカレンダーの埋め込みコードです。「<iframe~」から始まってたやつですね。
この埋め込みコードには、私たちが設定した情報がコードとして載っているんです。
中身は大体こんなつくりです。（実際の値を改変しています）

①と②はGoogleカレンダーを載せるためのタグと表示するためのURLです。ここは変えられません。
③は、カレンダーを設定するたびにパラメータが変わります。つまり、ここに「翌月を表示する」パラメータをJavascriptで埋め込むことができれば
翌月のカレンダーを表示できるというわけです。

実際に作成したコードがこちら（翌月表示）

 // 埋め込みコード id="gcal-next" で名前を付けている
<iframe id="gcal-next" 
        style="border: 0" width="100%" height="280" 
        frameborder="0" scrolling="no"></iframe>

<script>
(function() {

  // ①今日 → 翌月
  const now = new Date();
  let year = now.getFullYear();
  let month = now.getMonth() + 2;  // 翌月（+1ではなく +2）
  
  //② 年超え対応
  if (month === 13) {
    month = 1;
    year += 1;
  }

  // ③桁調整
  const mm = ("0" + month).slice(-2);

  // ④翌月1日
  const start = `${year}${mm}01`;

  // ⑤翌月末日
  const lastDay = new Date(year, month, 0).getDate();
  const end = `${year}${mm}${("0" + lastDay).slice(-2)}`;

  // ⑥完成形の URL　baseとparamsの値を決めている
  const base = "https://www.google.com/calendar/embed";
  const params =
    `?src=あなたのGmailアドレス` +
    `&showTitle=0&showNav=0&showPrint=0&showTabs=0` +
    `&showCalendars=0&showTz=0&ctz=Asia/Tokyo` +
    `&dates=${start}/${end}`;

  // iframe 名前が"gcal-next"のところ へ①～⑥の式を反映
  document.getElementById("gcal-next").src = base + params;

})();
</script>

使い方

WordPressでは、「カスタムHTML」のブロックを使って張り付けるだけです。

試してみたいという方へ

埋め込みコードを貼り付ければ翌月のカレンダーを作ってくれるフォームを作成しました。
あなたのGoogleカレンダーの埋め込みコードを貼り付けて「翌月表示に変換」をクリックしてください。
出力された下側のコードをあなたのサイトに埋め込めば、翌月のカレンダーが表示されるようになります。
ぜひ使ってみてくださいね！

翌月表示に変換

この一年、怒涛の勢いでいろいろなことに取り組みましたが、その中ではっきりと感じていることがあります。
「良い人から紹介される人は、例外なく信頼できる人である」ということです。

人は、自分と価値観の近い人を無意識に選び、紹介しています。
そのため、誰から紹介を受けているかを見れば、その人がどのような姿勢で仕事をしているかは、ある程度わかります。

「人は開業後に親しくする5人で、働き方や考え方の方向性が決まる」と言われています。
これは精神論ではなく、日常的に接する人の発言や判断基準が、そのまま自分の基準になるからです。

環境を選ぶことは、運に任せる話ではありません。
どのような人と付き合うかは、自分で設計できます。

同時に重要なのは、良い環境に「所属する」ことではなく、「享受する」だけでもなく、
その環境に対して「自分がどんな価値を提供できるか」を考えることです。
情報を返せる人、信頼を積み重ねられる人、相談される存在になれる人は、
自然と良い縁に囲まれるようになります。

良禽は木を択んで棲むと言いますが、
選ばれる “木” になることも、専門家としての仕事の一部ではないでしょうか。

士業の職域ではないところでも、ちょっと活躍してみたい。そんな方にもこの記事が届くと良いなと思っています。