カレンダーコントロールには、日付の選択方法として、1つの日付だけを選択する単一選択と、複数の日付を選択する複数選択の2種類があります。
これらの選択方法は、
SelectionModeプロパティで指定します。また、下記に示した選択可能な日付の種類は、
AllowSelectionプロパティで設定します。
日付選択の操作は、目的の日付をマウスでクリックするか、または矢印キーでフォーカス枠を移動し、[Space]または[Enter]キーを押して行います。また、SelectionModeプロパティを
SelectionMode.MultiRichに設定した場合は、CtrlキーやShiftキーを使った日付選択ができます。
なお、複数選択の場合は、選択できる最大日数を
MaxSelectionCountプロパティで設定できます。
また、
WeekNumberSelectプロパティをTrueにすると、週番号(
ShowWeekNumberプロパティで表示を設定)をクリックすると、その週全体を選択し、
WeekTitleSelectプロパティをTrueにすると、曜日タイトルのクリックでその曜日全部を選択します。
 |
SelectedDateプロパティをデータベースに接続する場合は、必ず単一選択モードに設定してください。複数選択モードではデータベース接続をサポートしていません。 |
マウスやキーボードの操作で選択された日付は、選択モードの違いによって2つのプロパティを使い分けて取得します。
サーバー側での日付取得
単一選択された日付の取得には、
SelectedDateプロパティを使用し、複数選択された日付の取得は、
Selectionsプロパティを使用します。
複数選択された日付は、Selectionsプロパティが参照する
SelectionCollectionコレクションに格納されます。コレクションの要素である日付にアクセスするには、SelectionCollectionコレクションの
Itemプロパティ(Visual Basic)またはインデクサを使用します。
クライアント側での日付取得
単一選択された日付の取得には、
GetSelectedDateメソッド を使用し、複数選択された日付は
GetSelections メソッドを使用します。GetSelectionsメソッドは、選択された日付の配列を返します。
日付の選択は、通常、マウスやキーボードの操作によって行われますが、コードで選択することも可能です。
サーバー側での日付選択
Selectionsプロパティが参照する
SelectionCollectionコレクションの次のメソッドのいずれかを使用します。なお、リファレンスのAddメソッドでは、カレント日を含む月のすべての日付を選択する方法を紹介しています。
また、選択した日付を解除するときは、次のいずれかのメソッドを使用します。
クライアント側での日付選択
クライアント側での日付選択は、単一選択モードの場合は、
SetSelectedDateメソッド、複数選択モードの場合は、
SetSelectionsメソッドを使用します。
直前に選択されていた日付とは異なる日付が選択されたときには、単一選択モードと複数選択モードの両方で
SelectedDateChangedクライアントイベントが発生します。また、フォーカス枠を移動したときには、
FocusDateChangedクライアントイベントが発生します。
また、
AutoPostBackプロパティがTrueのときは、サーバー側で
SelectedDateChangedイベントが発生します。
カレンダー上の日付をクリックしたときには、
ClickDateクライアントイベントが発生します。また、
AutoPostBackプロパティがTrueのときは、サーバーサイドでも
ClickDateイベントが発生します。
カレンダー上の日付をクリックして日付を選択したときには、次の順序でクライアントイベントが発生します。
- FocusDateChanged
- ClickDate
- SelectedDateChanged
次のサンプルコードは、複数選択モードで選択された日付をリストボックスに表示する方法を示します。
Imports GrapeCity.Web.Input.IMCalendar
Imports GrapeCity.Web.Input.Core
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
' 複数選択モードに設定します。
GcCalendar1.SelectionMode = SelectionMode.MultiSimple
' SelectedDateChanged イベントが発生するようにします。
GcCalendar1.AutoPostBack = True
End Sub
Private Sub GcCalendar1_SelectedDateChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles GcCalendar1.SelectedDateChanged
' リストボックスをクリアします。
ListBox1.Items.Clear()
' 選択された日付をリストボックスに表示します。
Dim aSC As SelectionCollection = GcCalendar1.Selections
If aSC.Count > 0 Then
Dim aDay As DateTimeEx
For Each aDay In aSC
ListBox1.Items.Add(DateTime.Parse(aDay.ToString).ToLongDateString())
Next
End If
End Sub
using GrapeCity.Web.Input.IMCalendar;
using GrapeCity.Web.Input.Core;
private void Page_Load(object sender, System.EventArgs e)
{
// 複数選択モードに設定します。
GcCalendar1.SelectionMode = SelectionMode.MultiSimple;
// SelectedDateChanged イベントが発生するようにします。
GcCalendar1.AutoPostBack = true;
}
private void GcCalendar1_SelectedDateChanged(object sender, System.EventArgs e)
{
// リストボックスをクリアします。
listBox1.Items.Clear();
// 選択された日付をリストボックスに表示します。
SelectionCollection aSC = GcCalendar1.Selections;
if (aSC.Count > 0)
{
foreach (DateTimeEx aDay in aSC)
{
listBox1.Items.Add(DateTime.Parse(aDay.ToString()).ToLongDateString());
}
}
}
次のサンプルコードは、クライアント側で複数選択モードで選択された日付をテキストコントロールに表示する方法を示します。
function Calendar1_SelectedDateChanged(sender, eArgs)
{
var dates = new Array();
dates = sender.GetSelections();
FindIMControl("GcTextBox1").SetLines(dates);
}