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 Dataevents (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( '追加できませんでした');
        }
    }
}

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

  • このエントリーをはてなブックマークに追加

関連記事

アップロードファイルのバリデーションルール

CakePHP 2.2や2.3になってファイルアップロードに対するルールがコアバリデーションに追加されているようで、まとめてみました。 コアバリデーション 関連しそうなルールは以下の4つの

日付・時間のバリデーション

日付や時刻に関するバリデーションは以下のルールがビルトインされています。 date 日付 time 時刻 datetime 日時 (m:「月」を数字表記 / M:「月」を英語表記)

Formヘルパーのinputタグのdiv/labelなどの設定

Formヘルパーのinputではデフォルトでは以下のようにdivで囲われて、labelが付与されて出力されます。 CSSのフレームワークなどであらかじめ決まったスタイルがある場合に便利に作られていま

SQLクエリーをログに出力する

SQLのクエリーをデバッグするには、Debug Kitを使用すればできますが、デバッグログと一緒に出したいのでやり方を調査してみました。 別々のログやビューでみるのもいいですが、秒単位で実行される処

Blowfishを使用してハッシュ化する

使用方法 Blowfishを採用してハッシュ化を行う場合、Securityクラスのhashメソッドを呼び出します。第2引数に'blowfish'を指定し、第3引数を指定しないもしくはfalseにしま

FormヘルパーのMagicOption (マジックオプション) 

Formヘルパーでは、「フィールド名」,「テーブルカラムのデータ型」もしくはモデルの「バリデーション設定」によりフォーム要素を決定したり、自動で属性を付与する「マジックオプション」と呼ばれるものがある

数値系バリデーション

CakePHP 2になっていくつか数値用バリデーションルールが追加されています。 数値用 (コア)バリデーション decimal - 十進数であること numeric - 数値であること

バリデーション前後に処理を追加できる「beforeValidate」「afterValidate」

CakePHPでは、「beforeValidate」「afterValidate」というバリデーション処理の前後で追加の処理を実装できるコールバック関数が用意されています。 beforeVali

Cookieログイン

今回は、ログイン画面でよくみかけるクッキーログインの機能を使ってみます。 CakePHPには、Cookieコンポーネントがあります。(PHPのsetcookieメソッドのラッパー)メソッドはwr

コントローラ内でバリデーション処理を呼び出す

CakePHPでは、saveメソッドの際にバリデーション処理も自動で行われますが、save処理と切り離してバリデーションを行うこともできます。このときは、save時と若干異なる処理体系になります。

Comment

  1. プラグインを使用するには

    ① ダウンロード後のフォルダを解凍し、「Fullcalendar」に改名する
      fullcalendar-1.6.4 ← Fullcalendar に改名
       ├demos
       ├fullcalendar
       ├lib
       ├changelog.txt
       └license.txt

    ② ①のフォルダをapp/pluginにコピー
      app
       ├Config
       ├ …
       ├plugin
         ここにコピー

    ③ app/Plugin/Fullcalendar/fullcalendar/fullcalendar.jsと
      app/Plugin/Fullcalendar/lib/jquery.min.jsを
      app/webroot/jsにコピー

    ④ app/Plugin/Fullcalendar/fullcalendar/fullcalendar.cssを
      app/webroot/cssにコピー

    ⑤ app/Config/bootstrap.phpの75行目付近に以下コード追加
      CakePlugin::load('FullCalendar');

     

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

PAGE TOP ↑