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'),
        ],
    ];
}

まとめ

「yiitwofullcalendar」を使えば、Yii2プロジェクトでFullCalendarを簡単に利用できます。デフォルト機能を活用するだけでなく、カスタマイズすることで、より実用的なカレンダーを実装可能です。

スケジュール管理やイベント一覧を手軽に追加したい方は、ぜひ試してみてください！