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

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

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

関連記事

RSSフィードの取得

コンロトーラ public function getrssfeed() { try { $newsItems = $this->Rss->read( 'http://

checkボックスを実装

selectボックスに引き続いてcheckボックスの実装方法をおさらいしてみます。 コードは、CakePHP 2と1.3両方で実装可能です。デモ モデルは、こちらも以下 CREATE TA

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

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

no image

radioボタンを実装

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

パス定数と変更方法やURLの取得

CakePHPは基本的にはディレクトリそのまま配置することで構築が可能ではありますが、設定パスを変更することでセキュリティに考慮した構成にすることや運用性をもたせたものにすることが可能になります。

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

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

入力文字列の長さ(文字数)をバリデーション

CakePHP 2には、コアバリデーションに文字列の長さを検証する関数が用意されています。 文字列長(コア)バリデーション minLength - 最小文字数以上であること maxLengt

hasOne アソシエーション

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

バリデーションエラーメッセージの取得

CakePHP 2.xになってバリデーションエラー時に返却されるメッセージのデータ形式が変更になったようです。1.3系では、ひとつのフィールドに対して返却されるメッセージは一つのルールのみですが、2.

テーブルからランダムにデータを取り出す(find)

CakePHPでテーブルから特定件数のレコードをランダムに取得するには以下のように指定するとできます。 $this->data = $this->Bulkdata->find( 'all',

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 ↑