手軽にカレンダーを表示できるCalendarウィジェット
Web画面で年月日を表示したり入力したりする場合、簡単にカレンダーを表示できると便利です。Wijmoではカレンダーを表示するためのCalendarウィジェット（wijcalendar）が提供されています。jQuery UIで提供されるカレンダーウィジェット（DatePicker）にはない以下の機能を備えています。
- 月切り替え時アニメーションの指定
- 月プレビュー（前後月カレンダーを表示）
- クイックナビゲーション（年単位の切替ボタン）
単純にカレンダーを表示するためにはリスト7のように記述します。なおリスト7には日本語で自然な表示を行うための記述が含まれています。
require(["wijmo.wijcalendar", "globalize", "globalize.cultures"], function(){
$(function(){
// 日本語カルチャーを設定
Globalize.culture("ja-JP");
$("#calendar1").wijcalendar({
titleFormat: "Y", // タイトル書式
toolTipFormat: "D" // ツールチップ書式
});
});
});
カレンダーの挙動はwijcalendarメソッドの引数によりカスタマイズ可能です。例えばカレンダーの月を切り替える際のアニメーションは、directionプロパティで方向を、durationプロパティで速度（時間）を、easingプロパティで速度変化を、それぞれ設定できます。
require(["wijmo.wijcalendar", "globalize", "globalize.cultures"], function(){
$(function (){
// 日本語カルチャーを設定
Globalize.culture("ja-JP");
$("#calendar1").wijcalendar({
titleFormat: "Y", // タイトル書式
toolTipFormat: "D", // ツールチップ書式
direction: "vertical", // アニメーション方向（縦）
duration: 200, // アニメーション時間（200ms）
easing: "linear" // アニメーション速度変化（一定速度）
});
});
});
月プレビューを有効にするためにはallowPreviewプロパティをtrueに設定します。またクイックナビゲーションを有効にするためにはnavButtonsプロパティに"quick"を指定します。
require(["wijmo.wijcalendar", "globalize", "globalize.cultures"], function(){
$(function (){
// 日本語カルチャーを設定
Globalize.culture("ja-JP");
$("#calendar1").wijcalendar({
titleFormat: "Y", // タイトル書式
toolTipFormat: "D", // ツールチップ書式
allowPreview: true, // 月プレビュー有効
navButtons: "quick" // クイックナビゲーション有効
});
});
});
月プレビューを有効にするとカレンダーの左右にコントロールが表示され、マウスをポイントすると前月または次月のカレンダーがプレビュー表示されます。
またクイックナビゲーションを有効にするとカレンダー上部に切替ボタンが2種類表示され、外側のボタンを押すと年単位でカレンダーが切り替わるようになります。なおjQuery UIのカレンダーウィジェットには年選択プルダウンを表示させるchangeYearプロパティが存在しますが、クイックナビゲーションのような前年／次年ボタンは表示されません。
現実的には日付の入力が必要となった時のみカレンダーを表示するといったことが多いのではないでしょうか。Calendarウィジェットはこのような利用法に対応するポップアップモードを備えます。リスト10はポップアップモードを利用して、選択した日付をテキストボックスに反映させる例です。
require(["wijmo.wijcalendar", "globalize", "globalize.cultures"], function(){
$(function(){
// 日本語カルチャーを設定
Globalize.culture("ja-JP");
$("#wijcalendar1").wijcalendar({
titleFormat: "Y", // タイトル書式
toolTipFormat: "D", // ツールチップ書式
// ポップアップモードを有効化
popupMode:"true",
// 日付選択時にテキストボックスに反映する処理
selectedDatesChanged: function () {
var selDate = $(this).wijcalendar("getSelectedDate");
if (selDate) {
$("#txtbox_selected_date").val(selDate.toDateString());
}
}
});
// テキストボックスクリック時にカレンダーを表示
$("#txtbox_selected_date").click(function(){
$("#wijcalendar1").wijcalendar("popup", {
of: $("#txtbox_selected_date")
});
});
});
});
