Ignite UI for Angular

すべて
  • パブリック
  • パブリック/保護
  • すべて

Class IgxCalendarComponent

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

Igx Module

IgxCalendarModule

Igx Theme

igx-calendar-theme, igx-icon-theme

Igx Keywords

calendar, datepicker, schedule, date

Igx Group

スケジュール

備考

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

@例:

<igx-calendar selection="range"></igx-calendar>

階層

Hierarchy

  • IgxMonthPickerBaseDirective
    • IgxCalendarComponent

実装

  • AfterViewInit
  • OnDestroy

プロパティ

アクセサー

メソッド

プロパティ

activeViewChanged

activeViewChanged: EventEmitter<IgxCalendarView> = ...

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

<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 = ...

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

備考

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

例

<igx-calendar id="my-first-calendar"></igx-calendar>

次のメンバー

IgxCalendarComponent

selected

selected: EventEmitter<Date | Date[]> = ...

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

showWeekNumbers

showWeekNumbers: boolean = false

週番号を表示/非表示します。

例

<igx-calendar [showWeekNumbers]="true"></igx-calendar>
``

vertical

vertical: boolean = false

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

例

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

viewDateChanged

viewDateChanged: EventEmitter<IViewDateChangeEventArgs> = ...

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

<igx-calendar (viewDateChanged)="viewDateChanged($event)"></igx-calendar>

public viewDateChanged(event: IViewDateChangeEventArgs) {
 let viewDate = event.currentValue;
}

アクセサー

activeView

context

  • get context(): {
        $implicit: {
            date: Date;
            full: string;
            index: number;
            monthView: (() => void);
            yearView: (() => void);
        };
    }

  • igxCalendarSubHeaderMonth または igxCalendarSubHeaderYear ディレクティブとマークされるテンプレートのコンテキストを取得します。

    例

    let context =  this.calendar.context;

    返却 {
        $implicit: {
            date: Date;
            full: string;
            index: number;
            monthView: (() => void);
            yearView: (() => void);
        };
    }

    • $implicit: {
          date: Date;
          full: string;
          index: number;
          monthView: (() => void);
          yearView: (() => void);
      }
      • date: Date
      • full: string
      • index: number
      • monthView: (() => void)
          • (): void

          • 返却 void

      • yearView: (() => void)
          • (): void

          • 返却 void

disabledDates

formatOptions

formatViews

headerContext

  • get headerContext(): {
        $implicit: {
            date: Date;
            full: string;
            index: number;
            monthView: (() => void);
            yearView: (() => void);
        };
    }

  • igxCalendarHeader ディレクティブとマークされるテンプレートのコンテキストを取得します。

    例

    let headerContext =  this.calendar.headerContext;

    返却 {
        $implicit: {
            date: Date;
            full: string;
            index: number;
            monthView: (() => void);
            yearView: (() => void);
        };
    }

    • $implicit: {
          date: Date;
          full: string;
          index: number;
          monthView: (() => void);
          yearView: (() => void);
      }
      • date: Date
      • full: string
      • index: number
      • monthView: (() => void)
          • (): void

          • 返却 void

      • yearView: (() => void)
          • (): void

          • 返却 void

headerTemplate

locale

monthsViewNumber

resourceStrings

selection

specialDates

subheaderTemplate

value

  • get value(): Date | Date[]

  • 選択された日付を取得します。

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

    返却 Date | Date[]

  • set value(value): void

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

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

    パラメーター

    • value: Date | Date[]

    返却 void

viewDate

weekStart

  • get weekStart(): number

  • 週の最初の曜日を取得します。 曜日の数値または列挙型の表現を返します。 設定されていない場合、デフォルトでアプリケーション ロケールの週の初日になります。

    返却 number

  • set weekStart(value): void

  • 週の最初の曜日を設定します。 数値または WEEKDAYS の列挙型の値に割り当てます。

    パラメーター

    • value: number

    返却 void

メソッド

deselectDate

  • 日付を選択タイプに基づいて選択解除します。

    例

     this.calendar.deselectDate(new Date(`2018-06-12`));

    パラメーター

    • Optional value: Date | Date[]

    返却 void

ngAfterViewInit

selectDate

suppressBlur