FullCalendar | インタラクティブなカレンダー機能 | 複数の実例で理解するJavaScriptライブラリ解説

スポンサーリンク

スポンサーリンク

FullCalendarについての解説

FullCalendarは、JavaScriptで動作するインタラクティブなカレンダーを簡単に作成できるライブラリです。カレンダー表示を豊富にカスタマイズできるため、スケジュール管理やイベント管理のWebアプリケーションで広く使用されています。さまざまなカレンダー表示形式（週、月、日）や、イベント追加・削除の機能をサポートしています。

FullCalendarの実装方法

FullCalendarを使用するには、以下のCSSとJavaScriptファイルを<head>内に記述して読み込みます。

<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js"></script>

FullCalendarの特徴

特徴 説明
カレンダーの表示形式 月、週、日のビューに簡単に切り替えができる。
イベントの管理 イベントを追加・編集・削除する機能を提供。
レスポンシブ対応 モバイル、タブレット、PCに対応したレスポンシブデザイン。
外部API連携 Googleカレンダーなどの外部APIとも簡単に連携が可能。

プロパティとその値の一覧表

プロパティ名 説明 値の例
initialView カレンダーの初期表示ビューを指定。 ‘dayGridMonth’, ‘timeGridWeek’, ‘timeGridDay’
events 表示するイベントのリスト。 配列形式でイベントオブジェクトを指定。
headerToolbar カレンダー上部のツールバーのボタン配置。 { left: ‘prev,next’, center: ‘title’, right: ‘dayGridMonth,timeGridWeek’ }
editable イベントのドラッグ＆ドロップを有効にするか。 true, false

月カレンダーを表示する例

実行例

HTMLとJavaScriptコード

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

<script>
document.addEventListener('DOMContentLoaded', function () {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth', // 初期表示は月カレンダー
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        events: [
            { title: '会議', start: '2024-10-10T10:30:00', end: '2024-10-10T12:30:00' },
            { title: 'プロジェクト締め切り', start: '2024-10-15' },
            { title: '会社のイベント', start: '2024-10-25', end: '2024-10-28' }
        ]
    });
    calendar.render();
});
</script>

解説

この例では、FullCalendarを使用して月カレンダーを表示しています。`initialView`に`dayGridMonth`を指定して、月単位での表示を実現しています。

週カレンダーを表示する例

実行例

HTMLとJavaScriptコード

<div id="calendar-container-week">
    <div id="calendar-week"></div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var calendarWeekEl = document.getElementById('calendar-week');
    var calendarWeek = new FullCalendar.Calendar(calendarWeekEl, {
        initialView: 'timeGridWeek', // 初期表示は週カレンダー
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        events: [
            { title: 'オンラインミーティング', start: '2024-10-08T09:00:00', end: '2024-10-08T10:00:00' },
            { title: '社内プレゼン', start: '2024-10-12T14:00:00', end: '2024-10-12T15:30:00' }
        ]
    });
    calendarWeek.render();
});
</script>

解説

この例では、週ごとのスケジュールを表示しています。`initialView`に`timeGridWeek`を指定することで、週単位での表示が可能になります。

日カレンダーを表示する例

実行例

HTMLとJavaScriptコード

<div id="calendar-container-day">
    <div id="calendar-day"></div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var calendarDayEl = document.getElementById('calendar-day');
    var calendarDay = new FullCalendar.Calendar(calendarDayEl, {
        initialView: 'timeGridDay', // 初期表示は日カレンダー
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        events: [
            { title: '1対1ミーティング', start: '2024-10-10T13:00:00', end: '2024-10-10T14:00:00' }
        ]
    });
    calendarDay.render();
});
</script>

解説

この例では、日ごとのタイムグリッドを使用して、日ごとのスケジュールを表示しています。`initialView`に`timeGridDay`を指定することで、日単位での表示が可能になります。

FullCalendarの公式サイト

FullCalendar - JavaScript Event Calendar
fullcalendar.io
スポンサーリンク