JavaScript カレンダー(休日表示付き)

JavaScript カレンダー(休日表示付き)

Posted at March 15,2006 12:30 AM
Tag:[Calendar, JavaScript]

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

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

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

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

祝日について

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

1.機能

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

  • 本日
  • 土曜日
  • 日曜/祝日(ハッピーマンデー・振替休日含む)

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

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

2.ダウンロード

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

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 シルバーウィーク対応

3.アップロード

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

4.スクリプトのインクルード

スクリプトを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 を設定し、追加してください。

5.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 追記
春分の日・秋分の日の振替休日が表示されない不具合を修正しました。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

カレンダースクリプトの小技その4:本日と祝日の表示を変える from 風柳亭 - 別館:書庫のある庵 -
カレンダースクリプトに小粋空間さんの『休日表示カレンダースクリプト』を組み込むことにより、当日・祝日の表示をカスタマイズ出来るようにしてみました。 カレン... [続きを読む]

Tracked on August 13, 2006 1:25 PM
コメント

の間のソースを教えてもらえませんか。

[1] Posted by cathome01 : March 15, 2006 3:36 AM

>cathome01さん
こんばんは。
休日表示付リアルタイムカレンダー(Movable Type)をエントリーしましたのでそちらを参照ください。
それではどうぞよろしくお願い致します。

[2] Posted by yujiro : March 16, 2006 12:52 AM

こんにちは?。SereneBachにつけようと思っているんですけど
5 の 「インターフェイスを起動」 って どうすることなんでしょう?
初心者な質問ですみません。4 までは済みました。

[3] Posted by さえら : March 18, 2006 9:49 AM

>さえらさん
こんばんは。
「インタフェースを起動」は関数を起動すると同義です。単に「API」と書いた方が一般的かもしれませんね。

なおSereneBach版もまもなく公開します。
ではでは。

[4] Posted by yujiro : March 19, 2006 2:20 AM

おはようございま?す。
「関数を起動する」 も どうすることかわからないんですが
そうですか、これはSereneBach版ではないのですね。
わかりました。公開までおとなしく待ってます。(o⌒∇⌒o)
よろしくお願いしますぅ。

[5] Posted by さえら : March 19, 2006 6:32 AM

>さえらさん
こんばんは。
ということで公開しました。

[6] Posted by yujiro : March 21, 2006 1:42 AM

はじめまして。
当方、ココログのカレンダーをカスタマイズするJavaScriptを作っていたのですが、祝日の判定も欲しいな、と思っていたときにこちらの記事をみかけましたので、これは便利と取り入れさせて頂きました。
関連記事:http://furyu.tea-nifty.com/annex/2006/08/4_eed2.html

なお、dayChecker.jsのisHoliday()は、日曜日を無条件に祝日と判定しているようでしたが、日曜と祝日とでは表示を変えたかったため、勝手ながら当方のサイトにアップしたものはこの部分は修正させて頂きました。
もし、改修等に条件があるようでしたら、お知らせ願えますと幸いです。

[7] Posted by 風柳 : August 13, 2006 1:38 PM

>風柳さん
こんばんは。
ご利用&ご連絡ありがとうございました。
改修の条件につきましては掲載されている記事の通り(配布元と改変内容の表示)で結構です。コードの差分を掲載して頂ければ他の方(私含め)の参考になると思います。
それではよろしくお願い致します。

[8] Posted by yujiro : August 14, 2006 2:41 AM

yujiroさん、こんばんは。
ご返答有難うございます。

改修箇所は isHoliday() 内の先頭4行(日曜判定箇所)のコメントアウトのみとなります。
※記事の方でも詳細追記致しました。

[9] Posted by 風柳 : August 14, 2006 6:36 PM

>風柳さん
こんばんは。
ご連絡&記事修正ありがとうございました。
ではでは!

[10] Posted by yujiro : August 15, 2006 1:39 AM

初めまして。
最近movable typeを使ってblogを始めました。
こちらでダウンロードしたテンプレートも使わせていただいてます。
質問なのですが「5.API」は具体的にどのような設定をすれば良いのでしょうか?
初心者な物でまったく分からず…
よろしくお願いします。

[11] Posted by uz : September 3, 2006 5:20 PM

>uzさん
はじめまして。
テンプレートご利用ありがとうございます。
ご質問の件ですが、APIの利用方法は「休日表示付リアルタイムカレンダー for Movable Type」の5項等がサンプルとして挙げられますが、Movable Type に適用されるのであれば、カレンダー関連のカテゴリーをご覧頂いて、記事の内容にしたがって設定されれば大丈夫と思います。

あと勝手ながらBlogPeopleに登録させて頂きました。
それではどうぞよろしくお願い致します。

[12] Posted by yujiro : September 4, 2006 1:13 AM

回答ありがとうございます。
早速今夜にでも挑戦したいと思います。

これからも参考にさせて頂きたいと思いますので、よろしくお願いします。

[13] Posted by uz : September 5, 2006 12:32 PM

>uzさん
こんばんは。
ご連絡ありがとうございました。
また何かありましたらご連絡ください。
ではでは!

[14] Posted by yujiro : September 5, 2006 7:13 PM

こんにちは。
スクリプトに対しての質問とかではないのですが、このページをIE若しくはIEベースのタブブラウザで開くと「インターネット サイトhttp://www.?は開けません。操作を中断しました」と出てそれまで表示されていたものがクリアされて「ページを表示できません」と言う画面に変わります。
(これはFirefoxから投稿してます)
どうやらGoogle Maps + IE の環境で発生するらしいです。検索したらたくさんHITしました。対処をお願いしますm(__)m

[15] Posted by Aya : September 22, 2006 9:02 AM

>Ayaさん
こんにちは。
ご迷惑おかけして申し訳ありません。
span の閉じタグのスペル誤り('spna'になっていました)が原因でした。
現在はIEでも正常に表示されています。
ご連絡くださり、ありがとうございました。

[16] Posted by yujiro : September 22, 2006 11:44 AM

確認しました^^
さすがと言わざるを得ないほどの対応の早さ、感服します^^

これからもお世話になります^^

[17] Posted by Aya : September 22, 2006 1:28 PM

>Ayaさん
こんばんは。
こちらこそ今後ともお世話になります。
勝手ながらコメントは修正しておきました。
ではでは!

[18] Posted by yujiro : September 22, 2006 10:18 PM

javaスクリプトカレンダーを利用させていただいています。
2012年の10日と11日が縦に並んで表示されていて、
おかしいと思い、こちらに来てみたところ、
小粋空間さんのカレンダーも同様の現象が出ているようです。

ご多忙の所、大変恐縮ですが直す方法があれば
教えて頂けますでしょうか

どうぞ、よろしくお願いいたします。

[19] Posted by gas0000 logo : July 11, 2012 11:12 PM

>gas0000さん
こんばんは。
情報ありがとうございます。

こちらでは同様の事象が確認できないため、すいませんが、

 ・何月のカレンダーか
 ・ブラウザ名

をご連絡願えますでしょうか。
それではよろしくお願い致します。

[20] Posted by yujiro logo : July 12, 2012 1:03 AM

早速のお返事ありがとうございます。
コメントを受け付けていただけず、時間がかかってしまいました。

2012年7月のカレンダーです。
ブラウザはSafariです。
Mac OS 10.6.8 Safari 5.1.7

yujiroさんのコメントを見て、Firefoxで見てみましたら
こちらは問題ないようです。
またiPhoneのSafariでも、問題ありませんでした。

どうぞよろしくお願いいたします。

[21] Posted by gas0000 logo : July 12, 2012 9:14 PM

>gas0000さん
ご連絡ありがとうございます。
Macをもっていないため、エミュレータなどで確認してみましたが再現されませんでした。
他の月で発生していないようであれば本日を示す枠が影響しているように思われますが、事象が確認できないため対処困難です。
申し訳ありません。

[22] Posted by yujiro logo : July 13, 2012 1:21 AM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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