FullCalendar導入手順
目次
1.概要
HTMLとJavaScriptを用いたWebアプリケーションにカレンダー表示機能を実装するため、FullCalendarライブラリを導入する。公式サイトから必要なファイルを取得し、ローカル環境に配置したうえで、HTMLとJavaScriptを用いた最低限の表示設定を行う。さらに、実際に使用したカレンダー表示のオプション設定や表示形式のカスタマイズ内容についても紹介する。
2.FullCalendarダウンロード
FullCalendarの公式サイトにある右上のGitHubアイコンをクリックしてGitHubに遷移する。
FullCalendar公式サイト：https://fullcalendar.io/
GitHubからダウンロードしたいバージョンを選択してダウンロードする。（今回はfullcalendar-6.1.15.zipをダウンロード）
ダウンロードしてきたzipファイルを解凍し、解凍したフォルダを今回FullCalendarの表示を行うhtmlファイルと同じ階層に配置する。
必ずしもhtmlファイルと同一階層に置く必要はないが、相対パスでJavaScriptファイルを指定する際にパスが短くなり、管理や記述がしやすくなるため、今回は同一階層に配置している。
3.FullCalendar設定
html内に、先ほどダウンロードおよび解凍したファイル群に含まれるindex.global.min.jsを指定する。
JavaScript側でFullCalendarを初期化し、カレンダーを表示させるための表示対象を指定するために、html本文にあらかじめid属性に”calendar”を指定しておく。
先ほど設定したidに対してJavaScriptを記載していく。
document.addEventListener('DOMContentLoaded', function() {
const calendarEl = document.getElementById('calendar');
const calendar = new FullCalendar.Calendar(calendarEl, {
// 初期ビュー設定
initialView: 'resourceTimeGridDay',
// リソース
resources: [
{ id: 'a', title: '会議室A' },
{ id: 'b', title: '会議室B' },
{ id: 'c', title: '会議室C' },
],
// リソースに紐づくイベント
events: [
{
resourceId: 'a',
title: '会議1',
start: '2025-04-09T12:00:00',
end: '2025-04-09T14:00:00',
},
],
});
// レンダリング
calendar.render();
});上記のJavaScriptコードを記述することで、指定したhtml内のid=”calendar”の要素に対してFullCalendarの垂直リソースビュー（resorceTimeGridDay）が表示される。
それぞれのオプションについて解説
- initialView
- 初期表示の設定を行うオプション。ここではresourceTimeGridDayを指定しているため、縦方向にリソースを並べた「垂直リソースビュー」が表示される。
- resources
- カレンダー上に表示するリソース（会議室など）を定義している。
- id：eventsと紐づけるための識別子
- title：実際に画面に表示されるリソース名（例：会議室Aなど）
- events
- 各リソースに対して設定するイベント情報。
- resourceId：このイベントがどのリソースに属するかをresourcesのidと紐づけて設定
- title：イベントの名称を指定
- start/end：イベントの開始時刻と終了時刻を設定
最低限これらの設定があれば垂直リソースビューを表示できる。
ここに様々なオプションを追加することで自分好みにカスタマイズできる。
例えば現在はすべて英語表記になっているが、日本語に変更するにはオプションのlocaleを追加してjaを設定する。
またall-dayのテキストも指定できるので終日などに変更したい場合はallDayTextというオプションを追加し、変更したいテキストに修正できる。
画面右上のtodayのようなボタンテキストは以下のような設定の仕方を行うことで変更できる。
カスタムボタンを作ることも可能。（公式ドキュメントからリソースを追加するボタンをコピー）
作成したカスタムボタンの配置を以下のように設定。
イベントのendを設定しなければ終日のイベントを作成できる。
最終的なコードと画面が以下になる。
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<script src='fullcalendar-scheduler-6.1.15/dist/index.global.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const calendarEl = document.getElementById('calendar');
const calendar = new FullCalendar.Calendar(calendarEl, {
// 初期ビュー設定
initialView: 'resourceTimeGridDay',
// 日本語表示設定
locale: 'ja',
// all-dayのテキスト変更
allDayText: '終日',
// ボタンテキスト変更
buttonText: {
today: '今日'
},
// ここでヘッダーを設定できる
headerToolbar: {
// 左に寄せる要素
left: 'promptResource',
// 中央の要素
center: 'title',
},
// カスタムボタンを設定できる
// リソースを追加するボタンをドキュメントを真似して実装
customButtons: {
promptResource: {
text: '+ room',
click: function() {
var title = prompt('Room name');
if (title) {
calendar.addResource({
title: title
});
}
}
}
},
// リソース
resources: [
{ id: 'a', title: '会議室A' },
{ id: 'b', title: '会議室B' },
{ id: 'c', title: '会議室C' },
],
// リソースに紐づくイベント
events: [
{
resourceId: 'a',
title: '会議1',
start: '2025-04-11T12:00:00',
end: '2025-04-11T14:00:00',
},
{
resourceId: 'b',
title: '会議2',
start: '2025-04-11',
},
],
});
// レンダリング
calendar.render();
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
このように様々なオプションをつけることで自分好みにカスタマイズできる。