休日表示付リアルタイムカレンダープラグイン for Serene Bach
|
Serene Bach のカレンダーに土・日祝日・本日を表示するプラグインです（sb も大丈夫だと思います）。ここでは公開テンプレートを利用したテーブルタイプのカレンダーに対するカスタマイズ方法をご紹介します。もちろん他のテンプレートでもご利用可能です。注：本プラグインで動作を確認できているのはテーブル型カレンダー、独自タグが {calendar2} のみです。
１．プラグインのダウンロード
下記のリンク先にある RealTimeHolidayCalendar.zip または RealTimeHolidayCalendar.lzh をクリックして、プラグインのアーカイブをダウンロードしてください。
RealTimeHolidayCalendar.zip / RealTimeHolidayCalendar.lzh
ダウンロードしたアーカイブを解凍し、中にある RealTimeHolidayCalendar.pm を plugins ディレクトリ直下に、resource/ja/realtime_holidaycalendar.txt を、同じディレクトリの構成があると思いますので、realtime_holidaycalendar.txt のみを ja 配下にアップロードしてください。
アップロードの後、Serene Bach の管理画面を起動し、「環境設定」→「プラグイン」をクリックし、プラグイン一覧に RealTimeHolidayCategory.pm が表示されていることを確認し、一番右のチェックボックスをチェックして右下の「利用する」をクリックしてください。
注：リアルタイムカレンダープラグインをご利用の場合はリアルタイムカレンダープラグインの利用を停止してください。
２．休日表示用カレンダースクリプトのダウンロード・アップロード
下記のリンク先にある dayChecker.js をクリックして休日表示用カレンダースクリプトをダウンロードしてください。
ダウンロードした dayChecker.js を index.html と同じディレクトリにアップロードしてください。
３．独自タグの設定１
２項でダウンロードした dayChecker.js を使うための宣言を、ベースHTMLテンプレートに設定します。個別エントリー用HTMLテンプレートを設定している場合はそちらも同じ設定を行ってください。
下記のように </head> の前辺りに青色のブロックおよび独自タグを設定します。
：
<!-- BEGIN rt_holiday_calendar -->
{rt_holiday_calendar_script}
<!-- END rt_holiday_calendar -->
</head>
：４．独自タグの設定２
ベースHTMLテンプレートのサイドバーに設定しているカテゴリー表示用のブロック名および、独自タグを下記のように変更してください。
<!-- BEGIN calendar -->
<div class="side">
<div class="calendar">
{calendar2}
</div>
</div>
<!-- END calendar -->
<!-- BEGIN rt_holiday_calendar -->
{rt_holiday_script}
<!-- END rt_holiday_calendar -->５．カレンダーに id 属性の追加
カレンダータグに、下のサンプルリストのように id 属性として rt_holiday_calendar（青色部分）を追加します。
<!-- BEGIN calendar -->
<div class="side">
<div class="calendar" id="rt_holiday_calendar">
{calendar2}
</div>
</div>
<!-- END calendar -->
<!-- BEGIN rt_holiday_calendar -->
{rt_holiday_script}
<!-- END rt_holiday_calendar -->サンプルでは公開テンプレートを使って、内側の div タグに id 属性を付与していますが、タグの構造が異なる場合は、{calendar2} 等の独自タグを何らかのタグで括っていると思いますので、そのタグに id 属性を与えてください。
リアルタイムカレンダープラグインをご利用されていた方は rt_calendar という id 属性を rt_holiday_calendar に変更してください。
６．CSSの設定
スタイルシートに下記の設定を追加してください。
.holiday,
.holiday a:link {
color: #e50003;
}
.saturday,
.saturday a:link {
color: #0000ff;
}
.tholiday {
display: block;
border: 1px solid #444444;
color: #e50003;
}
.tholiday a:link {
color: #e50003;
}
.tsaturday {
display: block;
border: 1px solid #444444;
color: #0000ff;
}
.tsaturday a:link {
color: #0000ff;
}なお平日・土・日祝日の td 要素に対し、下記のセレクタを設定しています。
- 平日（本日）：today
- 土（本日以外）：saturday
- 土（本日・リンクなし）：tsaturday
- 土（本日・リンクあり）：tsaturday a:link
- 日祝日（本日以外）：holiday
- 日祝日（本日・リンクなし）：tholiday
- 日祝日（本日・リンクあり）：tholiday a:link
公開テンプレートの場合、today は設定されていますが、設定されていない場合は下記のようなセレクタを追加してください。
.today {
display: block;
text-align: center;
color: #444444;
border: 1px solid #444444;
}2006.03.27 追記
ページ内のカレンダーより前にテーブルタグが用いられている場合、正常に表示されない不具合を修正しました。
2006.04.11 追記
プラグインのスクリプト部分に誤りがありましたので修正しました。
リアルタイムカレンダープラグイン修正
現在公開中の Serene Bach・リアルタイムカレンダープラグインですが、「本日の日付が正常に表示されない」というご連絡を頂きまして、バグであることが判明しました。
具体的にはカレンダーの表示月と当月比較の処理に誤りがあり、当月が2月から9月の場合にこの不具合が発生します。
下記に修正版の RealTimeCalendar.zip または RealTimeCalendar.lzh を置きましたので、ご利用中の方はクリックしてアーカイブをダウンロードし、プラグインを差し替えください（元エントリーも変更済みです）。
以上です。
ご迷惑をおかけ致しますがよろしくお願い致します。
