Joomlaのカレンダーのカスタマイズ
Joomlaコンポーネント内で(モジュールでも良いけど)カレンダーを表示させるのは簡単で、以下のようにやればいい(ただし正式なドキュメントは見あたらず)。
JHTML::_('calendar', ....);
Joomlaのカレンダー機能はこのカレンダーを使っているらしい。
オリジナルのカレンダーのドキュメントを見ると色々カスタマイズ出来るみたいだけど、Joomlaからだと以外に面倒だったのでメモ。本家フォーラムでも同じ事を質問してる人がいた。
使いたかったのはonSelectコールバック。カレンダーの日付を選択された時に、他のフォームの値を変更する処理を加えたかった。
結局以下の手順で行った。
- JHTMLの子クラスを作成。
- calendarメソッドをJHTMLよりコピーしてきて修正。onSelectを引数で取れるようにする。
- カレンダーを使いたいところで、JHTMLの代わりにそのクラスを呼び出し。
- 日付が選択された時に行いたい処理を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に渡してやればよい。