FullCalendarを使用してカレンダーアプリケーション

カレンダーアプリケーションを作成するため、カレンダー表示できるプラグインを探索して出会ったFullcalendarを試してみました。シンプルに使用できる上に、オプションがかなり豊富です。ダウンロード

目次

• カレンダーを表示する
• カレンダーにイベントを表示する
• カレンダーにイベントを追加する

カレンダーを表示する

まずはカレンダーのみ表示してみます。デモ：カレンダー表示

head部分に、jQuery本体とFullCalendar本体、そしてCSSを読み込みます。

// head内
<?php
    echo $this->Html->css( 'fullcalendar/fullcalendar.css');
    echo $this->Html->script( 'jquery.min.js');
    echo $this->Html->script( 'fullcalendar/fullcalendar.min.js');
?>

// view *.ctp
<div id="fc1" class="fc"></div>  // 

<script type="text/javascript">
$(document).ready(function() {
    $('#fc1').fullCalendar({})
});
</script>

カレンダーにイベントを表示する

カレンダーが表示できたところで、次にカレンダー内にイベントを表示させます。
デモ：カレンダーにイベントを表示

テーブルの作成は、Event Objectを参考にして下さい。

CREATE  TABLE IF NOT EXISTS `events` (
    `id` INT NOT NULL AUTO_INCREMENT ,
    `title` VARCHAR(50) NOT NULL ,
    `allday` TINYINT(1) NOT NULL ,
    `start` DATETIME NOT NULL ,
    `end` DATETIME NOT NULL ,
    `editable` TINYINT(1) NOT NULL ,
    PRIMARY KEY (`id`) )
ENGINE = InnoDB
DEFAULT CHARACTER SET = utf8
COLLATE = utf8_general_ci

ビュー (Views)

<div id="fc2" class="fc"></div>
<script type="text/javascript">
$(document).ready(function() {
    $('#fc2').fullCalendar({
        events: "<?php echo $this->webroot;?>fcfeed/",
    })
});
</script>

また、fcfeed.ctpの空ファイルを対象コントロール用のviewフォルダに置いて下さい。
上の例では、「events:」でurlを指定し、そのレスポンスがイベントとして表示されます。
eventsは、urlの他、配列またはJSON(少し加工が必要)でもいい。
Event Dataのevents (as an array), events (as a function)もしくは events (as a json feed)を参照

コントローラ (Controllers)

function fcfeed(){
    // start/endをSQL用に編集
    $mysqlstart = date( 'Y-m-d H:i:s', $this->params['url']['start']);
    $mysqlend   = date( 'Y-m-d H:i:s', $this->params['url']['end']);
    // SQL
    $conditions = array( 'Event.start BETWEEN ? AND ?' => array( $mysqlstart, $mysqlend));
    $events = $this->Event->find( 'all', array( 'conditions' => $conditions));

    // SQLのレスポンスをもとにデータ作成
    $rows = array();
    for ( $a=0; count( $events) > $a; $a++) {
        $rows[] = array(
            'id' => $events[$a]['Event']['id'],
            'title' => $events[$a]['Event']['title'],
            'start' => date( 'Y-m-d H:i', strtotime($events[$a]['Event']['start'])),
            'end' => date( 'Y-m-d H:i', strtotime($events[$a]['Event']['end'])),
            'allDay' => $events[$a]['Event']['allday'],
        );
    }
    // JSONへ変換
    echo json_encode( $rows);
}

eventsテーブルから取得したデータ配列

Array
(
    [0] => Array
        (
            [id] => 1
            [title] => kwski.net
            [start] => 2012-10-19 02:15
            [end] => 2012-11-18 02:15
            [allDay] => 1
        )

    [1] => Array
        (
            [id] => 2
            [title] => yoshima
            [start] => 2012-10-23 02:16
            [end] => 2012-10-29 02:16
            [allDay] => 1
        )
)

最終的に[$JSON]のようなかたちになればいい。

Fullcalendar用に変換したJSONデータ

[
    {"id":"1","title":"kwski.net","start":"2012-10-19 02:15","end":"2012-11-18 02:15","allDay":true},
    {"id":"2","title":"yoshima","start":"2012-10-23 02:16","end":"2012-10-29 02:16","allDay":true}
]

これで、カレンダーの枠を作成した後に、/fcfeedアクションを呼び出し、そのレスポンスをもとにイベントをカレンダー内にレンダリングします。
実際にコールされるurlは、/fcfeed/?start=[start]&end=[end]&_=[param]となります。

• [start]、[end]は、取得するイベントの開始と終了でUNIX時間で表現されます。表示対象のカレンダーをもとに取得する開始と終了を付与してくれます。
• [param]はキャッシュを返させないように付与されています。(Cachingを参照)

カレンダーにイベントを追加する

次にイベントを追加する処理を実装します。
デモ：カレンダーにイベントを追加

ビュー (Views)

簡易化するために、title・start・endのみのフォームを用意して追加処理を行います。
サンプルでは、startとendの入力にここのスクリプトを使用しています。

<!-- カレンダー表示 -->
<div id="fc3" class="fc"></div>

<!-- 入力フォーム -->
<?php
    echo $this->Form->create( 'Event', array( 'type'=>'post', 'url' => '/fc/add'));
    echo $this->Form->text( 'title');  echo $this->Form->error( 'title');
    echo $this->Form->text( 'start');  echo $this->Form->error( 'start');
    echo $this->Form->text( 'end');    echo $this->Form->error( 'end');
    echo $this->Form->submit( 'Update');
    echo $this->Form->end();
    echo $this->Session->flash();
?>

<script type="text/javascript">
$(document).ready(function() {
    $('#fc3').fullCalendar({
        events: "<?php echo $this->webroot;?>fcfeed/",
    })
});
</script>

コントローラ (Controllers)

function add(){
    if (empty( $this->data)){
    } else {
        // 保存
        if ($this->Event->save( $this->request->data)){
            $this->Session->setFlash( '追加できました');
        } else {
            $this->Session->setFlash( '追加できませんでした');
        }
    }
}

次回、編集・削除をしてみたいと思います。

Related

カレンダー実装プラグイン「Bootstrap Calendar」 レスポンシブにも対応したカレンダーを表示する「Calendario.js」 複数ファイルアップロードフォーム radioボタンを実装 Jsヘルパーを使用してAjax更新 FormヘルパーのMagicOption (マジックオプション)　 シンプルに設置できる数字Captcha「MathCaptcha」 独自のバリデーションルールを作成