JavaScript

【初心者向け】FullCalendarの使い方を徹底解説！イベントカレンダーを簡単に実装

【初心者向け】FullCalendarの使い方！JSONからイベントを読み込んでみよう

Webサイトにイベントカレンダーを導入したいと考えている方におすすめなのが、JavaScriptライブラリ 「FullCalendar」 です。
本記事では、FullCalendarの基本的な使い方をわかりやすく解説し、初心者でも簡単にカレンダーを実装できるようにします。

FullCalendarとは？

FullCalendarサイト

FullCalendarは、JavaScriptで動作する高機能なカレンダーライブラリです。
Googleカレンダーのような見た目で、予定の表示やイベント管理が簡単にできます。主な特徴は以下の通りです。

  • シンプルなコードで導入可能
  • ドラッグ＆ドロップでイベント管理
  • Googleカレンダーとの連携が可能
  • レスポンシブデザイン対応

FullCalendarは、公式サイト（https://fullcalendar.io/）で詳細なドキュメントが公開されており、最新情報も随時更新されています。

2. FullCalendarの基本的な導入方法

まずは、FullCalendarをWebページに導入する方法を解説します。

ステップ1：必要なライブラリを読み込む

FullCalendarは、CDNを利用することで簡単に読み込めます。以下のコードをHTMLの <head> 内に追加してください。

<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/locales-all.min.js"></script> <!-- 言語対応 -->
ワンコ
ワンコ

CDNだけでなく、ダウンロードして読み込んでもOK
https://fullcalendar.io/docs/initialize-globals

ステップ2：カレンダーを表示するためのHTMLを用意

次に、カレンダーを表示するための 要素を用意します。
この中にカレンダーが生成されます。

<div id="calendar"></div>

ステップ3：JavaScriptでカレンダーを初期化

カレンダーを表示するために、以下のJavaScriptコードを記述します。

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    locale: 'ja', // 日本語化
    initialView: 'dayGridMonth', // 月表示
    initialDate: '2025-02-01', // 2025年2月を初期表示
    events: [
      { title: '会議', start: '2024-02-10' },
      { title: '出張', start: '2024-02-15', end: '2024-02-17' }
    ]
  });

  calendar.render();
});

これで、ページを開くとカレンダーが表示され、指定した日付にイベントが登録されているのが確認できます。

See the Pen Untitled by kokusyo (@kokusyo) on CodePen.

簡単にカレンダーを追加できました。

ワンコ
ワンコ

FullCalendarの基本的なオプション

日本語化

locale: 'ja' を指定すると、曜日やボタンの表示が日本語になります。

locale: 'ja'

2-2. カレンダーの表示形式を変更

時間単位のスケジュールを表示したい場合は initialView を 週表示 や 日表示 に変更します

設定値説明
dayGridMonth月表示（デフォルト）
timeGridWeek週表示（時間表示あり）
timeGridDay日表示（時間表示あり）
listWeekリスト形式（週単位）

こちらは週表示に切り替えてみました。
時間ごとのスケジュールが分かりやすくなりました。

See the Pen Untitled by kokusyo (@kokusyo) on CodePen.

時間単位のスケジュールを追加する

FullCalendarでは、時間を指定してイベントを追加することができます。

events: [
  { title: '朝会', start: '2024-02-10T09:00:00', end: '2024-02-10T09:30:00' },
  { title: 'ランチミーティング', start: '2024-02-15T12:00:00', end: '2024-02-15T13:00:00' }
]

See the Pen Untitled by kokusyo (@kokusyo) on CodePen.

イベントをドラッグ＆ドロップで移動

イベントを移動できるようにするには、editable: true を設定します。

editable: true, // イベントをドラッグで移動可能

See the Pen Untitled by kokusyo (@kokusyo) on CodePen.

jsonファイルからイベントを読み込む

これまでのサンプルはJavaScriptで直接、イベントデータを入力していました。
ですが通常の場合は、サイトでカレンダーを表示する際は、サーバーやAPIなどから取得したデータを表示することになるでしょう。

今回は、APIからのデータ取得をシミュレーション するために、サーバーの代わりにローカルのJSONファイルを使用 します。
プロジェクトの同じフォルダ内に events.json を作成し、それを読み込むことで、実際にAPIからデータを取得した場合と同じ動作をテストします。

この方法を使うと、APIの開発が完了していない段階でもデータの取得・表示の動作を確認 できるため、スムーズに開発を進められます。

JSONファイルを作成

今回はテストとして、サーバーから読み込む代わりに、同フォルダにJSONファイルを作成し、それを読み込むことでAPIから読み込んだテストを行います。

FullCalendarは、events に JSONフィードのURLを指定すると、自動的にデータを取得します！

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    locale: 'ja',
    initialView: 'dayGridMonth',
    events: './events.json', 
  });

  calendar.render();
});

これだけで events.json のデータがカレンダーに表示されます！

まとめ

FullCalendarを使うことで、シンプルなコードで高機能なカレンダーを実装 できます。
今回は、日本語化やJSONデータの読み込み、イベントのドラッグ＆ドロップ、クリック時の詳細表示など、実際の開発で役立つ機能を紹介しました。

JSONデータを簡単に読み込める ため、API連携のテストもスムーズに行えます。
また、ドラッグ＆ドロップや時間指定の機能を活用することで、より実用的なスケジュール管理システム を構築できます。

今回紹介した内容を応用すれば、イベントの編集・削除機能、Googleカレンダーとの連携、サーバーサイドでのデータ管理 など、さらに高度な機能を実装することも可能です。ぜひ、自分のプロジェクトに取り入れて、便利なカレンダーを作ってみてください！

-JavaScript
-,