WebページにGoogleカレンダー追加ボタンをつける

はじめに

イベントや勉強会のページで「Googleカレンダーに追加」ボタンをよく見るので、自分でもつけてみた。

環境

HTML

使い方

Googleカレンダーは、特定のパラメータを付けたURLを開くとイベント追加画面が出てくる。

公式: Googleカレンダーヘルプ - イベントへのリンクを作成する

URLの形

https://www.google.com/calendar/render?action=TEMPLATE&text=タイトル&dates=開始日時/終了日時&details=詳細&location=場所&trp=false

パラメータはこんな感じ。

パラメータ	説明
`text`	イベントタイトル
`dates`	開始/終了日時（例: `20260301T090000Z/20260301T100000Z`）
`details`	詳細
`location`	場所

HTMLサンプル

<a href="https://www.google.com/calendar/render?action=TEMPLATE&text=サンプルイベント&dates=20260301T090000Z/20260301T100000Z&details=このイベントの詳細です&location=オンライン&trp=false" target="_blank" rel="noopener noreferrer">
	<img src="/image/tech/tips/gen-google-calendar-button/google-calendar-button.png" alt="Googleカレンダーに追加" style="height:40px;vertical-align:middle;"> Googleカレンダーに追加
</a>

画像はGoogleカレンダーのロゴとか好きなものを使う。

パラメータのエンコード

日本語や記号はencodeURIComponentでエンコードする。

encodeURIComponent('サンプルイベント') // → %E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88

JavaScriptで動的に作る例

<button id="add-gcal">Googleカレンダーに追加</button>
<script>
	document.getElementById('add-gcal').onclick = function() {
		const title = encodeURIComponent('サンプルイベント');
		const start = '20260301T090000Z';
		const end = '20260301T100000Z';
		const details = encodeURIComponent('このイベントの詳細です');
		const location = encodeURIComponent('オンライン');
		const url = `https://www.google.com/calendar/render?action=TEMPLATE&text=${title}&dates=${start}/${end}&details=${details}&location=${location}&trp=false`;
		window.open(url, '_blank', 'noopener');
	};
</script>

参考

Googleカレンダーヘルプ - イベントへのリンクを作成する https://support.google.com/calendar/answer/41207?hl=ja

おわりに

最近よくGoogleカレンダーを使用しているので、イベント開催のWebページとかに置いてほしいなと思い、自分で調査してみた。
Googleカレンダーへの追加ボタンがサイトで対応していないときに、PC/スマホ両対応で自動的にカレンダーのボタンを追加してくれるみたいな拡張機能があったら便利そうだなと思ったので、今度つくってみようかな。
イベントのページを作るときに、Googleカレンダーへの追加ボタンをつけると、参加者が簡単に予定に追加できて便利だと思う。