ブログテンプレートの CALENDAR 上で『今日』 の日付を分別表示したいという要望をカスタマ掲示板で目にしました。
この機能は一部他ブログではサポートされている（ JUGEM では後に停止された）機能ですが、システムに負荷が掛かる為なのか ＦＣ２blogでは実装されていません。 が、これは我々クライアントサイドでもテンプレートにスクリプト等を加える事により実現する事が可能です。
ＪＵＧＥＭでは機能停止後、直ちにそれを代替するスクリプトが提供されたものですが、 「ＦＣ２の独自タグならひょっとして・・」 と挑戦してみた処、私にも可能であったので此処で御紹介させて頂くことにしました。
( 横型カレンダーの場合です )
【 設置法 】 ＣＳＳに today という『今日』を表示するスタイルを定める class を設定します
.today {background:red}
（ 例： 背景色を赤にする ）
head領域に以下のスクリプトを記述します
<script type="text/javascript"><!--
var today=new Date();
function dday(u1,u2,u3) {
var d=u3;
if (d.indexOf(">")>0) {d=(d.split('>')[1]).split('<')[0]}
var cday=new Date(u1,u2-1,eval(d));
var df=(today-cday);
if (df>0 && df<86400000) {document.write('<span class="today">'+u3+'</span> ')}
else {document.write(u3+' ')}
}
--></script>
カレンダー部を以下のように改変します。
<!--calender2-->
<script type="text/javascript">dday(<%now_year>,<%now_month>,'<%days>')</script>
<noscript><%days> </noscript>
<!--/calender2-->
【 解 説 】 スクリプトはまず「今日」が何日であるかを示す変数”today”を作成します。
日にちを同定する関数”dday()”はカレンダー部で<%now_year>と<%now_month>から年・月を取得し、<%day>と組み合わせてDateオブジェクトを作り、それを”today”と比較して「今日」であるかを判別し、そうであった場合はＣＳＳのクラス”.today”をspanタグで適用します。
（ 応用すれば横カレンダでも「曜日別表示」等が可能になるかもしれません ）
通常型カレンダーについては（可能であったらば）後日改めて・・ m(＿)m
共有プラグインＣａｌｅｎｄＡｒｃｈｉｖｅに実装しました
Comment
★
いち
いち
Edit
06/10 03:41 |
初めまして。
これ、便利な機能で助かっています。
ところで、このカレンダーだと日付同士の間隔が狭くて少し見づらく感じました。
これを使う前は、<%days>の後に全角スペースを入れると、日付同士の幅が変更できたんですが、これだと出来ませんでした。
何か的確な日付の間隔変更方法などありますでしょうか？
よろしければ教えてください。
|
★
daniel
daniel
Edit
06/10 08:46 |
いちさんおはようございます。
横型カレンダーの当日表示でございますね。
日付と日付の間隔をもっと拡げられたいと。
以下のようにされてみてください。
スクリプト中の +u3 を +' '+u3 に変更
|
★
いち
いち
Edit
06/10 21:25 |
変更したら幅を広くできました。
早速ご対応くださいまして、ありがとうございました。
|
|
TrackBack http://pcafe.blog3.fc2.com/tb.php/84-27fdca15
Shown after Admisson