Add-to-Calendar Button
Add-to-Calendar Buttonはカレンダーサービスに任意のイベントを追加するボタンを設置する為のJavaScriptです。
上サンプルのようにマウスホバーすると各カレンダーサービスが表示され、クリックでイベントを追加できる、というもの。使い方も難しくないので導入しやすそうです。
<script src="atcb.min.js" defer></script> <link rel="stylesheet" href="atcb.min.css">
JSとCSSを読み込んで以下のようなHTML要素を加えれば完了です。
<div class="atcb" style="display:none;">
{
"title":"Reminder to check the add-to-calendar-button repo",
"description":"Check out the maybe easiest way to include add-to-calendar-buttons to your website at: https://github.com/jekuer/add-to-calendar-button",
"dateStart":"01-14-2022",
"dateEnd":"01-18-2022",
"timeStart":"10:15",
"timeEnd":"23:30",
"location":"World Wide Web",
"options":[
"Apple",
"Google",
"iCal",
"Microsoft365",
"Outlook.com",
"Yahoo"
],
"timeZone":"Europe/Berlin",
"iCalFileName":"Reminder-Event"
}
</div>要素にclass="atcb"を与えてdisplay:none;しておき、直接JSONを書き込めばあとはJSが処理してくれます。
対応するカレンダーサービスを変える必要がありますがイベントサービスや会議系のサービス等に導入するとユーザーに喜んでもらえそうでしょうか。ライセンスはGPL-3.0です。