小粋空間: カレンダーアーカイブ

Top ＞ JavaScript ＞カレンダー [全て開く]

2009年2月17日

JavaScript カレンダー修正（シルバーウィーク対応）

February 17,2009 12:55 AM
Tag：[Calendar, JavaScript]
Permalink

現在公開中の「JavaScript カレンダー」をバージョンアップし、2009年9月のシルバーウィークに対応しました。

次のように、9月22日が休日表示になります。9月の表示はとりあえず2015年まで確認しています。

2009年9月のカレンダー

当サイトで公開している「Ajax 月送りカレンダー」や「休日表示付きリアルタイムカレンダー」など、カレンダーの休日の色を変えるカスタマイズをご利用の方は、下記のリンクから dayChecker.js をダウンロードして、現在ご利用の dayChecker.js と入れ替えてください。

WordPress の場合はプラグインファイルに同梱していますので、プラグインファイルの中にある dayChecker.js の内容を一部入れ替えてください。

Comments [7] | Trackbacks [0]

2007年4月22日

JavaScript カレンダー修正（春分の日・秋分の日の振替休日対応）

April 22,2007 12:37 AM
Tag：[Calendar, JavaScript]
Permalink

現在公開中の JavaScript カレンダーで「春分の日と秋分の日の振替休日が有効になりません」というご指摘を頂き、スクリプトを修正致しました。

不具合についてこの場をお借りしてお詫び申し上げるとともに、お手数ですが、2007年4月21日以前に当サイトで公開している休日表示付きの各カレンダーカスタマイズをご利用の方は JavaScript カレンダー（dayChecker.js）を差し替えくださいますよう、お願い致します。
ご利用のブログによって修正方法が異なりますので、修正方法につきましては下記の該当部分をご覧ください。

ちなみに、春分の日・秋分の日の直近の振替休日は、2007年9月23日（日）です。休日の状況は下記のページで確認できます。

祝日について

Movable Type をご利用の場合

JavaScript カレンダー（休日表示付き）の「２．ダウンロード」より dayChecker.js のリンクをクリックしてダウンロードし、現在お使いの dayChecker.js と差し替えてください。
該当記事は下記です。

Serene Bach をご利用の場合

WordPress をご利用の場合

下記の記事よりプラグインを再ダウンロードして入れ替えるか、JavaScript カレンダー（休日表示付き）の「２．ダウンロード」より dayChecker.js のリンクをクリックしてダウンロードし、/plugins/realtime-calendar 配下にある dayChecker.js と差し替えてください。

休日表示付きリアルタイムカレンダー for WordPress ME

FC2 ブログをご利用の場合

下記の記事の「１．休日表示用カレンダースクリプトのダウンロード」より download のリンクをクリックして dayChecker.js をダウンロードし、現在お使いの dayChecker.js と差し替えてください。

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

livedoor ブログをご利用の場合

livedoor ブログの場合、スクリプトに下記の青色部分を追加してください。

　：
case 3:
    if(year > 1979 && year < 2100) {
        if (day == parseInt(20.8431 + 0.242194 * (year - 1980) - parseInt((year - 1980) / 4))) {
            return true;
        }
        if (day == (parseInt(20.8431 + 0.242194 * (year - 1980) - parseInt((year - 1980) / 4)) + 1) && isSunday(year, month, day - 1)) {
            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;
        }
        if (day == (parseInt(23.2488 + 0.242194 * (year - 1980) - parseInt((year - 1980) / 4)) + 1) && isSunday(year, month, day - 1)) {
            return true;
        }
    }
    break;
　：

該当記事は下記です。

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

Comments [2] | Trackbacks [2]

2007年2月 1日

カレンダーの日曜と祝日のスタイルを別にする

February 1,2007 2:01 AM
Tag：[Calendar, JavaScript]
Permalink

当サイトで公開しているカレンダーのカスタマイズは、日曜と祝日に同じスタイル（厳密には同一のクラス属性値）を割り当てていますが、「日曜日と祝日のスタイルを分けるにはどうすれば良いでしょうか」というご質問を頂きましたので、本エントリーにてクラス属性を個別に割り当てる方法をご紹介致します。

ここでは Movable Type の「Ajax 月送りカレンダー」を例に説明していますが、他のブログのカレンダーカスタマイズでも同じような変更を行えば大丈夫だと思います。

１．`dayChecker.js` の修正

任意のエディタで dayChecker.js を開き、下記の赤色部分を削除します。

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;
        }
　　　　　：

削除した部分は祝日判定の中で日曜日も抱き合わせで判定している部分です。
今思うと、isHoliday() という関数で日曜判定を行うこと自体、妥当でなかったかもしれません（反省）。

２．`ajaxCalendar.js` の修正

任意のエディタで ajaxCalendar.js を開き、下記の青色部分を追加します。

function setWeekendAndHoliday(y,m) {
　　　　　　　　：
　　　　　　　（略）
　　　　　　　　：
        if (isHoliday(year, month, day)) {
            spans[i].setAttribute('class', 'holiday');
            spans[i].setAttribute('className', 'holiday');
        } else if(isSunday(year, month, day)) {
            spans[i].setAttribute('class', 'sunday');
            spans[i].setAttribute('className', 'sunday');
        } 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');
        }
　　　　　　　　：

プログラムが書ける方はお分かりと思いますが、上記のロジックは祝日が土日より先に判定されるようにしてますので、結果として祝日のスタイルが土日のスタイルより優先されます。

なお、他のブログのカレンダーカスタマイズで ajaxCalendar.js がない場合も、上記の土日祝日判定処理はどこかに埋め込まれています。

３．CSS の修正

ひとまとめにしている日曜と祝日のスタイルを分けて設定します。

変更前

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

変更後

.sunday,
.sunday a:link,
.sunday a:visited {
（日曜日のスタイルを設定）
}
.holiday,
.holiday a:link,
.holiday a:visited {
（祝日のスタイルを設定）
}

なお、.sunday はカレンダーの曜日部分にも使われてます。異なるスタイルを設定したい場合はどちらかのクラス名を変更すると良いでしょう。

Comments [0] | Trackbacks [0]

2006年4月11日

休日表示カレンダースクリプト（イギリス版）

April 11,2006 1:00 AM
Tag：[Calendar, England, JavaScript]
Permalink

休日表示カレンダースクリプト（イギリス版）以前にご要望を頂いていたカレンダースクリプトのイギリス版を作りました。教えて頂いた下記のサイトを参考に休日を判定しています。
スクリーンショットはこのスクリプトを Serene Bach に適用したもので、イギリスの休日が表示されます。

DTI Employment Relations - UK Public and Bank Holidays

抜粋すると休日は下記の通りです。日本人で良かったです（笑）。

New Year's Day （1/1：振替休日あり）
Early May Bank Holiday（5月第1月曜）
Spring Bank Holiday（5月最終月曜）
Summer Bank Holiday（8月最終月曜）
Good Friday（計算が複雑なので2008年まで固定で設定）
Easter Monday（〃）
Christmas Day（12/25：振替休日あり）
Boxing Day（12/26：振替休日あり）

スクリプトは休日カレンダースクリプトにダウンロードのリンクを追加しましたので、そちらからダウンロードしてください。ブログツールへの設定方法は休日カレンダーのカスタマイズを行っている各エントリーを参照ください。

なお12月の休日は「土曜日も振替休日の対象」ということで、26日が土曜の場合、その振替休日で28日を休日に、25日が土曜・26日が日曜の場合、27日および28日をそれぞれの振替休日になるようにしています。解釈が誤っていたらご指摘ください。

Comments [4] | Trackbacks [0]

2006年3月15日

JavaScript カレンダー（休日表示付き）

March 15,2006 12:30 AM
Tag：[Calendar, JavaScript]
Permalink

休日表示カレンダースクリプトカレンダーに土、日・祝日、および本日表示を行うための JavaScript です。このスクリプトにカレンダー解析スクリプトとCSSを加えることによって、スクリーンショットのような土・日・祝日・本日の装飾を行うことができます。振替休日やハッピーマンデーにも（多分）対応しています。

休日表示をするスクリプトをネットでいくつか見つけたのですが、カレンダー用のテーブルを作成しながら同時に休日を判定するタイプのものが多かったため、一旦マークアップされたカレンダーに対しても利用可能となる、汎用的なスクリプトを作ってみました。

このスクリプトは年月日から土、日・祝日、本日を判定するというシンプルなものです。JavaScript が利用可能であればブログツールやサービスに依存しません。
冒頭に述べた Movable Type 等のカレンダーを解析するスクリプトは別途エントリーする予定です（まとめて書くと収拾がつかなくなるため本エントリーは日付判定用スクリプトの紹介にとどめています）。

スクリプト作成にあたっては下記のサイトを参考にさせて頂きました。ありがとうございました（他にいくつか参考にさせて頂いたのですが失念しました、すいません）。

祝日について

なお、Movable Type のカレンダープラグインとして、nlog(n) さんの休日表示カレンダープラグイン2 が有名です（Perl モジュールの Date::Japanese::Holiday が必要です）。ご紹介まで。

１．機能

このスクリプトは与えられた年月日を元に下記のチェックを行います。

本日
土曜日
日曜/祝日（ハッピーマンデー・振替休日含む）

春分の日・秋分の日の算出は1980?2099に対応しています。また国民の祝日に関する法律の一部を改正する法律案により、5月6日が振替休日になるケースも考慮しています。

前後数十年の全ての休日が考慮できているかどうかは定かでありません。不具合ありましたらご連絡ください（ただし遠い過去または未来について考慮する予定はありません）。

２．ダウンロード

下記のリンクをクリックしてダウンロードしてください。

dayChecker.js
dayChecker.js（イギリスの休日表示用）

2006.03.15 Ver 1.00
2006.04.11 Ver 1.00en イギリス版追加
2006.04.11 Ver 1.01 バグ修正
2006.04.15 Ver 1.02/Ver 1.01en バグ修正
2006.04.16 Ver 1.03/Ver 1.02en バグ修正
2006.08.03 Ver 1.04/Ver 1.03en バグ修正
2007.04.21 Ver 1.05 春分の日・秋分の日の振替休日が表示されない不具合修正
2009.02.17 Ver 1.06 シルバーウィーク対応

３．アップロード

ダウンロードしたスクリプトを、Movable Type / Serene Bach の場合は index.html のあるディレクトリにアップロードしてください。
他のブログサービスで利用する場合につきましてはそれぞれのアップロード先に従います。

４．スクリプトのインクルード

スクリプトをHTMLページに読み込ませるため、テンプレート（またはHTML）の <head>～</head> の間に下記の設定を追加します。

<script type="text/javascript" src="http://domain/path/to/dayChecker.js"></script>

src 属性には配置したスクリプトのURLを設定してください（アップロード先が index.html と異なるディレクトリの場合はご注意ください）。またスクリプトは utf-8 で作成しておりますので、ブログの文字コードが異なる場合は、スクリプトの文字コードをエディタ等を用いてブログの文字コードに変更するか、

<script type="text/javascript" src="http://domain/path/to/dayChecker.js" charset="utf-8"></script>

と、青色で示した charset 属性に utf-8 を設定し、追加してください。

５．API

上記の機能を利用する場合、下記のインタフェースを起動してください（それほどたいそうなものではありませんが）。

isHoliday(year, month, day)

機能: 与えられた年月日の日・祝日判定を行います。

パラメータ: year - 年（4桁）; month - 月; day - 日

返却値: 日・祝日の場合:true; 日・祝日以外の場合:false

isSaturday(year, month, day)

機能: 与えられた年月日の土曜日判定を行います。

パラメータ: year - 年（4桁）; month - 月; day - 日

返却値: 土曜日の場合:true; 土曜日以外の場合:false

isToday(year, month, day)

機能: 与えられた年月日の本日判定を行います。

パラメータ: year - 年（4桁）; month - 月; day - 日

返却値: 本日の場合:true; 本日以外の場合:false

setCurrentDate()

機能: この関数を起動した年月日を保持します。他の関数を起動する前にこの関数を必ず起動してください。この年月日が判定基準元の年月日となります。

パラメータ: なし

返却値: なし

2006.04.11 追記
イギリス版を追加しました。また日本語版のスクリプトに一部誤りがありましたので修正しました。

2006.08.03 追記
スクリプトで8月・9月の本日表示ができない不具合を対処しました。

2007.04.21 追記
春分の日・秋分の日の振替休日が表示されない不具合を修正しました。

Comments [18] | Trackbacks [1]

小粋空間 - a cheap joke and a play on words site