カレンダーを表示する（リンク機能付き）：JavaScriptサンプル

JavaScript

カレンダーを表示する（リンク機能付き）

JavaScriptで表示するカレンダーのリンクを設定出来る版です。フォームにカレンダーで日付の入力補助をする機能を付けたい場合はこちらです。前後の月も閲覧出来ます。日本の祝日表示にも対応していますが、「春分の日」や「秋分の日」は年によって日にちが変わったり、「祝日と祝日に挟まれている日は休日になる」等の変則的な休日が存在したりと、日本の祝日は少々複雑で、検証はしていますが正常に表示されない場合もありますのでご注意ください。

リンクは「自分のウィンドウで移動」「別ウィンドウで表示」「ポップアップウィンドウで表示」の3つから指定出来、リンクに関するメッセージも表示することが出来ます。メッセージは空にしておけば、表示しないようにも出来ます。吹き出しのデザインは画像にも出来ますが、今回はCSSで変更出来るようにしてあります。

カレンダーはファイルをダウンロードしてお使いください。また、祝日が変更になった場合は、スクリプトの「祝日の設定」を変更する必要があります。「国民の祝日」に関する法律は「国民の祝日」について（内閣府ホームページ）および「国民の祝日」（Wikipedia）を参考にさせていただいています。

カレンダーの必要ファイルのダウンロード（4KB）
　　　※ご利用規定に同意出来る方のみご利用ください。

特長

現在の日付をわかりやすく表示します。
日本の祝日表示にも対応しています。マウスオーバーで祝日名を表示します。
CSSを変更することで、色や大きさなどのデザインも変更出来ます。
前後1ヶ月の月に切り替えることが出来ます。
リンクとメッセージの設定をすることが出来ます。

サンプル

まずはカレンダーの必要ファイルをダウンロードします。
「ディレクトリ構成」に従って「calen_link」フォルダをアップロードしてください。
今回はアップロードの際は、全て「アスキーモード」でアップロードします。
「calendar.js」内の74行目付近からの「設定領域」で、リンクやポップアップウィンドウの設定をします。現在、仮に書かれているリンクは削除してください。
「記述」に従ってカレンダーを設置したいページに記述します。
「サンプル」のように、カレンダーが表示されれば完成です。

home
├ index.html （カレンダー設置ページ）
└ calen_link
├ calendar.css
└ calendar.js

<html>
<head>
<title>カレンダー設置ページ</title>

<link rel="stylesheet" type="text/css" href="calen_link/calendar.css">

</head>
<body>

<script type="text/javascript" src="calen_link/calendar.js"></script>

</body>
</html>

更新履歴

2008/10/25　　ver1.0.0	・新規公開