クラス IgxCalendarComponent

カレンダーは、日付情報を表示する方法を提供します。

@igxmodule

IgxCalendarModule

@igxtheme

igx-calendar-theme, igx-icon-theme

@igxkeywords

calendar, datepicker, schedule, date

@igxgroup

Scheduling

@備考:

Ignite UI Calendar はカレンダーを表示し、ユーザーは単一または複数の範囲を使用して日付を選択できます。

@例:
<igx-calendar selection="range"></igx-calendar>

階層

実装

  • ControlValueAccessor
  • AfterViewInit
  • OnDestroy

プロパティ

activeViewChanged

activeViewChanged: EventEmitter<CalendarView> = new EventEmitter<CalendarView>()

アクティブ ビューが変更されるときにイベントを発生します。

<igx-calendar (activeViewChanged)="activeViewChanged($event)"></igx-calendar>
public activeViewChanged(event: CalendarView) {
 let activeView = event;
}

hasHeader

hasHeader: boolean = true

カレンダーにヘッダーが含まれているかどうかを設定/取得します。 デフォルト値は true です。

@例:
<igx-calendar [hasHeader]="false"></igx-calendar>

hideOutsideDays

hideOutsideDays: boolean = false

現在の月以外の日付を非表示にするかどうかを設定または取得します。 デフォルト値は false です。

<igx-calendar [hideOutsideDays] = "true"></igx-calendar>
let hideOutsideDays = this.calendar.hideOutsideDays;

id

id: string = `igx-calendar-${NEXT_ID++}`

カレンダーの id を取得または設定します。

@備考:

設定しない場合、id"igx-calendar-0" 値を持ちます。

@例:
<igx-calendar id="my-first-calendar"></igx-calendar>
@次のメンバー:

IgxCalendarComponent

onSelection

onSelection: EventEmitter<Date | Date[]> = new EventEmitter<Date | Date[]>()

日付が選択されたときにイベントを発生します。 selectedDates プロパティに参照を提供します。

vertical

vertical: boolean = false

カレンダー ヘッダーが垂直配置にあるかどうかを取得または設定します。 デフォルト値は false です。

@例:
<igx-calendar [vertical] = "true"></igx-calendar>

viewDateChanged

viewDateChanged: EventEmitter<IViewDateChangeEventArgs> = new EventEmitter<IViewDateChangeEventArgs>()

月ビューが変更されるときにイベントを発生します。

<igx-calendar (viewDateChanged)="viewDateChanged($event)"></igx-calendar>
public viewDateChanged(event: IViewDateChangeEventArgs) {
 let viewDate = event.currentValue;
}

アクセサー

activeView

context

  • get context(): object

disabledDates

formatOptions

formatViews

headerContext

  • get headerContext(): object

headerTemplate

  • get headerTemplate(): any
  • set headerTemplate(directive: any): void

locale

  • get locale(): string
  • set locale(value: string): void

monthsViewNumber

  • get monthsViewNumber(): number
  • set monthsViewNumber(val: number): void

selection

  • get selection(): string
  • set selection(value: string): void

specialDates

subheaderTemplate

  • get subheaderTemplate(): any
  • set subheaderTemplate(directive: any): void

value

  • get value(): Date | Date[]
  • set value(value: Date | Date[]): void
  • 選択された日付を設定します。

    選択が single を設定した場合、単一の Date オブジェクトを返します。 それ以外の場合、Date オブジェクトの配列です。

    返却 Date | Date[]

  • 選択された日付を設定します。

    選択が single に設定される場合、単一の Date オブジェクトを許容します。 それ以外の場合、Date オブジェクトの配列です。

    パラメーター

    • value: Date | Date[]

    返却 void

viewDate

  • get viewDate(): Date
  • set viewDate(value: Date): void

weekStart

  • get weekStart(): WEEKDAYS | number
  • set weekStart(value: WEEKDAYS | number): void

メソッド

deselectDate

  • deselectDate(value?: Date | Date[]): void

ngAfterViewInit

  • ngAfterViewInit(): void

selectDate

  • selectDate(value: Date | Date[]): void