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 追記
春分の日・秋分の日の振替休日が表示されない不具合を修正しました。
- JavaScript カレンダー修正(シルバーウィーク対応)
- JavaScript カレンダー修正(春分の日・秋分の日の振替休日対応)
- カレンダーの日曜と祝日のスタイルを別にする
- 休日表示カレンダースクリプト(イギリス版)
≫ カレンダースクリプトの小技その4:本日と祝日の表示を変える from 風柳亭 - 別館:書庫のある庵 -
カレンダースクリプトに小粋空間さんの『休日表示カレンダースクリプト』を組み込むことにより、当日・祝日の表示をカスタマイズ出来るようにしてみました。 カレン... [続きを読む]
の間のソースを教えてもらえませんか。
>cathome01さん
こんばんは。
休日表示付リアルタイムカレンダー(Movable Type)をエントリーしましたのでそちらを参照ください。
それではどうぞよろしくお願い致します。
こんにちは?。SereneBachにつけようと思っているんですけど
5 の 「インターフェイスを起動」 って どうすることなんでしょう?
初心者な質問ですみません。4 までは済みました。
>さえらさん
こんばんは。
「インタフェースを起動」は関数を起動すると同義です。単に「API」と書いた方が一般的かもしれませんね。
なおSereneBach版もまもなく公開します。
ではでは。
おはようございま?す。
「関数を起動する」 も どうすることかわからないんですが
そうですか、これはSereneBach版ではないのですね。
わかりました。公開までおとなしく待ってます。(o⌒∇⌒o)
よろしくお願いしますぅ。
>さえらさん
こんばんは。
ということで公開しました。
はじめまして。
当方、ココログのカレンダーをカスタマイズするJavaScriptを作っていたのですが、祝日の判定も欲しいな、と思っていたときにこちらの記事をみかけましたので、これは便利と取り入れさせて頂きました。
関連記事:http://furyu.tea-nifty.com/annex/2006/08/4_eed2.html
なお、dayChecker.jsのisHoliday()は、日曜日を無条件に祝日と判定しているようでしたが、日曜と祝日とでは表示を変えたかったため、勝手ながら当方のサイトにアップしたものはこの部分は修正させて頂きました。
もし、改修等に条件があるようでしたら、お知らせ願えますと幸いです。
>風柳さん
こんばんは。
ご利用&ご連絡ありがとうございました。
改修の条件につきましては掲載されている記事の通り(配布元と改変内容の表示)で結構です。コードの差分を掲載して頂ければ他の方(私含め)の参考になると思います。
それではよろしくお願い致します。
yujiroさん、こんばんは。
ご返答有難うございます。
改修箇所は isHoliday() 内の先頭4行(日曜判定箇所)のコメントアウトのみとなります。
※記事の方でも詳細追記致しました。
>風柳さん
こんばんは。
ご連絡&記事修正ありがとうございました。
ではでは!
初めまして。
最近movable typeを使ってblogを始めました。
こちらでダウンロードしたテンプレートも使わせていただいてます。
質問なのですが「5.API」は具体的にどのような設定をすれば良いのでしょうか?
初心者な物でまったく分からず…
よろしくお願いします。
>uzさん
はじめまして。
テンプレートご利用ありがとうございます。
ご質問の件ですが、APIの利用方法は「休日表示付リアルタイムカレンダー for Movable Type」の5項等がサンプルとして挙げられますが、Movable Type に適用されるのであれば、カレンダー関連のカテゴリーをご覧頂いて、記事の内容にしたがって設定されれば大丈夫と思います。
あと勝手ながらBlogPeopleに登録させて頂きました。
それではどうぞよろしくお願い致します。
回答ありがとうございます。
早速今夜にでも挑戦したいと思います。
これからも参考にさせて頂きたいと思いますので、よろしくお願いします。
>uzさん
こんばんは。
ご連絡ありがとうございました。
また何かありましたらご連絡ください。
ではでは!
こんにちは。
スクリプトに対しての質問とかではないのですが、このページをIE若しくはIEベースのタブブラウザで開くと「インターネット サイトhttp://www.?は開けません。操作を中断しました」と出てそれまで表示されていたものがクリアされて「ページを表示できません」と言う画面に変わります。
(これはFirefoxから投稿してます)
どうやらGoogle Maps + IE の環境で発生するらしいです。検索したらたくさんHITしました。対処をお願いしますm(__)m
>Ayaさん
こんにちは。
ご迷惑おかけして申し訳ありません。
span の閉じタグのスペル誤り('spna'になっていました)が原因でした。
現在はIEでも正常に表示されています。
ご連絡くださり、ありがとうございました。
確認しました^^
さすがと言わざるを得ないほどの対応の早さ、感服します^^
これからもお世話になります^^
>Ayaさん
こんばんは。
こちらこそ今後ともお世話になります。
勝手ながらコメントは修正しておきました。
ではでは!
javaスクリプトカレンダーを利用させていただいています。
2012年の10日と11日が縦に並んで表示されていて、
おかしいと思い、こちらに来てみたところ、
小粋空間さんのカレンダーも同様の現象が出ているようです。
ご多忙の所、大変恐縮ですが直す方法があれば
教えて頂けますでしょうか
どうぞ、よろしくお願いいたします。
>gas0000さん
こんばんは。
情報ありがとうございます。
こちらでは同様の事象が確認できないため、すいませんが、
・何月のカレンダーか
・ブラウザ名
をご連絡願えますでしょうか。
それではよろしくお願い致します。
早速のお返事ありがとうございます。
コメントを受け付けていただけず、時間がかかってしまいました。
2012年7月のカレンダーです。
ブラウザはSafariです。
Mac OS 10.6.8 Safari 5.1.7
yujiroさんのコメントを見て、Firefoxで見てみましたら
こちらは問題ないようです。
またiPhoneのSafariでも、問題ありませんでした。
どうぞよろしくお願いいたします。
>gas0000さん
ご連絡ありがとうございます。
Macをもっていないため、エミュレータなどで確認してみましたが再現されませんでした。
他の月で発生していないようであれば本日を示す枠が影響しているように思われますが、事象が確認できないため対処困難です。
申し訳ありません。