「カラフルカレンダー」 の改造・導入

“Colorless” と謳ってはいるが最近は結構どうでも良かったりする.

曜日だけじゃなくて日も色付けしよう, どうせなら祝日の場合はその名前も出力しよう, と思い立って, メソッドsb::Content::_calendar の改造に取り掛かったけど, もしやと思って最近見つけたここのプラグイン一覧から探してみたら案の定そんなプラグインが既にあった. やろうとしてたことがほぼ全て実現されてたんで, これを使うことにした.

早速導入して 吐き出された HTML ソースを見てみると, class 属性の値がどうも冗長. 以下はそれを (見通しを良くするために) 一部改変したもの. 


<table class="calendar" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7" class="calendar_month">&lt;&lt; January 2007 &gt;&gt;</td>
</tr>
<tr>
<td class="sunday">Sun</td>
<td class="monday">Mon</td>
<td class="tuesday">Tue</td>
<td class="wednesday">Wed</td>
<td class="thursday">Thu</td>
<td class="friday">Fri</td>
<td class="saturday">Sat</td>
</tr>
<tr class="week_1">
<td class="cell_sun_empty">&nbsp;</td>
<td class="cell_mon holiday" title="元日">1</td>
<td class="cell_tue">2</td>
<td class="cell_wed">3</td>
<td class="cell_thu">4</td>
<td class="cell_fri">5</td>
<td class="cell_sat">6</td>
</tr>
<!-- 以下省略 -->
</table>

冗長と思う箇所などを幾つか下に列挙.

  • calendarクラスの子孫にあたるはずのクラスの名前がcalendar_month
  • 曜日名装飾のためのクラス名 (sunday など) と日装飾のためのクラス名 (cell_sun など) が不一致
  • cell_ なる接頭辞
  • 祝日の場合は cell_mon holiday とクラスを複数指定する一方, 空欄の場合は cell_sun_empty なるクラスをわざわざ用意して使っている点

そしてこれらに対する改善案を列挙.

  • month で十分. CSS の子孫セレクタ (例: table.calendar td.month { ... }) を使えば良い.
  • sun などで統一. あくまで曜日名装飾と日装飾を分けたいんなら, 曜日名を示す行を <tr class="weekdays"> にでもして, 上と同様に子孫セレクタを使えば良い.
  • empty クラスを作り, mon empty のように使う.

ということで, 上に示した以外の点についても 自分の好みに合うように改造した. その結果はこのページのソースを参照されたし.