Top > CMS・ブログ > livedoorブログカスタマイズカレンダー > 2006年10月
2006年10月 5日

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

October 5,2006 12:02 AM
Tag:[, , ]
Permalink

休日表示付リアルタイムカレンダー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月分のカレンダー表示が正常に行えないバグがありましたのでスクリプトを修正しました。

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

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

AMN
Categories
Monthly Archives
2020年
2019年
2018年
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