小粋空間: カレンダーアーカイブ

Top ＞ Serene Bach ＞カスタマイズ＞カレンダー [全て開く]

2009年8月 9日

休日表示付リアルタイムカレンダープラグイン for Serene Bach 修正

August 9,2009 1:55 AM
Tag：[Calendar, Customize, Plugin, SereneBach]
Permalink

配布中の Serene Bach 用・休日表示付リアルタイムカレンダープラグインを修正しました。

休日表示付リアルタイムプラグイン

修正内容は次の通りです。

土・日・休日・本日表示が反映されない月がある不具合を修正

原因は、カレンダーの表示月を前月のナビゲーションリンクから取得しているのですが、正常に取得できないURLのパターンがありました。

取得するURL

http://user-domain/sb.cgi?month=200907

取得できなかったURL

http://user-domain/log/200907.html

ということで、プラグインに含まれる JavaScript を一部修正しました。修正内容は次の通りです。

変更前

...前略...
    var ym = link.split("=")[1];
    var year = ym.substring(0, 4);
    var month = ym.substring(4);
    month++;
    if(month == 13){
        month = 1;
        year++;
    }
...後略...

変更後

...前略...
    var ym;
    var year;
    var month;
    if (link.match(/=/)) {
        ym = link.split("=")[1];
        year = ym.substring(0,4);
        month = ym.substring(4);
    } else {
        ym = link.match(/\\d\\d\\d\\d\\d\\d\\.html/);
        year = ym.toString().substring(0,4);
        month = ym.toString().substring(4,6);
    }
    month++;
    if(month == 13){
        month = 1;
        year++;
    }
...後略...

プラグインは下記のリンクから取得してください。

休日表示付リアルタイムカレンダープラグイン for Serene Bach

Comments [2] | Trackbacks [0]

2009年2月17日

JavaScript カレンダー修正（シルバーウィーク対応）

February 17,2009 12:55 AM
Tag：[Calendar, JavaScript]
Permalink

現在公開中の「JavaScript カレンダー」をバージョンアップし、2009年9月のシルバーウィークに対応しました。

次のように、9月22日が休日表示になります。9月の表示はとりあえず2015年まで確認しています。

2009年9月のカレンダー

当サイトで公開している「Ajax 月送りカレンダー」や「休日表示付きリアルタイムカレンダー」など、カレンダーの休日の色を変えるカスタマイズをご利用の方は、下記のリンクから dayChecker.js をダウンロードして、現在ご利用の dayChecker.js と入れ替えてください。

WordPress の場合はプラグインファイルに同梱していますので、プラグインファイルの中にある dayChecker.js の内容を一部入れ替えてください。

Comments [7] | Trackbacks [0]

2007年4月10日

Flash カレンダープラグイン（3.00 対応版） for Serene Bach

April 10,2007 1:51 AM
Tag：[Calendar, Customize, Flash, SereneBach]
Permalink

当サイトで公開中の「Flash カレンダープラグイン for Serene Bach」をバージョンアップ致しました。

このプラグインは、Serene Bach で、Kinarie&May さんが配布されている Movable Type 用の Flash カレンダーを使えるようにするためのプラグインですが、配布元の Kinarie&May さんが Movable Type 用の Flash カレンダーをバージョンアップされ、「MT用横型フラッシュカレンダー3.00」を公開されていました（トラックバックで知りました）。

頂いたトラックバックでも「これまでのプラグインでは正常に動作しない」ということが書かれてましたので、早速試してみたところ、バージョンアップされた Flash カレンダーは読み込むためのXMLファイルのフォーマットが大幅に変更されてました。したがって、以前のFlash カレンダープラグインではフラッシュカレンダー3.00 は利用することができません。

ということで、今回バージョンアップに対応したプラグインを新たに作成しました。Kinarie&May さんは以前のカレンダーもそのまま配布されているようですので、お好きな方をお選びください。

当サイトのテンプレートではどのブログツールか分かりづらいので、Serene Bach テンプレート配布サイトとして有名な宵闇書房さんの「grayish」をサンプルにさせて頂きました。
左は Flash カレンダー適用前のスクリーンショットです（クリックすると全体が表示されます）。

このテンプレートに「Movable Type 用 Flash カレンダー」を設置するとこのようになります（画像は前のバージョンのものです。あしからず）。

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

下記のリンク先にある FlashCalendarHandler.zip または FlashCalendarHandler.lzh をクリックして、プラグインのアーカイブをダウンロードしてください。

FlashCalendarHandler.zip / FlashCalendarHandler.lzh

2007.04.10 Ver 2.00 公開
2007.04.18 Ver 2.01 XMLファイルが正常に生成されない不具合を修正
2007.05.28 Ver 2.02 EUC-JP版でXMLファイルが正常に生成されない不具合を修正
2007.05.28 Ver 2.03 本文・追記のCDATA化・タイムゾーンが適正に収集されない不具合を修正
2007.06.04 Ver 2.04 channel 要素が付与されない不具合を修正

２．プラグインのアップロード

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

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

３．テンプレートの設定

３．１フラッシュカレンダー表示用 object タグの作成

Kinarie&May さんのサイトにある「MT用横型フラッシュカレンダー3.00」のページを参考に、フラッシュカレンダー表示用 object タグを下記の手順で作成します。

swf ファイルのダウンロード（設置方法１）
swf ファイルのアップロード（設置方法２）
ソース（Object タグ）の作成（設置方法４）

「設置方法３」は Movable Type のための説明ですのでスキップしてください。
そして作成した object タグを、HTMLテンプレートのカレンダーを表示したい部分に貼り付けてください。

最後の「Object タグの作成」で、「XMLフォルダアドレス」を入力する項目があります。このアドレスには index.html までのURL（例：http://user-domain/）と

http://user-domain/xml/

と、青色で示したファイル名 xml ディレクトリを加えた内容を入力してください。最後の"/"をお忘れなく。

このディレクトリはFlash が読む込むためのXMLファイルを保存するディレクトリで、プラグインが自動生成します。
以前のバージョンでは calendar.xml というファイルをひとつだけ生成していましたが、3.00 対応では年月分のXMLファイル（yyyy_mm.xml）を生成する必要があります（2007年4月のエントリー情報が含まれるファイル名は "2007_04.xml" となります）。
そのため、xml ディレクトリを作成し、メインページがあるディレクトりが煩雑にならないようにしています。

設定画面の「設置場所」は「通常使用」を選択してください。デザイン・カラーはお好みに合わせて修正してください。

３．２フラッシュカレンダー用XML出力の独自ブロック

下記の独自ブロック（青色）をベースHTMLテンプレートの任意の位置に貼り付けてください。例は </body> の直前に設定した場合です。
注：個別記事用HTMLテンプレートを利用されている場合も、ベースHTMLテンプレートのみに設定してください。

<!-- BEGIN flash_calendar -->
<!-- END flash_calendar -->
 
</body>
</html>

これは、３．１項で設定した XML ファイルを出力するためのタグです。このファイルは swf ファイルが読み込む XML ファイルで、ページ上には何も表示されません。

４．ページの再構築

タグを貼り付けた後、インデックス（または全体）のページ再構築を行います。ブログに Flash カレンダーが表示されればOKです。スタイルは適宜設定してください。

表示されない場合、index.html があるディレクトリに xml ディレクトリおよびその配下に yyyy_mm.xml という年月別のファイルが作成されていることを確認してください。ファイルの有無で下記のいずれかの原因が考えられます。

作成されている場合：３．１項の「ソース（Object タグ）の作成」で設定内容に誤りがある可能性があります。
作成されていない場合：プラグインの設定または独自ブロックの設定に誤りがある可能性があります。

yyyy_mm.xml というファイルがひとつでも生成されていれば、Object タグで swf ファイルおよび yyyy_mm.xml を読み込む動作はブログの動作と関係ありませんので、簡素な HTMLページを作り、そこに Object タグを貼り付けて Flash が表示されるかどうか確認してみてください。

５．swf ファイルのキャッシュについて

エントリー投稿や再構築によって yyyy_mm.xml が更新されることは確認済ですが、ブラウザを更新してもカレンダー表示が更新されない場合があります。この原因は、yyyy_mm.xml を取得する swf ファイル自体がキャッシュから取得されてしまうようです。
これは利用しているレンタルサーバやブラウザの設定に依存するようです。

毎回最新の情報を取得するのであれば「ブラウザのキャッシュをクリアする」を参考にしてみてください。

６．参考：動作の仕組み

Flashカレンダーは、記事タイトル一覧と投稿日が記述された XML を Flash が読み込む元データとしてカレンダーを表示します。
Movable Type ではカレンダー表示用のタグとユーザが作成できるテンプレートを利用すればXMLを簡単に出力できますが、Serene Bach にはユーザがテンプレートやXMLファイルを出力する機能がないためプラグインで実現しました。

2007.04.18
バグ修正に伴い 2.01 をリリースしました。

2007.05.28
バグ修正に伴い 2.02 をリリースしました。

Comments [14] | Trackbacks [0]

2006年9月21日

Flash カレンダープラグインバージョンアップ

September 21,2006 2:50 PM
Tag：[Plugin, SereneBach]
Permalink

先日公開した「Flash カレンダープラグイン for Serene Bach」に不具合がありましたのでバージョンアップしました。

１．不具合

EUC-JP 版の Serene Bach で Ver1.00 の Flash カレンダープラグインを使用した場合、カレンダーの日付をマウスポイントした時に表示される記事タイトルが文字化けします。

２．原因

Flash カレンダー自体が UTF-8 にしか対応していないため、プラグインで生成する calendar.xml の文字コードがUTF-8 である必要がありますが、当方の認識不足でブログに依存した文字コードの calendar.xml を出力していました。
つまり、EUC-JP版の Serene Bach の場合、文字コード EUC-JP の calendar.xml を出力するため、前述の不具合が発生します。

これは neige essai さんの記事で気がつきました。ありがとうございました。

３．対処内容

文字コード UTF-8 の calendar.xml を出力するように変更しましたので、EUC-JP版 Serene Bach にも対応可能です。

ということで、現在 1.01 のプラグインを公開しています。EUC-JP版でブログを運用されている方はこちらをご利用ください。

Comments [0] | Trackbacks [0]

2006年9月18日

Flash カレンダープラグイン for Serene Bach

September 18,2006 12:03 AM
Tag：[Calendar, Customize, SereneBach]
Permalink

Serene Bach で、Kinarie&May さんが配布されている Movable Type 用の Flash カレンダー（通常版／横型）を使えるようにするためのプラグインです。

注：このプラグインは 2.0x までの対応です。フラッシュカレンダー 3.00 をご利用の場合は「Flash カレンダープラグイン（3.00 対応版） for Serene Bach」をご覧ください。

このテンプレートに「Movable Type 用 Flash カレンダー」を設置するとこのようになります。

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

下記のリンク先にある FlashCalendarHandler.zip または FlashCalendarHandler.lzh をクリックして、プラグインのアーカイブをダウンロードしてください。

FlashCalendarHandler.zip / FlashCalendarHandler.lzh

2006.09.14 Ver 1.00
2006.09.21 Ver 1.01 EUC-JP版対応
2006.09.26 Ver 1.02 文字コード変換を sb::Language 使用に変更
2006.09.28 Ver 1.03 calendar.xml に相対パス指定

２．プラグインのアップロード

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

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

３．テンプレートの設定

３．１フラッシュカレンダー表示用 object タグの作成

Kinarie&May さんのサイトにある「MT用通常版flashカレンダー」または「MT用横型flashカレンダー」のページを参考に、フラッシュカレンダー表示用 object タグを作成します。そして作成した object タグを、HTMLテンプレートのカレンダーを表示したい部分に貼り付けてください。

swf ファイルのダウンロード（解説ページの１項）
swf ファイルのアップロード（解説ページの２項）
Object タグの作成（解説ページの３項）

3.の「Object タグの作成」で、「XMLファイルアドレス」を入力する項目があります。このアドレスには index.html までのURL（例：http://user-domain/）と

http://user-domain/calendar.xml

と、青色で示したファイル名 calendar.xml を加えた内容を入力してください。

また、その下のラジオボタンは「通常使用」を選択してください。デザイン・カラーはお好みに合わせて修正してください。

３．２フラッシュカレンダー用XML出力の独自ブロック

下記の独自ブロック（青色）をベースHTMLテンプレートの任意の位置に貼り付けてください。例は </body> の直前に設定した場合です。
注：個別記事用HTMLテンプレートを利用されている場合も、ベースHTMLテンプレートのみに設定してください。

<!-- BEGIN flash_calendar -->
<!-- END flash_calendar -->
 
</body>
</html>

これは、３．１項で設定した calendar.xml を出力するためのタグです。calendar.xml は swf ファイルが読み込む XML ファイルです。ページ上には何も表示されません。

４．ページの再構築

表示されない場合、index.html があるディレクトリに calendar.xml というファイルが作成されていることを確認してください。ファイルの有無で下記のいずれかの原因が考えられます。

作成されている場合：３．１項の「3.Object タグの作成」で設定内容に誤りがある可能性があります。
作成されていない場合：プラグインの設定または独自ブロックの設定に誤りがある可能性があります。

calendar.xml が生成されていれば、Object タグで swf ファイルおよび calendar.xml を読み込む動作はブログの動作と関係ありませんので、簡素な HTMLページを作り、そこに Object タグを貼り付けて Flash が表示されるかどうか確認してみてください。

５．swf ファイルのキャッシュについて

エントリー投稿や再構築によって calendar.xml が更新されることは確認済ですが、ブラウザを更新してもカレンダー表示が更新されない場合があります。この原因は、calendar.xml を取得する swf ファイル自体がキャッシュから取得されてしまうようです。
これは利用しているレンタルサーバやブラウザの設定に依存するようです。

毎回最新の情報を取得するのであれば「ブラウザのキャッシュをクリアする」を参考にしてみてください。

６．参考：動作の仕組み

2006.12.20 追記
「独自タグ」は誤記でしたので、「独自ブロック」に修正しました。

2007.04.10 追記
２項の flashcalendarhandler.txt というファイル名が誤ってましたので修正しました。また 3.00 版へのリンクを追加しました。

Comments [16] | Trackbacks [7]

2006年4月24日

休日表示付リアルタイムカレンダープラグイン（横型） for Serene Bach 不具合修正のお知らせ

April 24,2006 12:37 AM
Tag：[Information, Plugin, SereneBach]
Permalink

トラックバックを頂いて気がついたのですが、休日表示付リアルタイムカレンダープラグイン（横型） for Serene Bach に不具合がありました。
具体的には、カレンダーの日付のリンクが連続している、つまり毎日投稿している場合、CSSの設定が全て反映されません。

本日プラグインを修正致しましたので、これまでご利用頂いている方は申し訳ございませんが休日表示付リアルタイムカレンダープラグイン（横型） for Serene Bach のエントリーよりプラグインの差し替えをお願い致します。また「プラグインが有効にならない」という方にはプラグインに実装しているスクリプトを抜き出し、直接テンプレートに設定して頂いてますが、その場合は下記の青色部分を1行追加してください。
テーブル型のプラグインには影響ありません。

　　　　　：
// add span
buf = buf.replace(/¥¥s(¥¥d+)¥¥s/gi," <span class=¥¥"day¥¥">¥$1<¥¥/span> ");
buf = buf.replace(/¥¥s(¥¥d+)¥¥s/gi," <span class=¥¥"day¥¥">¥$1<¥¥/span> ");
buf = buf.replace(/¥¥s(<a¥¥s¥¥S+>¥¥d+<¥¥/a>)¥¥s/gi," <span class=¥¥"day¥¥">¥$1<¥¥/span> ");
buf = buf.replace(/¥¥s(<a¥¥s¥¥S+>¥¥d+<¥¥/a>)¥¥s/gi," <span class=¥¥"day¥¥">¥$1<¥¥/span> ");
element.innerHTML = buf;
　　　　　：

以上です。
ご迷惑をおかけして申し訳ありませんがよろしくお願い致します。

Comments [0] | Trackbacks [0]

2006年4月 3日

休日表示付リアルタイムカレンダープラグイン（横型） for Serene Bach

April 3,2006 1:35 AM
Tag：[Calendar, Customize, Plugin, SereneBach]
Permalink

Serene Bach のカレンダーに土・日祝日・本日を表示するプラグインです（sb も大丈夫だと思います）。ここでは公開テンプレートをサンプルに横型タイプのカレンダーを追加するカスタマイズ方法をご紹介します。他のテンプレートでもご利用可能です。
スクリーンショットは公開テンプレートに設定した完成例です（画像をクリックすると全体が表示されます）。

注：本プラグインは横型カレンダー（独自タグが {calendar_horizontal}）専用です。

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

下記のリンク先にある RealTimeHolidayCalendar2.zip または RealTimeHolidayCalendar2.lzh をクリックして、プラグインのアーカイブをダウンロードしてください。

RealTimeHolidayCalendar2.zip / RealTimeHolidayCalendar2.lzh

2006.04.03 Ver 1.00 初版
2006.04.23 Ver 1.01 リンクが連続する場合にスタイルが反映されない不具合を修正

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

アップロードの後、Serene Bach の管理画面を起動し、「環境設定」→「プラグイン」をクリックし、プラグイン一覧に RealTimeHolidayCategory2.pm が表示されていることを確認し、一番右のチェックボックスをチェックして右下の「利用する」をクリックしてください。
注：リアルタイムカレンダープラグインをご利用の場合はリアルタイムカレンダープラグインの利用を停止してください。

２．休日表示用カレンダースクリプトのダウンロード・アップロード

下記のリンク先にある dayChecker.js をクリックして休日表示用カレンダースクリプトをダウンロードしてください。

download

ダウンロードした dayChecker.js を index.html と同じディレクトリにアップロードしてください。

３．独自タグの設定１

２項でダウンロードした dayChecker.js を使うための宣言を、ベースHTMLテンプレートに設定します。個別エントリー用HTMLテンプレートを設定している場合はそちらも同じ設定を行ってください。
下記のように </head> の前辺りに青色のブロックおよび独自タグを設定します。

　　　　　　：
<!-- BEGIN rt_holiday_calendar -->
{rt_holiday_calendar_script}
<!-- END rt_holiday_calendar -->
</head>
　　　　　　：

４．独自タグの設定２

新しく横型カレンダーを設置される場合、ベースHTMLテンプレート（個別エントリーを使っている場合はそちらも）のバナーの下にカレンダー用の独自タグおよび休日表示用カレンダースクリプトの独自タグ（青色）を下記のように追加してください。

<!-- BEGIN title -->
<div id="banner">
<h1 id="banner-header">{blog_name}</h1>
<h2 id="banner-description">{blog_description}</h2>
</div>
<!-- END title -->
 
<!-- BEGIN calendar -->
<div id="rt_holiday_calendar">
{calendar_horizontal}
</div>
<!-- END calendar -->
 
<!-- BEGIN rt_holiday_calendar -->
{rt_holiday_script}
<!-- END rt_holiday_calendar -->

カレンダー独自タグをすでに設定されている場合、下記の青色部分を追加してください。

<!-- BEGIN calendar -->
<div id="rt_holiday_calendar">
{calendar_horizontal}
</div>
<!-- END calendar -->
 
<!-- BEGIN rt_holiday_calendar -->
{rt_holiday_script}
<!-- END rt_holiday_calendar -->

ここでは div タグに id 属性を追加していますが、タグの構成が異なる場合、id 属性 rt_holiday_calendar を {calendar_horizontal} で括っているタグに付与してください（タグの構成が異なる場合、後述のCSSの設定で若干変更が必要になるかも知れません）。{calendar_horizontal} がタグで括られていない場合は下のように div タグを追加してください。

リアルタイムカレンダープラグインをご利用されていた方は、rt_calendar という id 属性を rt_holiday_calendar に変更してください。

５．CSSの設定

スタイルシートに下記の設定を追加してください。

#rt_holiday_calendar {
    font-size: 9px;
    text-align: center;
    padding: 5px 0; /* カレンダー上下のパディング */
    border-bottom : 1px solid #666699; /* カレンダー下の罫線 */
}
.today {
    padding: 0 1px;
    border: 1px solid #444444;
}
.holiday,
.holiday a:link {
    color: #e50003;
}
.saturday,
.saturday a:link {
    color: #0000ff;
}
.tholiday {
    border: 1px solid #444444;
    color: #e50003;
}
.tholiday a:link {
    color: #e50003;
}
.tsaturday {
    border: 1px solid #444444;
    color: #0000ff;
}
.tsaturday a:link {
    color: #0000ff;
}

上記の #rt_holiday_calendar は公開テンプレートに併せた設定ですので、ご利用のテンプレートに併せて適宜修正してください。
なお平日・土・日祝日の span 要素に対し、下記のセレクタを設定しています（span 要素は JavaScript で後から設定していますのでソース上は見えません）。

平日（本日）：today
土（本日以外）：saturday
土（本日・リンクなし）：tsaturday
土（本日・リンクあり）：tsaturday a:link
日祝日（本日以外）：holiday
日祝日（本日・リンクなし）：tholiday
日祝日（本日・リンクあり）：tholiday a:link

公開テンプレートをご利用の場合、設定されている today セレクタ（下記）を削除してください。

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

６．CSSが反映されない場合

カレンダー全体を他の id 属性で括り、それに対してCSSを設定している場合、５項のCSSが反映されない可能性があります（id 属性に対するCSSが優先されるため）。その場合は古いCSSを削除するか、５項の設定を

　　　　　　　：
#rt_holiday_calendar .today {
    padding: 0 1px;
    border: 1px solid #444444;
}
#rt_holiday_calendar .holiday,
#rt_holiday_calendar .holiday a:link {
    color: #e50003;
}
#rt_holiday_calendar .saturday,
#rt_holiday_calendar .saturday a:link {
    color: #0000ff;
}
#rt_holiday_calendar .tholiday {
    border: 1px solid #444444;
    color: #e50003;
}
#rt_holiday_calendar .tholiday a:link {
    color: #e50003;
}
#rt_holiday_calendar .tsaturday {
    border: 1px solid #444444;
    color: #0000ff;
}
#rt_holiday_calendar .tsaturday a:link {
    color: #0000ff;
}

としてください。#rt_holiday_calendar の後ろの半角空白を忘れずに。

７．その他

休日表示付リアルタイムカレンダープラグイン for Serene Bachでプラグインが反映されないという報告を頂いてますが原因不明のため、プラグインに記しているスクリプトを直接埋め込むように回答しています。不具合が発生して設定方法が分からない方はご連絡ください。

2006.04.23 追記
プラグインでリンクが連続する場合にスタイルが反映されない不具合を修正しました。また６項を追記しました。

Comments [26] | Trackbacks [6]

2006年3月20日

休日表示付リアルタイムカレンダープラグイン for Serene Bach

March 20,2006 3:10 AM
Tag：[Calendar, Customize, Plugin, SereneBach]
Permalink

休日表示付リアルタイムプラグイン 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 をクリックして休日表示用カレンダースクリプトをダウンロードしてください。

download

ダウンロードした dayChecker.js を index.html と同じディレクトリにアップロードしてください。

３．独自タグの設定１

　　　　　　：
<!-- 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 追記
プラグインのスクリプト部分に誤りがありましたので修正しました。

Comments [40] | Trackbacks [7]

2006年3月 9日

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

March 9,2006 1:55 AM
Tag：[Calendar, Information, Plugin, SereneBach]
Permalink

現在公開中の Serene Bach・リアルタイムカレンダープラグインですが、「本日の日付が正常に表示されない」というご連絡を頂きまして、バグであることが判明しました。
具体的にはカレンダーの表示月と当月比較の処理に誤りがあり、当月が2月から9月の場合にこの不具合が発生します。

下記に修正版の RealTimeCalendar.zip または RealTimeCalendar.lzh を置きましたので、ご利用中の方はクリックしてアーカイブをダウンロードし、プラグインを差し替えください（元エントリーも変更済みです）。

以上です。
ご迷惑をおかけ致しますがよろしくお願い致します。

Comments [4] | Trackbacks [1]

2005年12月 8日

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

December 8,2005 11:57 PM
Tag：[Calendar, Customize, Plugin, SereneBach]
Permalink

リアルタイムカレンダープラグイン 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.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 -->

もし他の 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 用プラグインを参考にさせて頂きました。この場をお借りしてお礼申し上げます。

Comments [8] | Trackbacks [2]

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

休日表示付リアルタイムカレンダープラグイン for Serene Bach 修正

JavaScript カレンダー修正（シルバーウィーク対応）

Flash カレンダープラグイン（3.00 対応版） for Serene Bach

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

２．プラグインのアップロード

３．テンプレートの設定

３．１ フラッシュカレンダー表示用 object タグの作成

３．２ フラッシュカレンダー用XML出力の独自ブロック

４．ページの再構築

５．swf ファイルのキャッシュについて

６．参考：動作の仕組み

Flash カレンダープラグイン バージョンアップ

１．不具合

２．原因

３．対処内容

Flash カレンダープラグイン for Serene Bach

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

２．プラグインのアップロード

３．テンプレートの設定

３．１ フラッシュカレンダー表示用 object タグの作成

３．２ フラッシュカレンダー用XML出力の独自ブロック

４．ページの再構築

５．swf ファイルのキャッシュについて

６．参考：動作の仕組み

休日表示付リアルタイムカレンダープラグイン（横型） for Serene Bach 不具合修正のお知らせ

休日表示付リアルタイムカレンダープラグイン（横型） for Serene Bach

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

２．休日表示用カレンダースクリプトのダウンロード・アップロード

３．独自タグの設定１

４．独自タグの設定２

５．CSSの設定

６．CSSが反映されない場合

７．その他

休日表示付リアルタイムカレンダープラグイン for Serene Bach

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

２．休日表示用カレンダースクリプトのダウンロード・アップロード

３．独自タグの設定１

４．独自タグの設定２

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

６．CSSの設定

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

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

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

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

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

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

３．１フラッシュカレンダー表示用 object タグの作成

３．２フラッシュカレンダー用XML出力の独自ブロック

Flash カレンダープラグインバージョンアップ

３．１フラッシュカレンダー表示用 object タグの作成

３．２フラッシュカレンダー用XML出力の独自ブロック