Top > CMS・ブログ > Serene Bach > カスタマイズ > カレンダー > 2006年3月
2006年3月20日

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

March 20,2006 3:10 AM
Tag:[, , , ]
Permalink

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

注:本プラグインで動作を確認できているのはテーブル型カレンダー、独自タグが {calendar2} のみです。

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

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

RealTimeHolidayCalendar.zip / RealTimeHolidayCalendar.lzh

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

アップロードの後、Serene Bach の管理画面を起動し、「環境設定」→「プラグイン」をクリックし、プラグイン一覧に RealTimeHolidayCategory.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 calendar -->
<div class="side">
<div class="calendar">
{calendar2}
</div>
</div>
<!-- END calendar -->
 
<!-- BEGIN rt_holiday_calendar -->
{rt_holiday_script}
<!-- END rt_holiday_calendar -->

5.カレンダーに 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 に変更してください。

6.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日

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

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

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

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

Comments [4] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner


AMN
Categories
Monthly Archives
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3