カレンダーアプリに予定を追加するボタンをWebサイトに設置するには

イベント情報の告知ページや何かしら（映画でも美容院でも）の予約完了ページに「この予定をカレンダーアプリに追加する」ボタンがあったら便利だと思うんです。

「あとで追加しておこう」と思っても絶対忘れるし、タイトルも日付も時間も全部入力されていてポチッと追加できたらきっと便利。

というわけで、主要なカレンダーアプリ、予定管理アプリに予定を追加できるボタンをWebサイト上に設置する方法をまとめました。TimeTreeとGoogleカレンダーとYahoo! カレンダーです。

イベント主催者様や予約ページの管理者様におかれましては、ぜひとも予定追加ボタンを設置することをご検討くださいませ。私がほしいから。

（※この記事の情報は2020年12月時点のものです。仕様は変更される可能性があります）

TimeTreeの場合
- ジェネレータでボタンを作る
- 自分でカスタマイズしたボタンを作る
Googleカレンダーの場合
- カレンダーの一般公開
- 予定追加ボタンの作成
Yahoo! カレンダーの場合
- カレンダー登録ボタン作成フォームで作る
- 自分でhtmlを書いて作る

TimeTreeの場合

カレンダーシェアアプリ「TimeTree」では、Web上のジェネレータでボタンを作ることもできるし、自分でリンクボタンを作ることもできます。

ジェネレータでボタンを作る

予定追加ボタンのジェネレータが公式で用意されているので、予定のタイトルや日時を入力するだけでボタンのコードを生成できます。オプションとしてメモや場所、サイトURLも入力可能です。

▼TimeTreeの予約追加ボタンジェネレータ

予定ボタン - TimeTree Developer Platform

自分でカスタマイズしたボタンを作る

ボタンの見た目をカスタマイズしたい場合やアプリにボタンを埋め込みたい場合は、予定追加用URLとパラメータを利用できます。

予定追加URLのサンプル

https://timetr.ee/ne?category=1&title=●●●&start_at=▲▲▲&end_at=■■■

上記URLにアクセスさせると予定追加できます。パラメータの●●●のところにはタイトル、▲▲▲には開始日時、■■■には終了日時を入れておきます。日時はISO8601形式で指定します。

たとえばこんな感じ

このイベントの予定をカレンダーに追加する

▼上記リンクのhtmlコード

<a href="https://timetr.ee/ne?category=1&title=%E3%83%86%E3%82%B9%E3%83%88%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88&start_at=20210821T100000&end_at=20210821T120000&note=%E3%81%93%E3%82%8C%E3%81%AF%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E7%94%A8%E3%81%AE%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%A7%E3%81%99">このイベントの予定をカレンダーに追加する</a>

「このイベントの予定をカレンダーに～」のテキストのところを画像にするなり色々いじれば、好きなようにカスタマイズできます。

パラメータは他に「note（メモ）」「location（場所）」「url（URL）」「all_day（終日の予定かどうか、0 or 1）」なども利用可能です。詳しくは上記URLのジェネレータの下に仕様が書いてあるのでそっちを確認してください。

Googleカレンダーの場合

事前にGoogleアカウントを作って、そのアカウントのGoogleカレンダーを一般公開する必要があります。ので、個人で使っているアカウントとは別にイベント告知用のアカウントを取得するのがおすすめです。

カレンダーの一般公開

1. 画面上部の⚙→[設定]をクリック

2.左メニューの[マイカレンダーの設定]から一般公開したいカレンダー名をクリック

3.[アクセス権限]の項目の「一般公開して誰でも利用できるようにする」にチェックを入れる（「予定の表示（すべての予定の詳細」を選択）

一般公開して誰でも利用できるようにする

※モバイルアプリからは設定できないので、PCでやる必要があります

予定追加ボタンの作成

1.ボタンで追加させたいイベントの予定を一般公開したカレンダーに登録。日時やイベント名、場所など、追加させたい項目を入れておきます。

2.作成したイベントをクリックし、[オプション]から「予定を公開」を選択

3.予定追加ボタンのhtmlとURLが表示されます

このhtmlをそのまま使うか、自分で作ったボタンのリンク先をこのURLにすればOK

予定を公開

Yahoo! カレンダーの場合

Yahoo! カレンダーにもボタン作成フォームが用意されています。自分でカスタマイズしたボタンを作ることもできます。

カレンダー登録ボタン作成フォームで作る

▼Yahoo! カレンダーのカレンダー登録ボタン作成フォーム

https://calendar.yahoo.co.jp/info/guide/generate02.html

必要事項を入力すると、ボタンを表示するためのhtmlタグを生成してくれます。ボタンの見た目も選ぶことができます。イベント名と日時の他、場所やURL、メモなどを登録することができます。

自分でhtmlを書いて作る

自分でhtmlを書いてカスタマイズしたボタンを作ることもできます。

予定追加URLのサンプル

パラメータは

「V=60」と「TITLE（タイトル）」「ST（開始時間）」「ENC（文字コード）」が必須
「ET（終了日時）」と「DUR（予定の期間）」のどちらか片方が必須
その他はオプション

となっています。

設定できるパラメータは以下の通りです。

詳細はYahoo! カレンダーの使い方ガイドにある一覧をご覧ください。

https://calendar.yahoo.co.jp/info/guide/generate03.html

▼使えるパラメータ一覧

TITLE：タイトル
ST：開始日時
ET：終了日時
DUR：予定の期間
IN_LOC：場所
URL：予定に関連するURL
DESC：予定の詳細
ENC：文字コード

以上、3つのカレンダーアプリ用の「予定をカレンダーに追加するボタン」をサイト上に設置する方法をご紹介しました。

サイトを見てる方は興味あるイベントを忘れたり逃したりすることがなくて便利だし、主催側としても集客につながってwin-winだと思うので、ぜひボタンを用意していただけますと嬉しい限りです。

びびび備忘録

日々過ごしていて困ったことや何とか解決できたことを共有します