Go to Qiita Advent Calendar Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@imp555sti(いんぷ555)

FullCalendar v6系の使い方

Posted at

FullCalendarの使い方
5年以上前に書いた時点では v4.3.1 でしたが、今は v6.1.19

  • jQuery初期化は非推奨
  • 予定追加等のイベント操作方法が刷新

など変更があったようなので、確認してみましょう。

改めてFullCalender

FullCalenderの入手

公式サイト「FullCalendar - JavaScript Event Calendar」から最新版をダウンロードします。

2025-10-18現在、v6.1.19ですのでそれをターゲットに情報のアップデートをしたいと思います。
v4.3.1時代のベース記事は → FullCalendarの使い方

FullCalender v4->v6の変更点

主な変更点は次の通りとの事です。詳細は公式サイトを確認してください。

Version 主な変更点 備考
v5.x - TypeScript対応強化
- eventDataTransformなどの新API追加		 モダンJS環境への適応
v6.0 - Angular 20対応（v6.1.19）
- nowIndicatorSnapで終日表示制御
- 深夜以降のbusinessHours対応		 最新フレームワークとの互換性強化
V6.1.19 - eventContentの再描画パフォーマンス改善 大量イベント表示時の最適化

その他、以下の点もポイントのようです。

  • $('#calendar').fullCalendar({...}) のようなjQuery初期化は非推奨
  • calendar.addEvent() によるイベント追加
  • バックエンド連携はAJAX＋ネイティブAPIで構築する必要あり
  • CSSとJSの読み込み方法の変更
    • @fullcalendar/core などのパッケージ単位で管理
  • イベントの操作方法が刷新
    • event.setProp() や event.setDates() などのメソッドの充実

FullCalenderのライブラリ読み込み

カレンダー表示の基本は以下の様な感じで初期設定などの呼び出し方がv4.xとは異なっていますかね。

v4.x
<link href="../packages/core/main.css" rel="stylesheet" />
<link href="../packages/daygrid/main.css" rel="stylesheet" />
<link href="../packages/timegrid/main.css" rel="stylesheet" />
<link href="../packages/list/main.css" rel="stylesheet" />
<script src="../packages/core/main.js"></script>
<script src="../packages/interaction/main.js"></script>
<script src="../packages/daygrid/main.js"></script>
<script src="../packages/timegrid/main.js"></script>
<script src="../packages/list/main.js"></script>
<script src="../packages/core/locales-all.js"></script>
v6.1.19
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.19/index.global.min.js'>/script>

あとはオブジェクト生成時のコールバックやオプション類が変更されています。

FullCalenderV6.1.19の例

外観のオプション類

カレンダー上下のボタン類は、それぞれ headerToolbar と footerToolbar で指定します。

headerToolbar と footerToolbar はそれぞれ
start|center|end または left|center|right で何を表示するかを指定します。

image.png

上図（下のコード）の例では以下の様な構成
なお、「,」区切りは一連のグループとして、「 」(スペース)区切りは別ボタンとして表示されます。

headerToolbar

要素 設定 内容
left 'prevYear,prev,next,nextYear today' 年月前後移動 ＋ 本日
center 'title' タイトル
right 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' ビュー選択ボタン

footerToolbar

要素 設定 内容
left 'prevYear,prev,next,nextYear today' 年月前後移動 ＋ 本日
center '' なし
right 'customButton' カスタムボタン(ユーザ定義ボタン)
v6.1.18 samle
<!DOCTYPE html>
<html lang='ja'>
<head>
    <meta charset='utf-8' />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.19/index.global.min.js'></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
    :
</head>
<body>
<div id="calendar" class="calendar"></div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
            locale: 'ja',
            themeSystem: 'bootstrap5',
            initialView: 'dayGridMonth',
            height: 500,
            headerToolbar: {
                left: 'prevYear,prev,next,nextYear today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
            },
            footerToolbar: {
                left: 'prevYear,prev,next,nextYear',
                center: '',
                right: 'customButton'
            },
            buttonText: {
                today: '今日',      // todayの表示ラベル
                month: '月表示',    // dayGridMonthの表示ラベル
                week: '週表示',     // timeGridWeekの表示ラベル
                day: '日表示',      // timeGridDayの表示ラベル
                list: 'リスト表示', // timeGridDayの表示ラベル
            },
            buttonIcons: {  // 要Bootstrap-icons
                prev: 'chevron-left',      // 前月のアイコン
                next: 'chevron-right',     // 来月のアイコン
                prevYear: 'chevrons-left', // 前年のアイコン
                nextYear: 'chevrons-right' // 来年のアイコン
            },
            customButtons: {
                customButton: {  // ユーザ定義ボタンの動作
                    text: 'カスタムボタン',
                    click: function() {
                        alert('カスタムボタンがクリックされました！');
                    }
                }
            }
        });

        calendar.render();
    });
</script>
</body>
</html>

FullCalender V6.xはモダンブラウザ－が対象なので、ECMAScript 6 (ES2015)的な要素も入れるとこんな感じ。
初期化関連を別に定義しておけるので改修時など見通しが良いですね。

v6.1.19 samle
<!DOCTYPE html>
<html lang='ja'>
<head>
    <meta charset='utf-8' />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.19/index.global.min.js'></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
    :
</head>
<body>
<div id="calendar" class="calendar"></div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const initialOptions = {
            locale: 'ja',
            themeSystem: 'bootstrap5',
            initialView: 'dayGridMonth',
            height: 500,
            headerToolbar: {
                left: 'prevYear,prev,next,nextYear today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
            },
            footerToolbar: {
                left: 'prevYear,prev,next,nextYear',
                center: '',
                right: 'customButton'
            },
            buttonText: {
                today: '今日',      // todayの表示ラベル
                month: '月表示',    // dayGridMonthの表示ラベル
                week: '週表示',     // timeGridWeekの表示ラベル
                day: '日表示',      // timeGridDayの表示ラベル
                list: 'リスト表示', // timeGridDayの表示ラベル
            },
            buttonIcons: {  // 要Bootstrap-icons
                prev: 'chevron-left',      // 前月のアイコン
                next: 'chevron-right',     // 来月のアイコン
                prevYear: 'chevrons-left', // 前年のアイコン
                nextYear: 'chevrons-right' // 来年のアイコン
            },
        };

        var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {

            customButtons: {
                customButton: {  // ユーザ定義ボタンの動作
                    text: 'カスタムボタン',
                    click: function() {
                        alert('カスタムボタンがクリックされました！');
                    }
                }
            }
        });

        calendar.render();
    });
</script>
</body>
</html>

FullCalendar Premium

Premium版の場合は、予定にあたるeventに対しrecourceと関連させて管理という感じで
例えば、会議室などのrecourceおよび各社員の予定などのeventを関連付けて簡単に制御できそうですよね。

サンプルコード

Free版はv4.x時代からそれほど大きな変更はなさそうでしたが、日本の休日を設定しその日はイベントを定義できないといった制御をするサンプルを作成してみました。

そんなわけで、なんとなく作成したサンプルあげときます。

過去記事

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?