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

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

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

関連記事

no image

HttpSocketを使用してリクエスト送信

CakePHPには、Webサービスへのリクエスト送信のためのHttpSocketクラスが用意されています。 HttpSocket get HTTP GETリクエストを発行します。デモ H

独自のバリデーションルールを作成

CakePHPで組み込みバリデーションルールをつくる方法は、正規表現を定義する方法と独自メソッドを定義する方法の2つがあるようです。 参考 Custom Validation Rules 正規

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

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

DebugKitを導入

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

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

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

Markdown Plugin

「Markdown CakePHP Plugin」は、MarkDown書式をレンダリングしてくれるビューヘルパーです。MarkDownについて勉強しているうちに出会ったので試し打ちです。 ダウンロー

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

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

Cookieログイン

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

CakeEmailでメール送信(@gmail)

CakePHP 2になって追加されたクラスCakeEmailがシンプルに使えます。これを使用してメール送信を行う処理を実装してみました。 CakeEmailクラスの読み込み /app/Config

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

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

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 ↑