現在の月以外の日付を非表示にするかどうかを設定または取得します。
デフォルト値は false です。
<igx-calendar [hideOutsideDays] = "true"></igx-calendar>let hideOutsideDays = this.calendar.hideOutsideDays;カレンダーの id を取得または設定します。
設定しない場合、id は "igx-calendar-0" 値を持ちます。
<igx-calendar id = "my-first-calendar"></igx-calendar>let calendarId = this.calendar.id;日付が選択されたときにイベントを発生します。
selectedDates プロパティに参照を提供します。
カレンダー ヘッダーが垂直配置にあるかどうかを取得または設定します。
デフォルト値は false です。
<igx-calendar [vertical] = "true"></igx-calendar>let isVertical = this.calendar.vertical;現在のアクティブ ビューを取得します。
現在のビューを設定します。
igxCalendarSubHeaderMonth または igxCalendarSubHeaderYear ディレクティブとマークされるテンプレートのコンテキストを取得します。
let context = this.calendar.context;無効な日付記述子を取得します。
無効な日付記述子を設定します。
@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 ディレクティブとマークされるテンプレートのコンテキストを取得します。
let headerContext = this.calendar.headerContext;ヘッダー テンプレートを取得します。
let headerTemplate = this.calendar.headerTeamplate;ヘッダー テンプレートを設定します。
<igx-calendar headerTemplateDirective = "igxCalendarHeader"></igx-calendar>カレンダーの locale を取得します。
デフォルト値は "en" です。
カレンダーの locale を設定します。
有効な BCP 47 言語タグに設定します。
デフォルト値は "en" です。
表示される月ビューの数を設定または取得します。
デフォルト値は 1 です。
<igx-calendar [vertical] = "true" [monthsViewNumber]="2"></igx-calendar>let monthViewsDisplayed = this.calendar.monthsViewNumber;表示される月ビューの数を設定または取得します。
デフォルト値は 1 です。
<igx-calendar [vertical] = "true" [monthsViewNumber]="2"></igx-calendar>let monthViewsDisplayed = this.calendar.monthsViewNumber;選択タイプを取得します。
デフォルト値は "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}];
}サブヘッダー テンプレートを取得します。
let subheaderTemplate = this.calendar.subheaderTemplate;サブヘッダー テンプレートを設定します。
<igx-calendar subheaderTemplate = "igxCalendarSubheader"></igx-calendar>選択された日付を設定します。
選択が single を設定した場合、単一の Date オブジェクトを返します。
それ以外の場合、Date オブジェクトの配列です。
選択された日付を設定します。
選択が single に設定される場合、単一の Date オブジェクトを許容します。
それ以外の場合、Date オブジェクトの配列です。
表示される日付を取得します。 デフォルト値は現在の日付です。
コンポーネントを描画するときにデフォルト ビューで表示される日付を設定します。
日付を選択タイプに基づいて選択解除します。
this.calendar.deselectDate(new Date(`2018-06-12`));
`日付を選択タイプに基づいて選択します。
Ignite UI for Angular Calendar - ヘルプ
Ignite UI Calendar はカレンダーを表示し、ユーザーは単一または複数の範囲を使用して日付を選択できます。 例:
<igx-calendar selection="range"></igx-calendar>