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

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

Posted at April 3,2006 1:35 AM
Tag:[Calendar, Customize, Plugin, SereneBach]

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

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

1.プラグインのダウンロード

下記のリンク先にある 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 が表示されていることを確認し、一番右のチェックボックスをチェックして右下の「利用する」をクリックしてください。
注:リアルタイムカレンダープラグインをご利用の場合はリアルタイムカレンダープラグインの利用を停止してください。

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

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

download

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

3.独自タグの設定1

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

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

4.独自タグの設定2

新しく横型カレンダーを設置される場合、ベース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 に変更してください。

5.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;
}

6.CSSが反映されない場合

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

       :
#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 の後ろの半角空白を忘れずに。

7.その他

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

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

関連記事
トラックバックURL


トラックバック

テンプレート変更 from VanillaCream**BLOG
この間から気になっていたプラグインを入れたくてなかなかうまく行かなくて3カラムから2カラムに変更しました??テンプレートはblog TK*Plus1 | ... [続きを読む]

Tracked on April 8, 2006 11:19 PM

Serene Bach カスタマイズ from 徒然なるKAZUOの日常
最近トラックバックスパムが多いので、スパムフィルターを導入することにしました。使ったのは凪さんのサイト「this calm night.」にて配布されてい... [続きを読む]

Tracked on April 12, 2006 3:29 PM

カスタマイズMEMO from m*size Blog
久々に(?!)チョコっとカスタマイズъ( ゜ー^)バニラちゃまのBlogで気になってた休日表示付リアルタイムカレンダー。私も真似っこでカスタマイズしちゃい... [続きを読む]

Tracked on April 23, 2006 3:19 AM

weblogカスタマイズ2・小粋空間さんより from おかち日和
SereneBachでウェブログを新しく作るにあたり、たくさんの技をお借りしました。 [続きを読む]

Tracked on January 16, 2007 5:20 PM

お世話になりましたサイト様。 from :: go with the light ::
☆プラグインをお借りしたサイト様。・[あ]UnderDone(あんでるどん)様http://underdone.net/blog/「うにゅうにゅ Read... [続きを読む]

Tracked on June 4, 2007 6:56 PM

カレンダーを横表示にする from apfelschorle
以前にjugemさんを利用していた頃から、カレンダーは横表示が好きで、今回も横表示にするべく、頑張ってみました。 [続きを読む]

Tracked on October 1, 2008 5:10 PM
コメント

yujiroさん、こんにちは。
『休日表示付リアルタイムカレンダープラグイン(横型) for Serene Bach』 をみつけ、さっそく導入してみました。これで良いのかな?と恐る恐る設置してみましたが、何とか表示されてるのでホッと一安心です。ありがとうございました。

[1] Posted by ちこりん : April 3, 2006 6:33 PM

>ちこりんさん
こんばんは。
ご利用&ご連絡ありがとうございました。
うまくできたようで私もホッとしています(笑)。
ではでは!

[2] Posted by yujiro : April 4, 2006 12:20 AM

CGIは詳しくないのでよく分からないのですが、プラグインのソースを見たところでは、
use vars
の下りが「休日表示付リアルタイムカレンダー」に無いのが気になります。
まさか、これが原因ってことはないですよね?

[3] Posted by キャニオン : April 8, 2006 12:33 AM

>キャニオンさん
こんばんは。
チェックくださりありがとうございます。
use vars? は変数をグローバル変数として定義する場合の指定ですので、本プラグインでは不要と思います。
お作法として use strict; は設定した方が良いかもしれません。

[4] Posted by yujiro : April 8, 2006 2:16 AM

おはようございます。
いろいろいじったのが悪かったのでしょうか・・?
カレンダーがまた変になってしまいました。
当日の囲まれてる部分が横に長くなってしまいました。
昨日までちゃんと表示されていたのですが・・・。

[5] Posted by ちこりん : April 8, 2006 9:40 AM

テンプレートを変更したので横型もお借りしました^^
テンプレのCSSの設定と設定方法が合いませんがこれからきちんと表示でされるように変更しています♪

[6] Posted by ばにら : April 8, 2006 11:18 PM

>ちこりんさん
こんばんは。
ご質問の件ですが、スタイルシートの下記の赤色部分を削除してください。

    : .tholiday {     display: block;     border: 1px solid #444444;     color: #e50003; }     : .tsaturday {     display: block;     border: 1px solid #444444;     color: #0000ff; }     :

横長になる原因は、スタイルシートで指定した要素がブロック指定(display:block)になっていると前後に改行が含まれてしまうためです。

以上です。
それではよろしくお願い致します。

[7] Posted by yujiro : April 8, 2006 11:22 PM

yujiroさん、こんばんは。
おかげさまで直りました。
いつも聞く事ばかりですみません。
本当にありがとうございました。

[8] Posted by ちこりん : April 8, 2006 11:37 PM

>ちこりんさん
こんばんは。
ご連絡ありがとうございます。
直ったようでなによりです。
ではでは!

[9] Posted by yujiro : April 9, 2006 12:25 AM

yujiroさん。コンバンワ★

『休日表示付リアルタイムカレンダープラグイン(横型) for Serene Bach』 を友だちのブログで見つけ...早速、私のブログにも!と、思い使用させて頂きました。

何故か記事を書き込みと反映されないのですが私の設定が間違ってるのでしょうか???

あと、TBもさせて頂きました

[10] Posted by Maron : April 23, 2006 3:13 AM

yujiroさん。
お忙しい中、早急の対応...
お陰さまでしっかり!(記事の書き込みをしても)表示されるようになりました。

どうもアリガトウございました

[11] Posted by Maron : April 23, 2006 11:59 PM

>Maronさん
こんばんは。
ご利用&ご連絡ありがとうございました。
確認不足で申し訳ありません。

無事に表示されて良かったです。
ではでは!

[12] Posted by yujiro : April 24, 2006 12:40 AM

こんにちは。
いつもMovable Typeのブログのカスタマイズでお世話になっていますが、この度Serene Bachにも手を出し、カスタマイズをしております。

このプラグインも利用してみたのですが、「休日に投稿が合った場合のリンクの色が休日色ではなくなってしまう」のです。
MTでも同じトラブルに見舞われたものの、MTでは簡単に直せました。が、今回はどうにもわかりません。
いろいろ探ってみたのですが。。。

いったい、どこを直したらいいのでしょうか???

[13] Posted by chiffon : July 16, 2006 3:50 PM

自己解決しました!
カレンダーがタイトルエリア内にあったことが原因でした。(6項の状態?)

6項を実行しても直らないため、行き詰っていましたが、カレンダーのエリアとタイトルのエリアを分けることで直りました。
たびたびお騒がせしてすみません。

[14] Posted by chiffon : July 16, 2006 7:40 PM

コメント3つも続けてしまい失礼します。あわてんぼうです(^_^;)
上記に書いた原因とともに、スタイルシートのほうも土曜日や休日にはa:link のところに「.holiday a」「.saturday a」「.tholiday a」「.tsaturday a」も必要だったようです。
(本日と本日以外の両方に必要かどうかは???)
そもそもスタイルシートのほかの部分を直す必要があるのかもしれないのですが、とりあえず現在正しく表示されているようなので、ま、いっか、と思ってます。
原因を探していろいろなサイトを開いてみたときに同じような状態になっていたサイトもありましたので、参考になるかもしれないと思い、書き込ませていただきました。

[15] Posted by chiffon : July 16, 2006 9:17 PM

>chiffonさん
こんばんは。
ご連絡ありがとうございました。
無事に表示されたようでよかったです。
設定が不足していた件については別途追記したいと思います。
ではでは!

[16] Posted by yujiro : July 18, 2006 1:00 AM

こんばんは。
なんとなく原因のようなものがわかった気がします。
何気なくソースを見てみると、3項で設定した独自タグの部分が、使っている文字コード(EUC)と違って、UTF-8と表示されていました。
それでスクリプトの文字コードを変更して保存し、アップしなおすのですが、全く直りませんでした。

それで、本日サーバー移転をきっかけに文字コードをUTF-8の方をインストールして使うことにしたところ、 yujiroさんの書かれた内容どおりで問題なく表示されました。

もう一つ新着表示に不具合があるのですが、そちらは、落ち着いたらそちらのエントリーにて相談させていただこうかと思っております。

最後に、Movable Typeでのブログでテンプレートを使わせていただき、Template Users
にも入れていただいている「chiffon's diary」もアドレスが変更になりましたので、変えていただけたら幸いです。
アドレスは
http://chiffon.j-mx.com/diary/
です。

[17] Posted by chiffon : July 26, 2006 11:49 PM

>chiffonさん
こんにちは。
ご連絡ありがとうございます。
3項で表示される文字コードは dayChecker.js の文字コードを指定するものですので、ご利用のブログの文字コードがEUCでも大丈夫と思いますが、確認したところ、私がアップロードした dayChecker.js の文字コードが Shift_JIS になってしまっておりました。これがうまく表示されなかった原因かもしれません。ご迷惑おかけして大変申し訳ございません。
とりあえず無事に直ったようでよかったです。

URLの方も先ほど修正させていただきました。
それではよろしくお願い致します。

[18] Posted by yujiro : July 27, 2006 10:39 AM

こんばんわ。

久々にblogをリニューアルしようと思い、このプラグインを使わせて頂こうと思いました。
しかし、一部のリンク(BlogPeopleなど)から飛んで来た時に、IEで文字化けが起きるのです。
Javaの方の文字コードをUTF-8にしてみましたがダメでした。

現在はプラグインを外して通常のカレンダーに戻してしまいましたが、報告だけでもと思いコメントさせて頂きます。
報告が遅れてしまい申し訳ございませんでした。

[19] Posted by Taka : March 3, 2007 12:41 AM

>Takaさん
こんばんは。
ご連絡ありがとうございました。
こちらでは事象が確認できないため、可能であれば不具合の発生するページのファイルを、FTPツール等でファイル名を変更し、そのファイルを確認させて頂ければ幸いです。
それではよろしくお願い致します。

[20] Posted by yujiro : March 5, 2007 6:08 PM

こんばんわ。

確認して頂こうともう一度横型カレンダーを組み込んでみました。
結果、文字化けは再現されませんでした。

化けていた時と何か条件が違うのかもしれませんが、今となっては全く同じ環境を作る事は出来ません。
原因を調べていた時、Javaの方はUPし直したのですが、プラグインの方はそのままだったので、プラグインのファイルが壊れていた等の原因で化けていたのかもしれません。

今回は私のミスで起きていた現象だった様で、ご迷惑をお掛けして申し訳ございませんでした。
今後はこの様な事の無いように気をつけたいと思います。

[21] Posted by Taka : March 7, 2007 7:18 PM

>Takaさん
こんにちは。
ご連絡ありがとうございました。
こちらで公開しているカスタマイズは基本的にベータ版という認識ですので、不具合がありましたらお気軽にご連絡ください。どうぞお気遣いなく。
それではよろしくお願い致します。

[22] Posted by yujiro : March 8, 2007 1:50 PM

はじめまして。最近SBを利用し始め、小粋空間さまにはカスタマイズで大変お世話になっております。

休日表示ができることに感激し、プラグインをお借りしたのですが、amazonのオススメ表示をテンプレートに追加してみたところ、それまで問題なく表示されていた休日の色が変わらなくなってしまいました。
todayのスタイルは適応されているようなので、色だけが適応されない原因が分からず行き詰ってしまい、何かアドバイスをいただければと思いコメントさせていただきました。
よろしくお願いいたします。

ひとつ前のコメントから時間が空いていますが、こちらにコメントで問題ありませんでしたでしょうか...?

[23] Posted by あき : August 13, 2008 1:34 PM

>あきさん
こんばんは。
ご質問の件ですが、CSSのセレクタ名(holiday/saturdayなど)が重複しているのではないかと思われます。
解決できない場合は不具合が生じている状態のサイトのURLをご連絡ください。
それではよろしくお願い致します。

[24] Posted by yujiro logo : August 16, 2008 11:59 PM

yujiroさんご回答ありがとうございます。

セレクタ名を変えてみましたが改善されず、機能を切ったり表示数を変更したりをできる限り試したところ、どうやらオススメを二つ以上表示すると反映されなくなるようです。
ソースを開いたところ、スクリプトがごっそりなくなっている状態でした。

原因はわかったのですが、そこからまた動けなくなってしまい、お手数をかけてしまうのですが、URLを添えさせていただきました。http://ri2tw0.com/sb/です。
お時間あるときにで構いませんので見てやってください。よろしくお願いいたします。

[25] Posted by あき : August 19, 2008 2:05 PM

>あきさん
こんにちは。
対処については申し訳ありませんが、下記の内容を直接テンプレートに設定してください。

なお、Amazonの表示にプラグインを使われているのでしたらプラグインの配布元URLをご連絡ください。

1.head終了タグの直前に下記を追加。「ドメイン」の部分はブログのドメインに書き換えてください。

<script type="text/javascript" src="http://ドメイン/dayChecker.js"></script>

2.body終了タグの直前に下記を追加。「ドメイン」の部分はブログのドメインに書き換えてください。

<script type="text/javascript" src="http://ドメイン/calendar.js"></script>

3.以下の内容を外部ファイル(calendar.js)として index.html と同じ位置にアップロード。

function setWeekendAndHoliday() {
    var id = 'rt_holiday_calendar';
 
    // check year and month
    var element = document.getElementById(id);
    if(!element){
        return;
    }
    var link = element.getElementsByTagName('a')[0].getAttribute('href');
    var ym = link.split('=')[1];
    var year = ym.substring(0, 4);
    var month = ym.substring(4);
    if (month == '12') {
        month = '01';
        year++;
    } else {
        month++;
        if (month < 10) {
            month = '0' + month.toString();
        }
    }
    buf = element.innerHTML;
 
    // delete span
    buf = buf.replace(/<span class="today">(\d+)<\/span>/gi,"\$1");
    buf = buf.replace(/<span class=today>(\d+)<\/span>/gi,"\$1"); // for IE
 
    // 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;
 
    var spans = element.getElementsByTagName("span");
    var day;
 
    for (i = 0; i < spans.length; i++) {
        if (spans[i].getAttribute("class") == "day" ||
             spans[i].getAttribute("className") == "day") {
            if(spans[i].innerHTML.indexOf("href") != -1){
                day = spans[i].getElementsByTagName("a")[0].innerHTML;
            } else {
                day = spans[i].innerHTML;
            }
            if (isHoliday(year, month, day)) {
                if (isToday(year, month, day)) {
                    spans[i].setAttribute('class', 'tholiday');
                    spans[i].setAttribute('className', 'tholiday');
                } else {
                    spans[i].setAttribute('class', 'holiday');
                    spans[i].setAttribute('className', 'holiday');
                }
            } else if(isSaturday(year, month, day)) {
                if (isToday(year, month, day)) {
                    spans[i].setAttribute('class', 'tsaturday');
                    spans[i].setAttribute('className', 'tsaturday');
                } else {
                    spans[i].setAttribute('class', 'saturday');
                    spans[i].setAttribute('className', 'saturday');
                }
            } else if (isToday(year, month, day)) {
                spans[i].setAttribute('class', 'today');
                spans[i].setAttribute('className', 'today');
            }
        }
    }
}
setCurrentDate();
setWeekendAndHoliday();

それではよろしくお願い致します。

[26] Posted by yujiro logo : August 23, 2008 5:33 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)