Joomlaのカレンダーのカスタマイズ

Joomlaコンポーネント内で(モジュールでも良いけど)カレンダーを表示させるのは簡単で、以下のようにやればいい(ただし正式なドキュメントは見あたらず)。

JHTML::_('calendar', ....);

Joomlaのカレンダー機能はこのカレンダーを使っているらしい。

オリジナルのカレンダーのドキュメントを見ると色々カスタマイズ出来るみたいだけど、Joomlaからだと以外に面倒だったのでメモ。本家フォーラムでも同じ事を質問してる人がいた。

使いたかったのはonSelectコールバック。カレンダーの日付を選択された時に、他のフォームの値を変更する処理を加えたかった。

結局以下の手順で行った。

  1. JHTMLの子クラスを作成。
  2. calendarメソッドをJHTMLよりコピーしてきて修正。onSelectを引数で取れるようにする。
  3. カレンダーを使いたいところで、JHTMLの代わりにそのクラスを呼び出し。
  4. 日付が選択された時に行いたい処理をfunctionにして、それを引数で渡す。

1は問題ないはずなので割愛。2は以下のような感じ。

class FooJhtmlplus extends JHTML
{
function calendar($value, $name, $id, $format = '%Y-%m-%d', $attribs = null,
$onselect = null)
{
JHTML::_('behavior.calendar'); //load the calendar behavior
if (is_array($attribs)) {
$attribs = JArrayHelper::toString( $attribs );
}
$document =& JFactory::getDocument();
$document->addScriptDeclaration('
window.addEvent('domready', function() {Calendar.setup({
inputField     :    "'.$id.'",     // id of the input field
ifFormat       :    "'.$format.'",      // format of the input field
button         :    "'.$id.'_img",  // trigger for the calendar (button ID)
align          :    "Tl",           // alignment (defaults to "Bl")
onSelect       :    '.$onselect.',
singleClick    :    true
});});');
return '<input type="text" value="'.htmlspecialchars($value, ENT_COMPAT, 'UTF-8').'" id="'.$id.'" name="'.$name.'" />'.
'<img id="'.$id.'_img" alt="calendar" src="'.JURI::root(true).'/templates/system/images/calendar.png" class="calendar" />';
}
}

3も問題ないと思うんだけど、4が若干問題。自分がやりたい処理を$onselectに渡してしまうと、その機能でカレンダーが元々持っている機能を上書きしてしまって、日付が選択された時にその日付をテキストフォームにコピーするなどの本来の機能が失われてしまう。

と言うことで、onselectに渡すfunctionは既存のfunctioinをコピーして、そこに自分のコードを追加した方がいい。で、既存の機能はどこにあるかというと、calendar-setup.jsに存在する。普通にこのファイルを開くと、容量削減のため(?)インデントとか改行とかが削ってあって非常に見にくい。

ちょっと検索したら整形済みのソースがあった。そこのonSelectをコピーして修正して、先のFooJhtmlplus.calendarの$onselectに渡してやればよい。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です