カレンダー（ライブラリー）
デモ
ライブラリのダウンロードと設置
こちらをクリックしてダウンロードしてください。
ダウンロードしたcalendar.jsを任意の場所へ置き読み込みます。
<script type="text/javascript" src="calendar.js"></script>オブジェクトの生成と表示
Calendarオブジェクトを生成します。
引数には表示する要素とオプションを設定でき、第一引数（表示する要素）は必須で、第二引数（オプション）は省略できます。
| 引数 | 初期値 | 説明 |
|---|---|---|
| 第一引数 | null | カレンダーを表示する要素 |
| 第二引数 | オプション 詳細はこちら |
JavaScript
var ve = document.getElementById('calendar'),
calendar = new Calendar(ve);
calendar.view(); // 表示HTML
<div id="calendar"> </div>メソッド
次のメソッドが実行可能です。
| メソッド | 説明 |
|---|---|
| next() | 次の月に切り替え |
| prev() | 前の月に切り替え |
| view() | カレンダーの表示 |
JavaScript
var ve = document.getElementById('calendar'),
nextBtn = document.getElementById('next'),
prevBtn = document.getElementById('prev');
var calendar = new Calendar(ve);
nextBtn.onclick = function() {
calendar.next();
};
prevBtn.onclick = function() {
calendar.prev();
};
calendar.view();HTML
<div id="calendar"> </div>
<input type="button" value="次の月へ" id="next" />
<input type="button" value="前の月へ" id="prev" />オプション
次の設定が可能です。
| 設定 | 初期値 | 説明 |
|---|---|---|
| viewElement | null | 表示する要素 |
| year | 現在の年 | 初期表示するカレンダーの年 |
| month | 現在の月 | 初期表示するカレンダーの月 |
| headerVisible | true | 現在の年月と月移動ボタンの表示・非表示 |
| controllerVisible | true | 月移動ボタンの表示・非表示 |
| tableClass | calendar | カレンダー本体のCSS Class名 |
| prevClass | prev | 前の月移動ボタンのCSS Class名 |
| nextClass | next | 次の月移動ボタンのCSS Class名 |
| sunClass | sun | 日曜日のCSS Class名 |
| satClass | sat | 土曜日のCSS Class名 |
| todayClass | today | 現在の日付のCSS Class名 |
| emptyBlockClass | empty | 空白セルのCSS Class名 |
| prevText | << | 前の月移動ボタンの文字列 |
| nextText | >> | 次の月移動ボタンの文字列 |
| emptyBlock | | 空白セルの文字列 |
| weekFormat | ['日', '月', '火', '水', '木', '金', '土'] |
曜日の文字列 |
| titleFormat | Y年m月 | 年月表示用の書式 |
JavaScript
var ve = document.getElementById('calendar');
var calendar = new Calendar(ve, {
headerVisible : false
});
calendar.view();