EC-CUBE カレンダーブロックの使い方とカスタマイズ方法

Pocket

EC-CUBEのカレンダーブロックの使い方
EC-CUBEのデフォルトで用意されているカレンダーブロックは、休日や営業日を簡単に出力できるので大変便利なツール。

カスタマイズするにはクラスファイルのデータを利用する必要があるのでやや難しい印象ですが、データの使い方がわかれば意外と簡単。

このページではブロックの見た目のカスタマイズ方法と、テンプレートタグ(配列)の使い方を紹介します。

EC-CUBEカレンダーブロックの使い方

カレンダークラスとブロックのファイル構成

EC-CUBEのカレンダーブロックのカスタマイズに必要なファイルは以下の場所にあります。

  • data->class->pages->frontparts->bloc->LC…Calendar.php
  • data->class_extends->pages_extends->frontparts->bloc->LC…Calendar.php
  • html->frontparts->bloc->calendar.php
  • data->Smarty->templates->template_name->frontparts->bloc->calendar.tpl
  • html->user_data->packages->template_name->css->bloc.css

上の2つがクラスファイル。ここにカレンダーのデータ取得などの処理が行われています。3つめはコントローラ。ここは特に変更するところはありません。4つめがテンプレートファイル。クラスファイルから受け取ったデータを表示します。最後はCSSファイル。見た目の編集を行います。

カレンダーブロックの見た目をカスタマイズ

EC-CUBEのデフォルトカレンダーのスタイルをカスタマイズするには、bloc.cssを編集します。デフォルトでは280行目あたりにカレンダーのスタイルがあります。
bloc-calendar-css
編集するにはCSSの知識が必要ですが、休日の色や今日の日付の色などの見た目をカスタマイズ可能。

カレンダーブロックで使えるデータ配列

クラスファイルのaction関数で日付のデータが格納されています。

// カレンダーデータ取得
$this->arrCalendar = $this->lfGetCalendar(2);

// テンプレートで使える配列
$arrCalendar;

取得できる月はデフォルトで2に設定されていますが、この値を変更することで1ヶ月分だけ取得することも可能。

// ()内の値を変更して取得する月数を変える
$this->arrCalendar = $this->lfGetCalendar(2);

取得した配列の中身はこんな感じ(間違ってたらゴメンナサイ)。

  • in_month : trueならその月に含まれる。カレンダーのダブり判定に使用
  • first : 週の初めの日ならtrue
  • last : 週の最後の日ならtrue
  • empty : trueなら空欄にする。カレンダーのダブり判定に使用
  • year : その年の年数
  • month : 月
  • day : 日付
  • holiday : 休日ならtrue
  • today : 今日ならtrue

ダブり判定は、例えば以下のようなカレンダーの場合、8月1日の前に前月の27日〜31日までが入ります。このダブってるところをin_monthを使って判定処理します。
bloc-calendar-class

データの出力方法

データを個別に取り出すには以下のようにします。

// $j : 月のインデックス、0スタート
// $i : 日付のインデックス、0スタート
// 'in_month'  :  値

$arrCalendar[$j][$i]['in_month']

// テンプレート内で使う方法
<!--{$arrCalendar[$j][$i]['in_month']}-->

カレンダーデータの出力に関しては、デフォルトブロックですでにループが作られているので、特に変更する必要はなさそう。