- HOME >
- JavaScript >
- カレンダーを表示する（リンク機能付き）
カレンダーを表示する（リンク機能付き）
JavaScriptで表示するカレンダーのリンクを設定出来る版です。フォームにカレンダーで日付の入力補助をする機能を付けたい場合はこちらです。前後の月も閲覧出来ます。日本の祝日表示にも対応していますが、「春分の日」や「秋分の日」は年によって日にちが変わったり、「祝日と祝日に挟まれている日は休日になる」等の変則的な休日が存在したりと、日本の祝日は少々複雑で、検証はしていますが正常に表示されない場合もありますのでご注意ください。
リンクは「自分のウィンドウで移動」「別ウィンドウで表示」「ポップアップウィンドウで表示」の3つから指定出来、リンクに関するメッセージも表示することが出来ます。メッセージは空にしておけば、表示しないようにも出来ます。吹き出しのデザインは画像にも出来ますが、今回はCSSで変更出来るようにしてあります。
カレンダーはファイルをダウンロードしてお使いください。また、祝日が変更になった場合は、スクリプトの「祝日の設定」を変更する必要があります。「国民の祝日」に関する法律は「国民の祝日」について（内閣府ホームページ）および「国民の祝日」（Wikipedia）を参考にさせていただいています。
ご利用について
個人利用の場合はフリーでご自由にお使いいただけます。
法人・商用利用の場合はWEB上手(www.web-jozu.com)へのリンクを貼ってください。
個人利用の場合でもリンクを貼っていただけると、幸いです。
法人・商用利用の方でリンクを貼っていただけない場合や、カレンダー内のリンクをはずす場合はシェアウェア料金をお支払いいただくことで、ご自由にお使いいただけます。料金は以下のページでお支払いいただけます。
※著作権は放棄していません。詳細はご利用規定をご覧ください。
【料金】 ￥1,000 （税込）
シェアウェアのお支払いはこちら （ クレジット決済のみ ）
ダウンロードおよび設置方法
カレンダーの必要ファイルのダウンロード （4KB）
※ご利用規定に同意出来る方のみご利用ください。
- 現在の日付をわかりやすく表示します。
- 日本の祝日表示にも対応しています。マウスオーバーで祝日名を表示します。
- CSSを変更することで、色や大きさなどのデザインも変更出来ます。
- 前後、指定の数ヶ月の月に切り替えることが出来ます。
- リンクとメッセージの設定をすることが出来ます。写真も入ります。
特長
サンプル
- まずはカレンダーの必要ファイルをダウンロードします。
- 「ディレクトリ構成」に従って「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>
<span id="calenArea"></span>
<script type="text/javascript" src="calen_link/calendar.js"></script>
</body>
</html>
更新履歴
| 2011/03/05 ver1.0.2 | ・国民の祝日の不具合を修正しました。 |
|---|
| 2009/05/02 ver1.0.1 | ・カレンダーを前後何ヶ月表示するかを指定出来るようにしました。 |
|---|
| 2008/10/25 ver1.0.0 | ・新規公開 |
|---|
関連記事
こちらの記事も読まれています
