Yii2でFullCalendarを簡単に導入する方法

Yii2フレームワークを使用して開発していると、カレンダーを使ったイベント管理が必要になることがあります。そのような場合に便利なツールが、JavaScriptベースのライブラリであるFullCalendarです。本記事では、FullCalendarをYii2プロジェクトに簡単に導入し、基本的なカレンダー表示を実現する方法をご紹介します。

FullCalendarとは

FullCalendarは、イベントのスケジュールやカレンダー表示を簡単に実装できる人気のJavaScriptライブラリです。レスポンシブ対応やさまざまなカスタマイズオプションを備えており、Googleカレンダーのような体験を提供できます。

Yii2プロジェクトへの導入手順

拡張機能からインポート

「yiitwofullcalendar」は、Yii2でFullCalendarを手軽に扱うための拡張です。これを使用することで、イベントの表示やカレンダーの基本的な設定が簡単に行えます。

Composerを使用して「yiitwofullcalendar」をインストールします。

php composer.phar require edofre/yii2-fullcalendar "@dev"

Composerが依存関係を解決してインストールを完了したら、すぐに利用できます。

カレンダーの表示

次に、カレンダーを表示する基本的なコードを用意します。ここでは、site/indexアクションでカレンダーを表示する例を示します。

コントローラーの設定

controllers/SiteController.phpで、イベントデータを渡す処理を記述します。

public function actionIndex()
{
    $events = [
        [
            'title' => 'イベント1',
            'start' => '2024-12-15',
        ],
        [
            'title' => 'イベント2',
            'start' => '2024-12-18',
            'end' => '2024-12-20',
        ],
    ];

    return $this->render('index', ['events' => $events]);
}

ビューの設定

views/site/index.phpに、カレンダーを表示するコードを追加します。

<?php
use yii2fullcalendar\yii2fullcalendar;

echo yii2fullcalendar::widget([
    'options' => [
        'id' => 'calendar',
    ],
    'clientOptions' => [
        'locale' => 'ja',
        'initialView' => 'dayGridMonth',
        'headerToolbar' => [
            'left' => 'prev,next today',
            'center' => 'title',
            'right' => 'dayGridMonth,timeGridWeek,timeGridDay',
        ],
    ],
    'events' => $events, // コントローラーから渡されたイベントデータ
]);
?>

上記のコードでは、eventsキーに渡したデータがカレンダーに表示されます。

カスタマイズ例

イベントのクリック処理を追加

イベントをクリックした際にアラートを表示する機能を追加する例です。

'clientEvents' => [
    'eventClick' => new \yii\web\JsExpression('function(event) {
        alert("イベントタイトル: " + event.title);
    }'),
],

Ajaxで動的にイベントを取得

イベントを動的に取得するには、eventsキーにURLを指定します。

'events' => \yii\helpers\Url::to(['/event/get-events']),

コントローラーで、指定したURLに対応するアクションを作成し、イベントデータを返します。

public function actionGetEvents()
{
    \Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
    return [
        [
            'title' => '動的イベント',
            'start' => date('Y-m-d'),
        ],
    ];
}