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

cakephp

カレンダーアプリケーションを作成するため、カレンダー表示できるプラグインを探索して出会った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

CakePHP 2.x インストール

現在まで私が商用・非商用にリリースしているCakePHPアプリケーションは全て1.3.xベースで作成しています。 まだまだロードマップ的には大丈夫そうですが、お客さん向けに納品しているアプリケーショ

cakephp

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

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

cakephp

Syslogログエンジン

2.4から「Syslog」ログクラスが追加され、簡単にSyslogを使用できるようになりました。 CakePHP側の設定はbootstrap.php内のCakeLogコンフィグのengineを'Sy

cakephp

ハッシュ関数の選択とハッシュ化処理

CakePHPでは、ログイン時にはpasswordを自動的にハッシュ化して認証を行ってくれますが、そのパスワードを登録する際は、明示的にハッシュ化する必要があります。 ハッシュ関数の選択 ハッ

cakephp

Cookieログイン

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

cakephp

DebugKitを導入

定番のブログチュートリアルをこなして、定番のDebugKitを導入してみました。 2.3からはCakePHPインストール直後に以下のように導入を推奨するような警告メッセージが表示されるようになりまし

no image

radioボタンを実装

Radioボタンの実装は、セレクトボックスとほぼ同じです。 個人的にはラジオボタンをすすんで使用することは少ないのですが、2択くらいの選択肢であれば非常に便利ですよね。 今回は、その実装方法 デモ

cakephp

複数ファイルアップロードフォーム

CakePHP 2.0からはHTML5が標準でサポートとなり、複数ファイルアップロードのためのフォーム記述が容易になりました。 View (ビュー) 配列 Array (

cakephp

hasOne アソシエーション

hasOneアソシエーションはテーブル間で1つのレコードに対して他のテーブルに紐付くレコードが1つの場合にjoinする場合に使用します。 CakePHPのドキュメントにならってUserモデルとP

cakephp

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

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

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 ↑