CodeIgniterの学習 10 - カレンダークラスを使ってカレンダーを生成してみる

今日はカレンダークラスを試して、タスクリストのパーツとして使うようにしてみる。
カレンダークラスはデフォルトで使える状態なので、
事前準備は必要なく、すぐに呼び出すことができる。

3行で書くと、

$this -> load -> library( 'calendar');
echo $this -> calendar -> generate();
でカレンダーは作れるでありますぅ〜。

というお話。

詳しくはマニュアルにちゃんと記述されているので、
ここでの説明は省略しやった作業だけ書く。

（カレンダークラス - http://codeigniter.jp/user_guide_ja/libraries/calendar.html ）

（尚、例によってまだいろいろ実験しているだけの段階なので、ソースの場所とか書き方とか細かいところは気にしていない。）

作業内容

ソースの量がそこそこ長くなってきて、毎回貼り付けるのも冗長なので、
今日は抜粋箇所のみ記述する。（ベースは昨日までのエントリで貼っているソース）

todo:最新ソースだけ毎回貼る場所を作るか、3日に1回程全ソースを貼るか何か方策を考える。

１）コントローラー内にカレンダーを呼び出す処理を追加

ビューの生成をまとめている_SetTpl内に
$tpl["calendar"] = $this -> _MakeCalendar();とし、_MakeCalendar()の呼び出しを追加した。
_MakeCalendar()側でカレンダーのテーブルタグを生成している。

新規に作った_MakeCalendar() 内は、マニュアルを参考に、

月の移動リンク
日付内のリンク
生成するカレンダーのタグをデフォルト状態から変更

を設定して、カレンダータグを生成し戻している。

後でここにDBから読み出したタスク一覧データを渡し、
カレンダーの日付 → タスクへの遷移のリンクを生成させる予定。

ソース抜粋:
コントローラー： application/controllers/tasklist.php 内

<?php
//上略
// ビューの生成 一カ所にまとめた
function _SetTpl( $data )
{ 
  // カレンダーの生成
  $tpl["calendar"] = $this -> _MakeCalendar(); 
  // 大枠のテンプレート側の変数（ヘッダ部分のタイトルと、xajax用javascriptタグ）
  $tpl["page_title"] = "タスクリストにようこそ";
  $tpl["xajax_js"] = $this -> xajax -> getJavascript( base_url() ); // xajax用javascript生成 
  // タスクリスト（実験ソース）のテンプレートにデータをセット
  $tpl["main_content"] = $this -> load -> view( 'tasklist_view', $data , true ); 
  // 大枠のテンプレートに、タスクリストのビューをはめ込む
  $this -> load -> view( 'base_view', $tpl );
}
//中略
// カレンダーの生成
function _MakeCalendar()
{ 
  // todo:タスクリストとつなげ、
  // 日付クリック→その日迄の未完了タスクを表示させる
  /**
   * $data = array(
   * 3  => '/article/2006/03/',
   * 7  => '/article/2006/07/',
   * 13 => '/article/2006/13/',
   * 26 => '/article/2006/26/'
   * );
   * echo $this->calendar->generate(年, 月, $data);
   * の形式でリンク付カレンダーが作れるのでこれを使って実装すればOK
   */
  // 日付リンク埋め込みのテスト todo:後でDB内の一覧データから自動生成させる
  $data = array( 24 => 'http://d.hatena.ne.jp/dix3/20080924',
    28 => 'http://d.hatena.ne.jp/dix3/20080928' 
    );

  //月の移動用初期設定 todo:日付遷移の先を作る まだ飛び先が無い
  $prefs = array (
   'show_next_prev'  => TRUE,
   'next_prev_url'   => '/tasklist/show' , // /tasklist/show/yyyy/mm に移動する
   );

  //カレンダーの見た目の調整用初期設定
  //指定しなくてもいいけど調整したい時はこんな感じで
  $prefs['template'] = '
{table_open}<table>{/table_open}
{heading_row_start}<tr>{/heading_row_start}
{heading_previous_cell}<th><a href="{previous_url}">&lt;&lt;</a></th>{/heading_previous_cell}
{heading_title_cell}<th colspan="{colspan}">{heading}</th>{/heading_title_cell}
{heading_next_cell}<th><a href="{next_url}">&gt;&gt;</a></th>{/heading_next_cell}
{heading_row_end}</tr>{/heading_row_end}
{week_row_start}<tr class="cal_weekrow">{/week_row_start}
{week_day_cell}<td>{week_day}</td>{/week_day_cell}
{week_row_end}</tr>{/week_row_end}
{cal_row_start}<tr>{/cal_row_start}
{cal_cell_start}<td>{/cal_cell_start}
{cal_cell_content}<a href="{content}">{day}</a>{/cal_cell_content}
{cal_cell_content_today}<span class="cal_today"><a href="{content}">{day}</a></span>{/cal_cell_content_today}
{cal_cell_no_content}{day}{/cal_cell_no_content}
{cal_cell_no_content_today}<span class="cal_today">{day}</span>{/cal_cell_no_content_today}
{cal_cell_blank}&nbsp;{/cal_cell_blank}
{cal_cell_end}</td>{/cal_cell_end}
{cal_row_end}</tr>{/cal_row_end}
{table_close}</table>{/table_close}
';
  $this -> load -> library( 'calendar' ,$prefs );
  return $this -> calendar -> generate( "", "", $data );
} 

//下略
 ?>

２）外枠のビュー内にカレンダー用の変数を設置する

カレンダーは、コントローラ側で$calendarがセットされていれば、
左ブロックに常時表示するようにする。

ソース抜粋:
ビュー側（外枠）： application/views/base_view.php

（上略）
    <!-- leftblock //-->
    <div id="leftblock">
        <div>
            <p>ようこそ！dix3さん</p>
            <p class="yellow">締切り前のタスクが1件あります</p>
            <p class="red">期限切れのタスクが2件あります</p>
        </div>
        <div>
            <!-- サブメニュー -->
            <ul id="submenu">
                <li><a href="#">セッションの動作テスト</a></li>
                <li><a href="#">キャプチャの動作テスト</a></li>
                <li><a href="#">グラフの動作テスト</a></li>
                <li><a href="#">なんとかかんとかの動作テスト</a></li>
            </ul>
        </div>
        <?php if(isset($calendar)){ ?>
            <!-- calendar //-->
            <div class="calendar"><?=$calendar?></div>
            <!--// calendar -->
        <?php } ?>
    </div>
    <!--// leftblock -->
（下略）

３）スタイルシート(/css/style.css)側で見た目を調整する

ドキュメントルート/css/style.css を軽く調整

ソース抜粋:
スタイルシート： html/css/style.css

/*上略*/

/* カレンダー */
.calendar {
	margin-top:8px;
	font-size:1.1em;
}
.calendar table{
	border-collapse: collapse;
	background:#bc8f8f;
	border:1px solid #ccc;
}
.calendar  th{
	border:1px solid #ccc;
	text-align:center;
	color:#fff;
	padding:5px;
}
.calendar  th a{
	color:#fff;
}
.calendar  th a:hover{
	color:#ff6600;
}
.calendar  td{
	border:1px solid #ccc;
	background:#fcfcfc;
	padding:6px;
	text-align:center;
}
/* カレンダーの週 */
.cal_weekrow td{
	background:#a69090;
	color:#fff;
}
.cal_today{
	text-decoration:underline;
	color:#ff6600;
}

/*下略*/

カレンダー生成結果

こんな感じ、ちょー簡単。使い道はいろいろ。

さて、明日はなにやろう。やっぱり認証かなぁー。