カレンダー jQuery Calendar

jQueryで実装するカレンダーです。祝日の表記等はありませんのでご注意ください。
※簡単なものなのでたいしたオプションはありません。

サンプル

 

PHP版のカレンダー(月切替機能なし)はこちら
JavaScript版のカレンダー(月切替機能付)はこちらです。

ライブラリのダウンロードと設置

「ライブラリのダウンロード」をクリックしてダウンロードしてください。
ライブラリのダウンロード

ダウンロードした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) 次の月へ切り替える。
引数には切り替え時に実行する関数を指定できる。