constructor(element: any, options?: any): Calendar
Calendarクラスの新しいインスタンスを初期化します。
The DOM element that hosts the control, or a selector for the host element (e.g. '#theCtrl').
The JavaScript object containing initialization data for the control.
週の最初の曜日（カレンダーの最初の列に表示される曜日）を表す値を取得または設定します。
このプロパティのデフォルト値は**null**です。現在のカルチャのデフォルトが使用されます。
週の最初の曜日は、英語カルチャでは日曜日（0）であり、ほとんどのヨーロッパカルチャでは月曜日（1）です。
月表示で、日の表示書式を取得または設定します。
このプロパティのデフォルト値は 'd 'です（'d'の後のスペースは、短い日付パターンを表す標準な書式'd'と解釈されないようにします）。
ユーザーがマウスホイールで現在のdisplayMonthを変更できるかどうかを決定する値を取得または設定します。
このプロパティのデフォルト値は**true**です。
コントロールが無効かどうかを判定する値を取得または設定します。
無効化されたコントロールは、マウスイベントやキーボードイベントを取得できません。
ユーザーがマウスとキーボードを使用してセル値を変更できるかどうかを判定する値を取得または設定します。
このプロパティのデフォルト値は **false**です。
カレンダーの日付をカスタマイズするフォーマッター関数を取得または設定します。
このフォーマッター関数は、任意の日付に任意の内容を追加できます。そのため、カレンダーの外観と動作を全面的にカスタマイズすることが可能です。
指定された場合、関数は次の2つのパラメータをとります。
以下のサンプルコードは週末を黄色の背景で示しています。 ```typescript calendar.itemFormatter = (date, element) => { let day = date.getDay(); element.style.backgroundColor = (day == 0 || day == 6) ? 'yellow' : ''; } ```
日付が選択可能かどうかを決定するバリデーター関数を取得または設定します。
If specified, the validator function should take one parameter representing the date to be tested, and should return false if the date is invalid and should not be selectable.
以下のサンプルコードは、週末を無効な状態で表示し、ユーザーがそれらの日付を選択できないようにします。 ```typescript calendar.itemValidator = date => { let weekday = date.getDay(); return weekday != 0 && weekday != 6; } ```
ユーザーがカレンダーで選択できる最も遅い日付を取得または設定します。
このプロパティのデフォルト値は **null**です。これは、最も早い日付が定義されていないことを意味します。
min およびmaxプロパティの使用方法については、「minおよびmaxプロパティの使用」トピックを参照してください。
ユーザーがカレンダーで選択できる最も早い日付を取得または設定します。
このプロパティのデフォルト値は **null**です。これは、最も早い日付が定義されていないことを意味します。
min およびmaxプロパティの使用方法については、「minおよびmaxプロパティの使用」トピックを参照してください。
カレンダーに表示する月数を取得または設定します。
このプロパティのデフォルト値は**1**です。
このプロパティを1より大きい値に設定すると、 連続する月を表示するコントロールに子カレンダーが追加されます。
コントロール内のすべてのカレンダーは同期されているため、親カレンダーのプロパティを変更すると、 すべての子カレンダーが自動的に更新されます(value、rangeEnd、およびselectionModeプロパティ)。
複数の月が表示される場合、 メインコントロールのホスト要素は、 CSSで表示を「flex」に切り替えるために使用される 「wj-calendar-multimonth」クラスを使用します。
「flex」コンテナは非常に用途が広いです。 外側のコントロールの幅を制限する、 月を水平または垂直に折り返す、 メインコントロール内で月を揃えて位置合わせするなどの操作を実行できます。
カレンダーに月表示（セルごとに1日）を表示するか、年表示（セルごとに1か月）を表示するかを決定する値を取得または設定します。
このプロパティのデフォルト値は**true**です。
範囲選択で最後に選択された日付を取得または設定します。
日付範囲の選択を有効にするには、selectionModeプロパティを**DateSelectionMode.Range**に設定します。
これにより、選択範囲はvalueプロパティとrangeEndプロパティによって定義されます。
nullでない場合、rangeEndの日付は、 範囲の開始を表すvalueの日付以上(大きいか等しい)である必要があります。
日付範囲の編集時に許可される最大長を取得または設定します。
このプロパティは、selectionModeプロパティがRangeに設定されている場合にのみ使用されます。
このプロパティのデフォルト値は**0**です。これは、範囲の長さの最大値がないことを意味します。
日付範囲の編集時に許可される最小日数を取得または設定します。
このプロパティは、selectionModeプロパティがRangeに設定されている場合にのみ使用されます。
このプロパティのデフォルト値は**0**です。これは、範囲の長さの最小値がないことを意味します。
カレンダーボタンがリピートボタン(押された状態で繰り返し実行するボタン)として動作するかどうかを決定する値を取得または設定します。
このプロパティのデフォルト値は**true**です。
ユーザーが日、日の範囲、月を選択できるか、またはどの値も選択できないかを示す値を取得または設定します。
このプロパティのデフォルト値は **DateSelectionMode.Day**.
コントロールに現在の月とナビゲーションボタンを含むヘッダ領域を表示するかどうかを決定する値を取得または設定します。
このプロパティのデフォルト値は**true**です。
ユーザーが月のカレンダーのヘッダー要素をクリックしたときに カレンダーに月のリストを表示するかどうかを決定する値と、 次の月または前の月へ移動するボタンを取得または設定します。
このプロパティのデフォルト値は **ShowMonthPicker.FirstMonth**.
ユーザーが年カレンダーのヘッダー要素をクリックすると、カレンダーに 年のリストを表示するかどうかを決定する値を取得または設定します。
このプロパティのデフォルト値は**true**です。
Gets or sets a value of the **tabindex** attribute associated with the control.
**tabindex** attribute value can be defined statically for a Wijmo control by specifying it on the control's host HTML element. But this value can't be changed later during application lifecycle, because Wijmo controls have complex structure, and the control may need to propagate this attribute value to its internal element to work properly.
Because of this, to read or change control's **tabindex** dynamically, you should do it using this property.
現在選択されている日付を取得または設定します。
このプロパティのデフォルト値は現在の日付です。
範囲を編集する場合、現在の範囲はvalueプロパティとrangeEndプロパティの間の間隔によって定義されます。
valueプロパティを設定すると、rangeEndプロパティが自動的にnullにリセットされ、ユーザーはカレンダーの範囲終了値をクリックして範囲の選択を終了できます。
valueプロパティを設定するとrangeEndがリセットされるため、コードで範囲を定義する場合は、最初にvalueを設定してから、rangeEnd.を設定する必要があります。 以下に例を示します。
```typescript // 「開始」から「終了」までの範囲が選択されます。 cal.value = start; // rangeEnd == null cal.rangeEnd = end; // rangeEnd == 'end'
// **機能しません** cal.rangeEnd = end; // rangeEnd == 'end' cal.value = start; // rangeEnd == null
addEventListener(target: EventTarget, type: string, fn: any, capture?: boolean, passive?: boolean): void
このControl が所有する要素にイベントリスナーを追加します。
コントロールは、アタッチされているリスナーとそのハンドラのリストを保持し、コントロールが破棄されているときにそれらを簡単に削除すること ができます（dispose と removeEventListener メソッドを参照してください）。
イベントリスナーを削除しないと、メモリリークが発生する可能があります。
デフォルトでは passive パラメータはfalseに設定されています。これはイベントハンドラが event.preventDefault() を呼び出すことを意味します。タッチイベントまたはマウスホイールイベントにpassiveハンドラを追加する場合は、このパラメータをtrueに設定するとアプリケーションのパフォーマンスが向上します。
passive イベントリスナーの詳細については、「<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners">Improving scrolling performance with passive listeners</a>」を参考してください。
Target element for the event.
String that specifies the event.
Function to execute when the event occurs.
Whether the listener should be handled by the control before it is handled by the target element.
Indicates that the handler will never call preventDefault().
applyTemplate(classNames: string, template: string, parts: Object, namePart?: string): HTMLElement
コントロールの新しいインスタンスにテンプレートを適用し、ルート要素を返します。
このメソッドはテンプレート化されたコントロールのコンストラクターによって呼び出される必要があります。テンプレートのパーツを対応するコントロールメンバにバインドする役割を持ちます。
以下のサンプルコードは、InputNumber コントロールのインスタンスにテンプレートを適用します。 このテンプレートには、'wj-part'属性が'input'、'btn-inc'、および'btn-dec'に設定された要素を含める必要があります。 コントロールのメンバである'_tbx'、'_btnUp'、'_btnDn'には、これらの要素への参照が割り当てられます。
```typescript this.applyTemplate('wj-control wj-inputnumber', templateString, { _tbx: 'input', _btnUp: 'btn-inc', _btnDn: 'btn-dec' }, 'input'); ``````
Names of classes to add to the control's host element.
An HTML string that defines the control template.
A dictionary of part variables and their names.
Name of the part to be named after the host element. This determines how the control submits data when used in forms.
deferUpdate(fn: Function): void
beginUpdate/endUpdateブロック内で関数を実行します。
この関数の実行が完了するまでコントロールは更新されません。 このメソッドは、関数が例外を生成した場合でもendUpdate が呼び出されるようにします。
Function to be executed.
dispose(): void
ホスト要素との関連付けを解除することによってコントロールを破棄します。
dispose メソッドは、addEventListener メソッドによって追加されたイベントリスナーを自動的に削除します。
コントロールを動的に作成および削除するアプリケーションでは、dispose メソッドを呼び出すことが重要です。コントロールを破棄しないと、メモリリークが発生する可能があります。
disposeAll(e?: HTMLElement): void
HTML要素に含まれるすべてのWijmoコントロールを破棄します。
Container element.
ensureVisible(date: Date): void
必要に応じて{@see displayMonth}の値を調整して、特定の日付がカレンダーに表示されるようにします。
Date to display.
getControl(element: any): Control
指定したDOM要素でホストされているコントロールを取得します。
The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl').
getTemplate(): string
hitTest(e: MouseEvent | Element): Date
指定されたマウス位置で、または指定されたHTML要素で表される日付を取得します。
Element to test.
initialize(options: any): void
指定したオブジェクトからプロパティをコピーしてコントロールを初期化します。
このメソッドを使用すると、各プロパティの値をコードで設定する代わりにプレーンなデータオブジェクトを使用してコントロールを初期化できます。
例:
```typescript 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; // など ```
初期化データは適用時に型チェックされます。初期化オブジェクトに不明なプロパティ名または無効なデータ型が含まれている場合、このメソッドは例外をスローします。
Object that contains the initialization data.
invalidate(fullUpdate?: boolean): void
非同期更新を発生させるため、コントロールを無効にします。
Whether to update the control layout as well as the content.
invalidateAll(e?: HTMLElement): void
指定したHTML要素に含まれるすべてのWijmoコントロールを無効化します。
このメソッドは、コントロールの表示状態やサイズを変更する動的なパネルをアプリケーションで使用している場合に使用します。たとえば、スプリッタ、アコーディオン、およびタブコントロールは通常、その中の要素の表示状態を変更します。この場合、その要素に含まれるコントロールに通知しないと、それらのコントロールが適切に機能しなくなる可能性があります。
これが起こる場合は、動的コンテナーで適切なイベントを処理し、invalidateAllメソッドを呼び出してコンテナー内のWijmoコントロールのレイアウト情報が適切に更新されるようにする必要があります。
Container element. If set to null, all Wijmo controls on the page will be invalidated.
onDisplayMonthChanged(e?: EventArgs): void
displayMonthChangedイベントを発生させます。
onFormatItem(e: FormatItemEventArgs): void
formatItem イベントを発生させます。
FormatItemEventArgs that contains the event data.
onGotFocus(e?: EventArgs): void
gotFocus イベントを発生させます。
onInvalidInput(e: CancelEventArgs): void
invalidInput イベントを発生させます。
イベントハンドラがイベントをキャンセルした場合、コントロールは無効な入力とフォーカスを保持します。
onLostFocus(e?: EventArgs): void
lostFocus イベントを発生させます。
onRangeChanged(e?: EventArgs): void
rangeChanged イベントを発生させます。
onRangeEndChanged(e?: EventArgs): void
rangeEndChangedイベントを発生させます。
onRefreshed(e?: EventArgs): void
refreshedイベントを発生させます。
onRefreshing(e?: EventArgs): void
refreshingイベントを発生させます。
onValueChanged(e?: EventArgs): void
valueChangedイベントを発生させます。
refresh(fullUpdate?: boolean): void
コントロールを更新します。
Whether to update the control layout as well as the content.
refreshAll(e?: HTMLElement): void
HTML要素で存在するすべてのWijmoコントロールを更新する。
コントロールが時間おいて更新される代わりに直ちに更新されること以外はinvalidateAll メソッドと同様です。
Container element. If set to null, all Wijmo controls on the page will be invalidated.
removeEventListener(target?: EventTarget, type?: string, fn?: any, capture?: boolean): number
このControl が所有する要素にアタッチされている1つまたは複数のイベントリスナーを解除します。
Target element for the event. If null, removes listeners attached to all targets.
String that specifies the event. If null, removes listeners attached to all events.
Handler to remove. If null, removes all handlers.
Whether the listener is capturing. If null, removes capturing and non-capturing listeners.
カレンダーの日を表す要素が作成されたときに発生します。
このイベントを使用して、表示するカレンダーアイテムをフォーマットできます。このイベントは、目的はitemFormatter プロパティと同じですが、 複数の独立したハンドラを使用できる利点があります。
以下のサンプルコードは、formatItem イベントを使用して週末を無効な状態にし、カレンダーにグレーで表示されるようにします。 ```typescript // 日曜日と土曜日を無効にします。 calendar.formatItem.addHandler((s, e) => { let day = e.data.getDay(); if (day == 0 || day == 6) { addClass(e.item, 'wj-state-disabled'); } }); ```
無効な入力値が検出された場合に発生します。
ユーザーが適切な型に変換できない値、または有効な範囲外の値を入力または貼り付けると、無効な入力が発生する可能性があります。
イベントハンドラがイベントをキャンセルした場合、コントロールは無効なコンテンツとフォーカスを保持するため、ユーザーはエラーを修正できます。
イベントがキャンセルされない場合、コントロールは無効な入力を無視し、元のコンテンツを保持します。
Calendarコントロールは、1つ以上の月を含むテーブルを表示し、ユーザーが日付を表示および選択できます。
minプロパティとmaxプロパティを使用して、ユーザーが選択可能な日付の範囲を制限できます。
min およびmaxプロパティの使用方法については、「minおよびmaxプロパティの使用」トピックを参照してください。
現在選択されている色を取得または設定するには、value プロパティを使用します。
selectionMode プロパティを使用すると、ユーザーが日や月を選択できるか、またはどの値も選択できないかを決定できます。
Calendar コントロールは、次のキーボードコマンドをサポートしています。
この例では、ユーザーが1回のクリックで日付を選択できる Calendar コントロールも示されています。
{@sample Input/Calendar/Overview/purejs デモ}