アクティブ ビューが変更されるときにイベントを発生します。
<igx-calendar (activeViewChanged)="activeViewChanged($event)"></igx-calendar>
public activeViewChanged(event: CalendarView) {
let activeView = event;
}
カレンダーにヘッダーが含まれているかどうかを設定/取得します。
デフォルト値は true
です。
<igx-calendar [hasHeader]="false"></igx-calendar>
現在の月以外の日付を非表示にするかどうかを設定または取得します。
デフォルト値は 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>
IgxCalendarComponent
日付が選択されたときにイベントを発生します。
selectedDates
プロパティに参照を提供します。
週番号の表示/非表示
<igx-calendar [showWeekNumbers]="true"></igx-calendar>
``
カレンダー ヘッダーが垂直配置にあるかどうかを取得または設定します。
デフォルト値は false
です。
<igx-calendar [vertical] = "true"></igx-calendar>
月ビューが変更されるときにイベントを発生します。
<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
ディレクティブとマークされるテンプレートのコンテキストを取得します。
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;
IgxCalendarComponent
ヘッダー テンプレートを設定します。
<igx-calendar headerTemplateDirective = "igxCalendarHeader"></igx-calendar>
IgxCalendarComponent
カレンダーの locale
を取得します。
設定されていない場合、デフォルトでアプリケーションのロケールになります。
カレンダーの locale
を設定します。
有効な BCP 47 言語タグに設定します。
表示される月ビューの数を設定または取得します。
デフォルト値は 1
です。
<igx-calendar [monthsViewNumber]="2"></igx-calendar>
リソース文字列を返すアクセサー。
リソース文字列を設定するアクセサー。 デフォルトで 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}];
}
サブヘッダー テンプレートを取得します。
let subheaderTemplate = this.calendar.subheaderTemplate;
サブヘッダー テンプレートを設定します。
<igx-calendar subheaderTemplate = "igxCalendarSubheader"></igx-calendar>
IgxCalendarComponent
選択された日付を設定します。
選択が single
を設定した場合、
単一のDate
オブジェクトを返します。
それ以外の場合、Date
オブジェクトの配列です。
選択された日付を設定します。
選択が single
, に設定される場合、
単一の Date
オブジェクトを許容します。
それ以外の場合、Date
オブジェクトの配列です。
表示される日付を取得します。 デフォルト値は現在の日付です。
コンポーネントを描画するときにデフォルト ビューで表示される日付を設定します。
週の最初の曜日を取得します。 曜日の数値または列挙型の表現を返します。 設定されていない場合、デフォルトでアプリケーション ロケールの週の初日になります。
週の最初の曜日を設定します。
数値または WEEKDAYS
の列挙型の値に割り当てます。
カレンダーは、日付情報を表示する方法を提供します。
Igx Module
IgxCalendarModule
Igx Theme
igx-calendar-theme, igx-icon-theme
Igx Keywords
calendar, datepicker, schedule, date
Igx Group
スケージュール
Remarks
Ignite UI Calendar はカレンダーを表示し、ユーザーは単一または複数の範囲を使用して 日付を選択できます。
@例: