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

Add-to-Calendar Button

See the Pen <a href="https://codepen.io/kachibito/pen/bGrzjNo"> Untitled</a> by kachibito (<a href="https://codepen.io/kachibito">@kachibito</a>) on <a href="https://codepen.io">CodePen</a>.

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>