休日表示付リアルタイムカレンダー for livedoor ブログ

休日表示付リアルタイムカレンダー for livedoor ブログ

Posted at October 5,2006 12:02 AM
Tag:[Calendar, Customize, livedoor]

休日表示付リアルタイムカレンダーlivedoor ブログのカレンダーに土・日・休日・本日を表示するカスタマイズです。ここでは公開テンプレートを利用したカスタマイズをご紹介していますが、他のテンプレートでも利用可能です。
スクリーンショットは公開テンプレートに設定した完成例です。また実験サイトにも設置しておりますので、動作をお試しください。

1.テンプレートの設定

1.1 livedoor Blog(無料版)の場合

トップページ/個別記事ページ/カテゴリアーカイブ/月別アーカイブの各テンプレートの </body> の前に下記のリストを貼り付けます。

<script type="text/javascript">
var currentYear;
var currentMonth;
var currentDay;
function setCurrentDate() {
  data = new Date();
  currentYear = data.getYear();
  currentYear = (currentYear < 2000) ? currentYear + 1900 : currentYear;
  currentMonth = data.getMonth() + 1;
  currentDay = data.getDate();
}
function isToday(year, month, day) {
  if (year == currentYear && parseInt(month,10) == currentMonth && day == currentDay) {return true;}
  return false;
}
function isSaturday(year, month, day) {
  var week = new Date(year, month - 1, day).getDay();
  if (week == 6) {return true;}
  return false;
}
function isHoliday(year, month, day) {
  var week = new Date(year, month - 1, day).getDay();
  if (week == 0) {return true;}
  switch(parseInt(month,10)) {
  case 1:
  if (day == 1) {return true;}
  if (day == 2 && isSunday(year, month, 1)) {return true;}
  if (day == (getFirstMonday(year, month) + 7)) {return true;}
  break;
  case 2:
  if (day == 11) {return true;}
  if (day == 12 && isSunday(year, month, 11)) {return true;}
  break;
  case 3:
  if(year > 1979 && year < 2100) {
    if (day == parseInt(20.8431 + 0.242194 * (year - 1980) - parseInt((year - 1980) / 4))) {
      return true;
    }
  }
  break;
  case 4:
  if (day == 29) {return true;}
  if (day == 30 && isSunday(year, month, 29)) {return true;}
  break;
  case 5:
  if (day == 3 || day == 4 || day == 5) {return true;}
  if (day == 6 && (isSunday(year, month, 3) ||
    isSunday(year, month, 4) ||
    isSunday(year, month, 5))) {
    return true;
  }
  break;
  case 7:
  if (day == (getFirstMonday(year, month) + 14)) {return true;}
  break;
  case 9:
  if (day == (getFirstMonday(year, month) + 14)) {return true;}
  if(year > 1979 && year < 2100) {
    if (day == parseInt(23.2488 + 0.242194 * (year - 1980) - parseInt((year - 1980) / 4))) {
      return true;
    }
  }
  break;
  case 10:
  if (day == (getFirstMonday(year, month) + 7)) {return true;}
  break;
  case 11:
  if (day == 3 || day == 23) {return true;}
  if (day == 4 && isSunday(year, month, 3)) {return true;}
  if (day == 24 && isSunday(year, month, 23)) {return true;}
  break;
  case 12:
  if (day == 23) {return true;}
  if (day == 24 && isSunday(year, month, 23)) {return true;}
  break;
  }
  return false;
}
function isSunday(year, month, day) {
  var week = new Date(year, month - 1, day).getDay();
  if (week == 0) {return true;}
  return false;
}
function getFirstMonday(year, month) {
  var monday;
  for(monday = 1; monday < 8; monday++) {
    if(new Date(year, month - 1, monday).getDay() == 1) {break;}
  }
  return monday;
}
function setWeekendAndHoliday() {
  var year = 0;
  var month = 0;
  var elements = document.getElementsByTagName("div");
  for (i = 0; i < elements.length; i++) {
    if(elements[i].getAttribute("className") == 'calendarhead' ||
      elements[i].getAttribute("class") == 'calendarhead') {
      var href = elements[i].childNodes[0].getAttribute('href');
      year = href.replace(/^.*(\d\d\d\d)-\d\d.html$/gi, "\$1");
      month = href.replace(/^.*\d\d\d\d-(\d\d).html$/gi, "\$1");
      month = parseInt(month,10) + 1;
      if (month == 13) {
        year = parseInt(year,10) + 1;
        month = 1;
      }
    }
  }
  if (!(year && month)) {return;}
  var table = document.getElementsByTagName('table');
  var element;
  for (i = 0; i < table.length; i++) {
  if(table[i].getAttribute("className") == 'caltbl calendartable' ||
    table[i].getAttribute("class") == 'caltbl calendartable'){
    element = table[i];
    var spans = element.getElementsByTagName("span");
    var day;
    for (i = 0; i < spans.length; i++) {
      if (spans[i].parentNode.nodeName == "TD") {
        if(spans[i].innerHTML.indexOf("href") != -1){
          day = spans[i].getElementsByTagName("a")[0].innerHTML;
        } else {day = spans[i].innerHTML;}
        if (isHoliday(year, month, day)) {
          spans[i].setAttribute('class', 'holiday');
          spans[i].setAttribute('className', 'holiday');
        } else if(isSaturday(year, month, day)) {
          spans[i].setAttribute('class', 'saturday');
          spans[i].setAttribute('className', 'saturday');
        }
        if (isToday(year, month, day)) {
          spans[i].parentNode.setAttribute('class', 'today');
          spans[i].parentNode.setAttribute('className', 'today');
        }
      }
    }
  }
  }
}
setCurrentDate();
setWeekendAndHoliday();
</script>

1.2 livedoor Blog PRO / livedoor Blog BUSINESS の場合

上記リストから script 要素の開始・終了タグと

setCurrentDate();
setWeekendAndHoliday();

を削除したものを外部ファイル「dayChecker.js」という名称で保存・アップロードしてください。

また、トップページ/個別記事ページ/カテゴリアーカイブ/月別アーカイブの各テンプレートの <head>~</head> の間に下記のタグを貼り付けます。

<script type="text/javascript" src="[アップロードしたURL]/dayChecker.js"></script>

さらに、

<script type="text/javascript">
setCurrentDate();
setWeekendAndHoliday();
</script>

を、トップページ/個別記事ページ/カテゴリアーカイブ/月別アーカイブの各テンプレートの </body> の前に設定します。

2.CSS修正

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

2.1 公開テンプレートの場合

下記のセレクタ(青色)を追加してください。

.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}

2.2 他のデザインの場合

.today {
    display: block;
    border: 1px solid #444444;
}
.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}

2006.01.08 追記
1月分のカレンダー表示が正常に行えないバグがありましたのでスクリプトを修正しました。

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


コメント

yujiroさん初めまして。

サイドメニューの折りたたみ(v5.0:ゆっくり折りたたむ)で小粋空間と出合い、無理矢理livedoor Blogで使わせていただいてます。
それからこのカレンダー表示を探していました。
「本日」を表示できてとても感激しています。
ありがとうございました。

[1] Posted by しいたけ : December 26, 2006 6:19 PM

>しいたけさん
はじめまして。
ご利用&ご連絡ありがとうございました。
うまく動作できたようで良かったです。
ではでは!

[2] Posted by yujiro : December 27, 2006 12:30 PM

yujiroさんあけましておめでとうございます。
昨年はひっそりこっそりお世話になりましたが本年もよろしくお願いします。

ところで今年に入ってからカレンダーに本日が表示されなくなったような気がします。
同時に使用してはいけないJavascriptやブログパーツがあるのでしょうか……

[3] Posted by しいたけ : January 5, 2007 9:21 AM

>しいたけさん
こんばんは。
ご返事遅くなってすいません。
提供しているスクリプトに誤りがありましたので下記の部分を修正願えますでしょうか。

function setWeekendAndHoliday() {

の10行ほど下の部分です。

修正前

if (month == 1) {year = parseInt(year,10) + 1;}

修正後

if (month == 13) {year = parseInt(year,10) + 1; month = 1;}

ご迷惑おかけして申し訳ございません。
それではよろしくお願い致します。

[4] Posted by yujiro : January 8, 2007 2:43 AM

ステキ。直りましたありがとうございます。

[5] Posted by しいたけ : January 9, 2007 12:54 PM

こんにちは。デザイン気に入って使用させていただいております。カレンダーなのですが、日をクリックしても記事にとんでくれないのですがどういった対処をすればいいのでしょうか?

カレンダーの色を変える前からうまくいきません…。

[6] Posted by まーちゃん : September 6, 2007 12:12 PM

あ!あと一つ質問があります。
当日の黒い枠って消せないでしょうか?度々申し訳ありません。

[7] Posted by まーちゃん : September 6, 2007 12:15 PM

>まーちゃんさん
こんにちは。
ご返事遅くなってすいません。

ご質問の件ですが、記事にとばない問題は当方の考慮不足でした。申し訳ありません。
対処方法は、月別アーカイブテンプレートの

<IfDateChanged>
<h2 class="date"><$ArticleDate$></h2>
</IfDateChanged>

<IfDateChanged>
<h2 class="date" id="<$ArticleDateTag$>"><$ArticleDate$></h2>
</IfDateChanged>

に修正して、月別アーカイブを再構築してください。

また、当日の黒い枠を消すには、スタイルシートの

.today {
    display: block;
    border: 1px solid #444444;
}

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

[8] Posted by yujiro : September 18, 2007 11:19 AM

はじめまして、休日表示付リアルタイムカレンダーの
livedoor Blog(無料版)の場合を使わせてもらっています。

質問なのですが、
休日の文字フォントだけ若干大きめになっているのですが
これを平日のフォントサイズと同じにするには
どうしたらよいでしょうか。

[9] Posted by めろん : November 3, 2010 9:40 AM

>めろんさん
こんばんは。
ご返事遅くなりすいません。
ご質問の件ですが、スタイルシートに以下の内容を追加してみてください。

.saturday, .saturday a:link, .saturday a:visited,
.sunday, .holiday, .holiday a:link, .holiday a:visited {
    font-size:11px;
}

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

[10] Posted by yujiro logo : November 8, 2010 1:51 AM

助かりましたありがとうございます。

[11] Posted by めろん : November 8, 2010 1:10 PM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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