読者です 読者をやめる 読者になる 読者になる

エンジニアをリングする

プログラをミングしたり。

my web site twitter

Googleカレンダーへ予定追加するリンクのURL

JavaScript

ひとつのイベントの追加ボタンならボタンジェネレータに各項目入れて〜とかあると思うんですが、動的に出したい場合もあると思うので各パラメータと生成JSコードをメモ。

各パラメータとURL生成コードについてはこちらの投稿を参考にさせていただきました。
Googleカレンダー追加ボタンの作り方 - not good but great

Googleカレンダーへの予定追加ボタン、探しても意外とあまり情報がない中、上記ポストがとてもありがたかったです。

サンプル

予定追加URLを生成するJSコードは以下。

日時の整形処理がごちゃつくので関数に切り出しています。
私の場合、日時が文字列(例:'2014-01-31T21:30:00+09:00')で手に入る形だったので getUTCの引数は文字列で渡す仕様になってますが、dateオブジェクトがあればそれ渡す形にしてもいいと思います。

URLパラメータの日時の表記は、たとえば2014/2/14 19:30〜21:00なら
20140214T103000Z/20140214T120000Z
の形で、開始日時と終了日時を/で区切って渡します。
このとき時間はUTCなので日本での実際の時間より9時間早い時間になってますが、それで大丈夫です。

生成されるURLは

http://www.google.com/calendar/event
?action=TEMPLATE
&text=%E4%BA%88%E5%AE%9A%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB
&details=%E4%BA%88%E5%AE%9A%E3%81%AE%E8%AA%AC%E6%98%8E
&location=%E5%A0%B4%E6%89%80
&dates=20140131T103000Z/20140131T123000Z
&trp=false
&sprop=%E3%83%AA%E3%83%B3%E3%82%AF%E8%A8%AD%E7%BD%AE%E5%85%83%E3%81%AEURL
&sprop=name:%E3%83%AA%E3%83%B3%E3%82%AF%E8%A8%AD%E7%BD%AE%E5%85%83%E3%81%AE%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E5%90%8D

になります。(URL見やすいように改行してますが実際は一行です)

さきほどの生成用コード、gistにあげてますのでよろしければ。

そして、何のために調べてたかというと、先日公開したおれおれ勉強会カレンダーの予定詳細ポップアップに「Googleカレンダーへ追加」ボタンを設置するためでした。
無事設置できましたのでそちらもよろしければ。
IDいれて予定表示したあとに予定タイトルをクリックするとポップアップがでますよん。