FullCalendar の使い方とカスタマイズ例を紹介する。
手順
1. APIキーの取得
Google Cloud Platformにアクセスし、（メニュー）-->「APIとサービス」-->「ライブラリ」
-->「Google Calendar API」
-->「有効にする」
左上にプロジェクト名が表示されていることを確認（プロジェクトが作成されていなければ、新規プロジェクトを作成）-->（メニュー）-->「APIとサービス」-->「認証情報」
-->「認証情報を作成」-->「APIキー」
APIキーが生成されたら、キーを制限する
2. FullCalendar を使う
初期化
次のいずれかの方法で標準の fullcalendar バンドルを入手する。
Download: fullcalendar-5.9.0.zip
CDN: jsdelivr
NPM: npm install fullcalendar
それから、次のように初期化コードを書く。
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<link href='fullcalendar/main.css' rel='stylesheet' />
<script src='fullcalendar/main.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth'
});
calendar.render();
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
デモページ
この fullcalendar バンドルの main.js と main.css は次のパッケージを含む：
@fullcalendar/core
@fullcalendar/interaction（for date selecting, event dragging & resizing）
@fullcalendar/daygrid（for month and dayGrid views）
@fullcalendar/timegrid (for timeGrid views)
@fullcalendar/list（for list views）
@fullcalendar/bootstrap（requires 3rd-party Bootstrap/FontAwesome packages. more info）
@fullcalendar/google-calendar（more info）
3. カスタマイズ例
See the Pen
Customize Google Calendar by Probability Hill (@probabilityhill)
on CodePen.
↧