[]
【重要】2024年1月公開のアップデート「未適用」のお客様へ デモ ヘルプ APIリファレンス
トライアル版
(Showing Draft Content)

Wijmo_Input.Calendar

Calendar クラス

Calendarコントロールは、1つ以上の月を含むテーブルを表示し、ユーザーが日付を表示および選択できます。

min プロパティと max プロパティを使用すると、 ユーザーが選択できる日付の範囲を制限できます。

min および max properties, プロパティの使用方法については、 「minおよびmaxプロパティの使用」トピックを参照してください。

現在選択されている日付を取得または設定するには、 value プロパティを使用します。

selectionMode プロパティを使用すると、ユーザーが日、範囲や月を選択できるか、 またはどの値も選択できないかを決定できます。

Calendar コントロールは、次のキーボードコマンドをサポートしています。

キーの組み合わせアクション
Left前の日
Right次の日
Up前の週
Down次の週
PgUp前の月
PgDn次の月
Alt + PgUp前の年
Alt + PgDn次の年
Home月の最初の有効な日
End月の最後の有効な日
Alt + End今日

次の例は、ユーザーが一回のクリックで日付を選択できるCalendarコントロールを示しています。

デモ

階層

コンストラクタ

プロパティ

メソッド

イベント

コンストラクタ

constructor

  • new Calendar(element: any, options?: any): Calendar

  • Calendar クラスの新しいインスタンスを初期化します。

    引数

    • element: any

      このコントロールをホストするDOM要素またはホスト要素のセレクタ（'#theCtrl'など）。

    • オプション options: any

      コントロールの初期化データを含むJavaScriptオブジェクト。

    戻り値 Calendar

プロパティ

displayMonth

displayMonth: Date

カレンダーに表示されている月を取得または設定します。

firstDayOfWeek

firstDayOfWeek: number | null

週の最初の曜日（カレンダーの最初の列に表示される曜日）を表す値を取得または設定します。

このプロパティのデフォルト値はnullです。現在のカルチャのデフォルトが使用されます。 週の最初の曜日は、英語カルチャでは日曜日（0）であり、 ほとんどのヨーロッパカルチャでは月曜日（1）です。

formatDayHeaders

formatDayHeaders: string

月表示で、曜日の上に表示されるヘッダーの書式を取得または設定します。

このプロパティのデフォルト値は'ddd'です。

formatDays

formatDays: string

月表示で、日の表示書式を取得または設定します。

このプロパティのデフォルト値は 'd 'です（'d'の後のスペースは、 短い日付パターンを表す標準な書式'd'と解釈されないようにします）。

formatMonths

formatMonths: string

年表示で、月の表示書式を取得または設定します。

このプロパティのデフォルト値は'MMM'です。

formatYear

formatYear: string

年表示で、月の上に表示される年の書式を取得または設定します。

このプロパティのデフォルト値は'yyyy'です。

formatYearMonth

formatYearMonth: string

月表示で、カレンダーの上に表示される月と年の書式を取得または設定します。

このプロパティのデフォルト値は'y'です。

handleWheel

handleWheel: boolean

ユーザーがマウスホイールで現在のdisplayMonthを変更できるかどうかを決定する値を取得または設定します。

このプロパティのデフォルト値はtrueです。

hostElement

hostElement: HTMLElement

コントロールをホストしているDOM要素を取得します。

isDisabled

isDisabled: boolean

コントロールが無効かどうかを判定する値を取得または設定します。

無効化されたコントロールは、マウスイベントやキーボードイベントを取得できません。

isReadOnly

isReadOnly: boolean

ユーザーがマウスとキーボードを使用してコントロールの値を変更できるかどうかを決定する値を取得または設定します。

このプロパティのデフォルト値はfalseです。

isTouching

isTouching: boolean

現在、コントロールがタッチイベントを処理しているかどうかを示す値を取得します。

isUpdating

isUpdating: boolean

コントロールが現在更新中かどうかを示す値を取得します。

itemFormatter

itemFormatter: IDateFormatter | null

カレンダーの日付をカスタマイズするフォーマッター関数を取得または設定します。

このフォーマッター関数は、任意の日付に任意の内容を追加できます。そのため、カレンダーの外観と動作を全面的にカスタマイズすることが可能です。

この関数は以下の2つのパラメーターをとります。

  • 書式設定する日付
  • 日付を表すHTML要素

以下のサンプルコードは週末を無効な状態で表示します。

calendar.itemFormatter = (date, element) => {
    let day = date.getDay();
    element.style.backgroundColor = (day == 0 || day == 6) ? 'yellow' : '';
}

itemValidator

itemValidator: IDateValidator | null

日付が選択可能かどうかを決定するバリデーター関数を取得または設定します。

このバリデーター関数は、調べる日付を表す1つのパラメーターを受け取り、 その日付が無効で選択できない場合、 falseを返す必要があります。

以下のサンプルコードは、週末を無効な状態で表示し、 ユーザーがそれらの日付を選択できないようにします。

calendar.itemValidator = date => {
    let weekday = date.getDay();
    return weekday != 0 && weekday != 6;
}

max

max: Date | null

ユーザーがカレンダーで選択できる最も遅い日付を取得または設定します。

このプロパティのデフォルト値は nullです。これは、最も早い日付が定義されていないことを意味します。

min およびmax プロパティの使用方法については、 「minおよびmaxプロパティの使用<」トピックを参照してください。

min

min: Date | null

ユーザーがカレンダーで選択できる最も早い日付を取得または設定します。

このプロパティのデフォルト値は nullです。これは、最も早い日付が定義されていないことを意味します。

min およびmax プロパティの使用方法については、 「minおよびmaxプロパティの使用<」トピックを参照してください。

monthCount

monthCount: number

カレンダーに表示する月数を取得または設定します。

このプロパティのデフォルト値は1です。

このプロパティを1より大きい値に設定すると、 連続する月を表示するコントロールに子カレンダーが追加されます。

コントロール内のすべてのカレンダーは同期されているため、親カレンダーのプロパティを変更すると、 すべての子カレンダーが自動的に更新されます(value、rangeEnd、およびselectionModeプロパティ)。

複数の月が表示される場合、 メインコントロールのホスト要素は、 CSSで表示を「flex」に切り替えるために使用される 「wj-calendar-multimonth」クラスを使用します。

「フレックス」コンテナは非常に用途が広いです。 外側のコントロールの幅を制限する、 月を水平または垂直に折り返す、 メインコントロール内で月を揃えて位置合わせするなどの操作を実行できます。

monthView

monthView: boolean

カレンダーに月表示（セルごとに1日）を表示するか、年表示（セルごとに1か月）を表示するかを決定する値を取得または設定します。

このプロパティのデフォルト値はtrueです。

rangeEnd

rangeEnd: Date

範囲選択で最後に選択された日付を取得または設定します。

日付範囲の選択を有効にするには、selectionModeプロパティをDateSelectionMode.Rangeに設定します。

これにより、選択範囲はvalueプロパティとrangeEndプロパティによって定義されます。

nullでない場合、rangeEndの日付は、 範囲の開始を表すvalueの日付以上(大きいか等しい)である必要があります。

rangeMax

rangeMax: number

日付範囲の編集時に許可される最大長を取得または設定します。

このプロパティは、selectionModeプロパティがDateSelectionMode.Rangeに設定されている場合にのみ使用されます。

このプロパティのデフォルト値は0です。これは、範囲の長さの最大値がないことを意味します。

rangeMin

rangeMin: number

日付範囲の編集時に許可される最小日数を取得または設定します。

このプロパティは、selectionModeプロパティがDateSelectionMode.Rangeに設定されている場合にのみ使用されます。

このプロパティのデフォルト値は0です。これは、範囲の長さの最小値がないことを意味します。

repeatButtons

repeatButtons: boolean

カレンダーボタンがリピートボタン(押された状態で繰り返し実行するボタン)として動作するかどうかを決定する値を取得または設定します。

このプロパティのデフォルト値はtrueです。

rightToLeft

rightToLeft: boolean

要素内のコントロールを右から左のレイアウトでホストするかどうかを示す値を取得します。

selectionMode

selectionMode: DateSelectionMode

ユーザーが日、日の範囲、月を選択できるか、またはどの値も選択できないかを示す値を取得または設定します。

このプロパティのデフォルト値はDateSelectionMode.Dayです。

showHeader

showHeader: boolean

コントロールに現在の月とナビゲーションボタンを含むヘッダ領域を表示するかどうかを決定する値を取得または設定します。

このプロパティのデフォルト値はtrueです。

showMonthPicker

showMonthPicker: boolean | ShowMonthPicker

ユーザーが月のカレンダーのヘッダー要素をクリックしたときに カレンダーに月のリストを表示するかどうかを決定する値と、 次の月または前の月へ移動するボタンを取得または設定します。

このプロパティのデフォルト値はShowMonthPicker.FirstMonthです。

showYearPicker

showYearPicker: boolean

ユーザーが年カレンダーのヘッダー要素をクリックすると、カレンダーに 年のリストを表示するかどうかを決定する値を取得または設定します。

このプロパティのデフォルト値はtrueです。

value

value: Date

現在選択されている日付を取得または設定します。

このプロパティのデフォルト値は現在の日付です。

範囲を編集する場合、現在の範囲はvalueプロパティとrangeEndプロパティの間の間隔によって定義されます。

valueプロパティを設定すると、rangeEndプロパティが自動的にnullにリセットされ、ユーザーはカレンダーの範囲終了値をクリックして範囲の選択を終了できます。

コードで範囲を定義するには、最初にvalueを設定し、rangeEndを設定する必要があります。 以下に例を示します。

// 「開始」から「終了」までの範囲が選択されます。
cal.value = start; // rangeEnd == null
cal.rangeEnd = end; // rangeEnd == 'end'

// **機能しません**
cal.rangeEnd = end; // rangeEnd == 'end'
cal.value = start; // rangeEnd == null

weeksAfter

weeksAfter: number

カレンダーに現在の月の後に表示する週数を取得または設定します。

このプロパティのデフォルト値はzeroです。

weeksBefore

weeksBefore: number

カレンダーに現在の月の前に表示する週数を取得または設定します。

このプロパティのデフォルト値はzeroです。

静的 controlTemplate

controlTemplate: string

Calendar コントロールのインスタンス化に使用されるテンプレートを取得または設定します。

メソッド

addEventListener

  • addEventListener(target: EventTarget, type: string, fn: any, capture?: boolean, passive?: boolean): void

  • このControl が所有する要素にイベントリスナーを追加します。

    コントロールは、アタッチされているリスナーとそのハンドラのリストを保持し、 コントロール が破棄されているときにそれらを簡単に削除すること ができます（dispose と removeEventListener ) メソッドを参照してください）。

    イベントリスナーを削除しないと、メモリリークが発生する可能があります。

    デフォルトでは passive パラメータはfalseに設定されています。これはイベントハンドラが event.preventDefault() を呼び出すことを意味します。 タッチイベントまたはマウスホイールイベントにpassiveハンドラを追加する場合は、このパラメータをtrueに設定するとアプリケーションのパフォーマンスが向上します。

    passive　イベントリスナーの詳細については、「Improving scrolling performance with passive listeners」を参考してください。

    引数

    • target: EventTarget

      イベントのターゲット要素。

    • type: string

      イベントを指定する文字列。

    • fn: any

      イベントが発生したときに実行する関数。

    • オプション capture: boolean

      リスナーがターゲット要素によって処理される前にコントロールによって処理される必要があるかどうかを示します。

    • オプション passive: boolean

      ハンドラーが preventDefault() を呼び出さないことを示します。

    戻り値 void

applyTemplate

  • applyTemplate(classNames: string, template: string, parts: Object, namePart?: string): HTMLElement

  • コントロールの新しいインスタンスにテンプレートを適用し、ルート要素を返します。

    このメソッドはテンプレート化されたコントロールのコンストラクターによって呼び出され、 テンプレートのパーツを対応するコントロールメンバにバインドする役割を持ちます。

    以下のサンプルコードは、InputNumber コントロールのインスタンスにテンプレートを適用します。 このテンプレートには、'wj-part'属性が'input'、'btn-inc'、および'btn-dec'に設定された要素を含める必要があります。 コントロールのメンバである'_tbx'、'_btnUp'、'_btnDn'には、これらの要素への参照が割り当てられます。

    this.applyTemplate('wj-control wj-inputnumber', templateString, {
  _tbx: 'input',
  _btnUp: 'btn-inc',
  _btnDn: 'btn-dec'
}, 'input');

    @param classNames コントロールのホスト要素に追加するクラスの名前。 @param template コントロールのテンプレートを定義するHTML文字列。 @param parts パーツ変数とその名前のディクショナリー。 @param namePart ホスト要素にちなんで名付けられたパーツの名前。 これにより、コントロールがフォームで使用されたときにデータをどのように送信するかが決まります。

    引数

    • classNames: string
    • template: string
    • parts: Object
    • オプション namePart: string

    戻り値 HTMLElement

beginUpdate

  • beginUpdate(): void

deferUpdate

  • deferUpdate(fn: Function): void

  • beginUpdate/endUpdate ブロック内で関数を実行します。

    この関数の実行が完了するまでコントロールは更新されません。 このメソッドは、関数が例外を生成した場合でも endUpdate が呼び出されるようにします。

    引数

    • fn: Function

      実行する関数。

    戻り値 void

endUpdate

  • endUpdate(): void

ensureVisible

  • ensureVisible(date: Date): void

  • 必要に応じて{@see displayMonth}の値を調整して、特定の日付がカレンダーに表示されるようにします。

    引数

    • date: Date

      表示する日付。

    戻り値 void

focus

  • focus(): void

  • このコントロールにフォーカスを設定します。

    戻り値 void

getTemplate

  • getTemplate(): string

  • コントロールのインスタンスの作成に使用されたHTMLテンプレートを取得します。

    このメソッドは、クラス階層をさかのぼってコントロールのテンプレートを指定する最も近い祖先を探します。 たとえば、ComboBox コントロールのプロトタイプを指定した場合、 そのプロトタイプによってDropDown 基本クラスで定義されたテンプレートがオーバーライドされます。

    戻り値 string

hasOwnProperty

  • hasOwnProperty(v: PropertyKey): boolean

  • オブジェクトが指定されたプロパティを持つかどうかを判定します。

    引数

    • v: PropertyKey

      プロパティの名前。

    戻り値 boolean

hitTest

  • hitTest(e: MouseEvent | Element): Date

  • 指定されたマウス位置で、または指定されたHTML要素で表される日付を取得します。

    引数

    • e: MouseEvent | Element

      テストする要素。

    戻り値 Date

    要素によって表される日付、または要素が日付を表さない場合はnull。

initialize

  • initialize(options: any): void

  • 指定したオブジェクトからプロパティをコピーしてコントロールを初期化します。

    このメソッドを使用すると、各プロパティの値をコードで設定する代わりにプレーンなデータオブジェクトを使用してコントロールを初期化できます。

    例: 

    grid.initialize({
  itemsSource: myList,
  autoGenerateColumns: false,
  columns: [
    { binding: 'id', header: 'Code', width: 130 },
    { binding: 'name', header: 'Name', width: 60 }
  ]
});

// 以下と同等です。
grid.itemsSource = myList;
grid.autoGenerateColumns = false;
// など

    初期化データは適用時に型チェックされます。 初期化オブジェクトに不明なプロパティ名または無効なデータ型が含まれている場合、このメソッドは例外を発生します。

    引数

    • options: any

      初期化データを含むオブジェクト。

    戻り値 void

invalidate

  • invalidate(fullUpdate?: boolean): void

  • 非同期更新を発生させるため、コントロールを無効にします。

    引数

    • オプション fullUpdate: boolean

      内容だけでなくコントロールのレイアウトも更新するかどうか。

    戻り値 void

isPrototypeOf

  • isPrototypeOf(v: Object): boolean

  • オブジェクトが別のオブジェクトのプロトタイプチェーンに存在するかどうかを判定します。

    引数

    • v: Object

      プロトタイプチェーンが判定される別のオブジェクト。

    戻り値 boolean

onDisplayMonthChanged

onFormatItem

onGotFocus

onInvalidInput

  • invalidInput イベントを発生させます。

    イベントハンドラーがイベントをキャンセルした場合、コントロールは無効な入力内容とフォーカスを保持します。

    引数

    戻り値 boolean

onLostFocus

onRangeChanged

onRangeEndChanged

onRefreshed

onRefreshing

onValueChanged

propertyIsEnumerable

  • propertyIsEnumerable(v: PropertyKey): boolean

  • 指定されたプロパティが列挙可能かどうかを判断します。

    引数

    • v: PropertyKey

      プロパティの名前。

    戻り値 boolean

removeEventListener

  • removeEventListener(target?: EventTarget, type?: string, fn?: any, capture?: boolean): number

  • このControl が所有する要素にアタッチされている1つまたは複数のイベントリスナーを解除します。

    引数

    • オプション target: EventTarget

      イベントのターゲット要素。 nullの場合、すべてのターゲットにアタッチされているリスナーが解除されます

    • オプション type: string

      イベントを指定する文字列。 nullの場合、すべてのイベントにアタッチされているリスナーが解除されます。

    • オプション fn: any

      削除するハンドラ。 nullの場合は、すべてのハンドラが削除されます。

    • オプション capture: boolean

      リスナーがキャプチャリスナーかどうか。 nullの場合、キャプチャリスナーと非キャプチャリスナーの両方が解除されます。

    戻り値 number

    削除されたリスナーの数。

toLocaleString

  • toLocaleString(): string

  • 現在のロケールを使用して文字列に変換された日付を返します。

    戻り値 string

toString

  • toString(): string

  • オブジェクトの文字列表現を返します。

    戻り値 string

valueOf

  • valueOf(): Object

  • 指定されたオブジェクトのプリミティブ値を返します。

    戻り値 Object

静的 disposeAll

  • disposeAll(e?: HTMLElement): void

  • HTML要素に含まれるすべてのWijmoコントロールを破棄します。

    引数

    • オプション e: HTMLElement

      コンテナー要素。

    戻り値 void

静的 getControl

  • getControl(element: any): Control

  • 指定したDOM要素でホストされているコントロールを取得します。

    引数

    • element: any

      コントロールをホストするDOM要素、またはホスト要素のCSS セレクター（例: '#theCtrl'）。

    戻り値 Control

静的 invalidateAll

  • invalidateAll(e?: HTMLElement): void

  • 指定したHTML要素に含まれるすべてのWijmoコントロールを無効化します。

    このメソッドは、コントロールの表示状態やサイズを変更する 動的なパネルをアプリケーションで使用している場合に使用します。 たとえば、スプリッタ、アコーディオン、およびタブコントロールは通常、 その中の要素の表示状態を変更します。この場合、その要素に含まれるコントロールに通知しないと、 それらのコントロールが適切に機能しなくなる可能性があります。 これが起こる場合は、動的コンテナーで適切なイベントを処理し、 Control.invalidateAll メソッドを呼び出してコンテナー内のWijmoコントロールの レイアウト情報が適切に更新されるようにする必要があります。

    引数

    • オプション e: HTMLElement

      コンテナー要素。nullに設定すると、ページ上に存在するすべてのWijmoコントロールが無効化されます。

    戻り値 void

静的 refreshAll

  • refreshAll(e?: HTMLElement): void

  • HTML要素で存在するすべてのWijmoコントロールを更新する。

    コントロールが時間おいて更新される代わりに直ちに更新されること以外はinvalidateAll メソッドと同様です。

    引数

    • オプション e: HTMLElement

      コンテナー要素。nullに設定すると、ページ上に存在するすべてのWijmoコントロールが無効化されます。

    戻り値 void

イベント

displayMonthChanged

displayMonthChanged: Event<Calendar, EventArgs>

displayMonth プロパティが変更された後に発生します。

formatItem

formatItem: Event<Calendar, FormatItemEventArgs>

カレンダーの日を表す要素が作成されたときに発生します。

このイベントを使用してカレンダーの項目を表示用に書式設定できます。このイベントは、目的はitemFormatter プロパティと同じですが、複数の独立したハンドラを使用できる利点があります。

以下のサンプルコードは、formatItem イベントを使用して週末を無効な状態にし、 カレンダーにグレーで表示されるようにします。

// 日曜日と土曜日を無効にします
calendar.formatItem.addHandler((s, e) => {
    let day = e.data.getDay();
    if (day == 0 || day == 6) {
      addClass(e.item, 'wj-state-disabled');
    }
});

gotFocus

gotFocus: Event<Control, EventArgs>

コントロールがフォーカスを取得したときに発生します。

invalidInput

invalidInput: Event<Control, CancelEventArgs>

無効な文字が入力されたときに発生します。

ユーザーが入力した値が適切な種類に変換できない値、または有効な範囲外の値を貼り付ける場合、 無効な入力エラーが発生する場合があります。

イベントハンドラーがイベントをキャンセルする場合、 ユーザーがエラーを修正できるように、 コントロールは無効なコンテンツとフォーカスを保持します。

イベントがキャンセルされない場合、コントロールは無効な入力エラーを無視し、 元のコンテンツを保持します。

lostFocus

lostFocus: Event<Control, EventArgs>

コントロールがフォーカスを失ったときに発生します。

rangeChanged

rangeChanged: Event<Calendar, EventArgs>

rangeEnd プロパティの値がnull以外の値に変更されたときに発生します。 本動作は、データ範囲が選択されたことを示します。

rangeEndChanged

rangeEndChanged: Event<Calendar, EventArgs>

rangeEnd プロパティの値が変更されたときに発生します。

refreshed

refreshed: Event<Control, EventArgs>

コントロールが内容を更新した後で発生します。

refreshing

refreshing: Event<Control, EventArgs>

コントロールが内容を更新する直前に発生します。

valueChanged

valueChanged: Event<Calendar, EventArgs>

value プロパティの値が変更されたときに発生します。