小粋空間  -  a cheap joke and a play on words site

リアルタイムカレンダープラグイン

Serene Bach カレンダーの本日の日付をリアルタイムに切り替えるプラグインです。

Serene Bach のカレンダーは、本日の日付に span 要素を自動的に付与し、その class 属性 today をCSSで利用することで、日付に枠をつける等の装飾を行うことができます。
ただし index.html 等のスタティックなページについては、日付が変わっても次の再構築が発動するまで日付の装飾を変更することができません。

ということで、過去の日付に与えられている class 属性（today）を本日の日付に付与しなおすプラグインを作りました。スクリーンショットは12月8日に枠がついている状態ですが、この枠を再構築なしで12月9日以降に移動することができます。すでに同じカスタマイズが公開されているようですが、作ってしまったので公開します。プラグイン形式ですが、中身は単なる JavaScript です。

Serene Bach で提供されているカレンダーをそのまま使うことができます。calendar ブロックの独自タグ {calendar} / {calendar2} / {calendar_horizontal} / {calendar_vertical} の4種類のカレンダー全てについて、Windows2000/XP の IE/Firefox/Opera で動作を確認していますが、不具合等ございましたらご連絡ください。

以下カスタマイズ方法です。

１．プラグインのダウンロード・アップロード

下記の RealTimeCalendar.zip または RealTimeCalendar.lzh をクリックしてアーカイブをダウンロードします。

• RealTimeCalendar.zip
• RealTimeCalendar.lzh

アーカイブを解凍し、中にある RealTimeCalendar.pm を plugins ディレクトリ直下に、resource/ja/rtcalendar.txt を、同じディレクトリの構成があると思いますので、rtcalendar.txt のみを ja 配下にアップロードしてください。

アップロードのあと、Serene Bach の管理画面を起動し、「環境設定」→「プラグイン」をクリックし、プラグイン一覧に RealTimeCalendar.pm が表示されていることを確認し、一番右のチェックボックスをチェックして右下の「利用する」をクリックしてください。

２．ブロックと独自タグの追加

カレンダータグの下に、下のサンプルリストのようにリアルタイムカレンダースクリプト表示用のブロックおよび独自タグ（青色部分）を追加します。

<!-- BEGIN calendar -->
<div class="side">
<div class="calendar">
{calendar2}
</div>
</div>
<!-- END calendar -->
 
<!-- BEGIN rt_calendar -->
{rt_calendar_script}
<!-- END rt_calendar -->

３．カレンダーに id 属性の追加

カレンダータグに、下のサンプルリストのように id 属性として rt_calendar （青色部分）を追加します。

<!-- BEGIN calendar -->
<div class="side">
<div class="calendar" id="rt_calendar">
{calendar2}
</div>
</div>
<!-- END calendar -->
 
<!-- BEGIN rt_calendar -->
{rt_calendar_script}
<!-- END rt_calendar -->

サンプルでは公開テンプレートを使って、内側の div タグに id 属性を付与していますが、タグの構造が異なる場合は、{calendar2} 等の独自タグを何らかのタグで括っていると思いますので、そのタグに id 属性を与えてください。

もし他の id 属性がタグに付与されている場合は、ひとつのタグに id 属性を複数与えることはできませんので、先ほどアップロードした RealTimeCalendar.pm を任意のエディタで開き、37行目の

var id = 'rt_calendar';

の赤色部分を、現在使っている id 属性に書き換えてやってください。

４．公開テンプレートをお使いの方へ

公開テンプレートで本プラグインを適用した場合、本日の日付にリンクがあると、リンクのスタイル（色や下線）が適用されなくなるようですので、スタイルシートにある下記の赤色部分を削除（またはコメントアウト）してください。

.today {
    display: block;
    text-align: center;
    color: #444444;
    border: 1px solid #444444;
}

以上です。
なおプラグイン作成にあたっては The blog of H.Fujimoto さんの Serene Bach 用プラグインを参考にさせて頂きました。この場をお借りしてお礼申し上げます。