カレンダー jQuery Calendar
jQueryで実装するカレンダーです。祝日の表記等はありませんのでご注意ください。
※簡単なものなのでたいしたオプションはありません。
サンプル
ライブラリのダウンロードと設置
「ライブラリのダウンロード」をクリックしてダウンロードしてください。
ライブラリのダウンロード
ダウンロードしたjquery.calendar.jsを任意の場所へ置き読み込みます。
（jQueryの設置および読み込みは、完了もしくは同時作業を行っているものとします。）
JavaScript
HTML
オプション
以下のオプションが設定可能です。
| オプション | 初期値 | 説明 |
|---|---|---|
| year | 現在の年 | 初期で表示するカレンダーの年 |
| month | 現在の月 | 初期で表示するカレンダーの月 |
| weekValue | ['日', '月','火', '水','木', '金', '土'] |
表示する曜日の文字列 |
| changeButton | true | 前または次の月に移動するためのボタンを表示するかどうか 設定できる値：表示=true、非表示=false |
| areaId | '' | カレンダーのID名 |
| areaClass | 'calendar' | カレンダーのクラス名 |
| activeDateClass | 'active-date' | 現在表示している年月のヘッダークラス名 |
| prevNavClass | 'prev' | 前の月へ移動する切り替えボタンのクラス名 |
| nextNavClass | 'next' | 次の月へ移動する切り替えボタンのクラス名 |
| sunClass | 'sun' | 日曜日のクラス名 |
| satClass | 'sat' | 土曜日のクラス名 |
| todayClass | 'today' | 現在の日付のクラス名 |
| emptyClass | '' | 1日・末日の前後に表示する余白セルのクラス名 |
| headerFormat | 'y年m月' | 現在表示している年月のヘッダーの文字列書式 |
| prevValue | '<<' | 前の月へ移動する切り替えボタンの文字列 |
| nextValue | '>>' | 次の月へ移動する切り替えボタンの文字列 |
| emptyValue | ' ' | 1日・末日の前後に表示する余白セルの文字列 |
| outputMode | 'append' | カレンダーの出力先 設定できる値：append、prepend、html、after、before |
| changeCallback | function() {} | 切り替え時のコールバック関数 |
メソッド
以下のメソッドが実行可能です。
| メソッド名 | 説明 |
|---|---|
| $element.changeCalendar (year, month, callback) |
カレンダーを切り替える。 第一引数（必須）には切り替える年、第二引数（必須）には切り替える月、第三引数には切り替え時に実行する関数を指定できる。 |
| $element.prevMonth(callback) | 前の月へ切り替える。 引数には切り替え時に実行する関数を指定できる。 |
| $element.nextMonth(callback) | 次の月へ切り替える。 引数には切り替え時に実行する関数を指定できる。 |