カレンダーサービスに任意のイベントを追加するボタンを設置する為のJavaScript・「Add-to-Calendar Button」

Ads

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要素を加えれば完了です。

Ads
<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です。

Add-to-Calendar Button