アクティブ ビューが変更されるときにイベントを発生します。
<igx-calendar (activeViewChanged)="activeViewChanged($event)"></igx-calendar>
public activeViewChanged(event: CalendarView) {
let activeView = event;
}
カレンダーにヘッダーが含まれているかどうかを設定/取得します。
デフォルト値は true です。
現在の月以外の日付を非表示にするかどうかを設定または取得します。
デフォルト値は false です。
<igx-calendar [hideOutsideDays] = "true"></igx-calendar>
let hideOutsideDays = this.calendar.hideOutsideDays;
カレンダーの id を取得または設定します。
日付が選択されたときにイベントを発生します。
selectedDates プロパティに参照を提供します。
週番号の表示/非表示
カレンダー ヘッダーが垂直配置にあるかどうかを取得または設定します。
デフォルト値は false です。
月ビューが変更されるときにイベントを発生します。
<igx-calendar (viewDateChanged)="viewDateChanged($event)"></igx-calendar>
public viewDateChanged(event: IViewDateChangeEventArgs) {
let viewDate = event.currentValue;
}
現在のアクティブ ビューを取得します。
this.activeView = calendar.activeView;
現在のアクティブ ビューを設定します。
<igx-calendar [activeView]="year" #calendar></igx-calendar>
calendar.activeView = IgxCalendarView.YEAR;
igxCalendarSubHeaderMonth または igxCalendarSubHeaderYear ディレクティブとマークされるテンプレートのコンテキストを取得します。
無効な日付記述子を取得します。
無効な日付記述子を設定します。
@ViewChild("MyCalendar")
public calendar: IgxCalendarComponent;
ngOnInit(){
this.calendar.disabledDates = [
{type: DateRangeType.Between, dateRange: [new Date("2020-1-1"), new Date("2020-1-15")]},
{type: DateRangeType.Weekends}];
}
日ビューの日付書式設定オプションを取得します。
日ビューの日付書式設定オプションを設定します。 デフォルト値は { day: 'numeric', month: 'short', weekday: 'short', year: 'numeric' } です。
day、month、および year が locale および formatOptions によって描画されるかどうかを取得します。
day、month、および year が locale および formatOptions によって描画されるかどうかを取得します。
igxCalendarHeader ディレクティブとマークされるテンプレートのコンテキストを取得します。
ヘッダー テンプレートを取得します。
ヘッダー テンプレートを設定します。
カレンダーの locale を取得します。
デフォルト値は "en" です。
カレンダーの locale を設定します。
有効な BCP 47 言語タグに設定します。
デフォルト値は "en" です。
表示される月ビューの数を設定または取得します。
デフォルト値は 1 です。
表示される月ビューの数を設定または取得します。
デフォルト値は 1 です。
リソース文字列を返すアクセサー。
リソース文字列を設定するアクセサー。 デフォルトで EN リソースを使用します。
選択タイプを取得します。
デフォルト値は "single" です。
選択タイプを変更すると、現在選択されている値がリセットされます。
選択を設定します。
特別な日付記述子を取得します。
特別な日付記述子を設定します。
@ViewChild("MyCalendar")
public calendar: IgxCalendarComponent;
ngOnInit(){
this.calendar.specialDates = [
{type: DateRangeType.Between, dateRange: [new Date("2020-1-1"), new Date("2020-1-15")]},
{type: DateRangeType.Weekends}];
}
サブヘッダー テンプレートを取得します。
サブヘッダー テンプレートを設定します。
選択された日付を設定します。
選択が single を設定した場合、単一の Date オブジェクトを返します。
それ以外の場合、Date オブジェクトの配列です。
選択された日付を設定します。
選択が single に設定される場合、単一の Date オブジェクトを許容します。
それ以外の場合、Date オブジェクトの配列です。
表示される日付を取得します。 デフォルト値は現在の日付です。
コンポーネントを描画するときにデフォルト ビューで表示される日付を設定します。
週の最初の曜日を取得します。
曜日の数値または列挙型の表現を返します。
初期値は Sunday / 0 です。
週の最初の曜日を設定します。
数値または WEEKDAYS の列挙型の値に割り当てます。
日付を選択タイプに基づいて選択解除します。
日付を選択タイプに基づいて選択します。
カレンダーは、日付情報を表示する方法を提供します。
IgxCalendarModule
igx-calendar-theme, igx-icon-theme
calendar, datepicker, schedule, date
Scheduling
Ignite UI Calendar はカレンダーを表示し、ユーザーは単一または複数の範囲を使用して日付を選択できます。