diff --git a/CHANGELOG.md b/CHANGELOG.md index 7d1ee468e50..ea76de667e4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -30,7 +30,7 @@ All notable changes for each version of this project will be documented in this - `onOpening` and `onClosing` events are emitting now arguments of `ToggleViewCancelableEventArgs` type. - `IgxSelect` - Added `aria-labelledby` property for the items list container(marked as `role="listbox"`). This will ensure the users of assistive technologies will also know what the list items container is used for, upon opening. -- `IgxDatePicker` +- `IgxDatePicker` - **Breaking Change** - Deprecated the `label` property. - Added `aria-labelledby` property for the input field. This will ensure the users of assistive technologies will also know what component is used for, upon input focus. - `igxNavigationDrawer` @@ -38,7 +38,9 @@ All notable changes for each version of this project will be documented in this - `igxTabs` - Added `disableAnimation` property which enables/disables the transition animation of the tabs' content. Set to `false` by default. - `IgxExpansionPanel` - - `IExpansionPanelEventArgs.panel` - Deprecated. Usе `owner` property to get a reference to the panel. + - `IExpansionPanelEventArgs.panel` - Deprecated. Usе `owner` property to get a reference to the panel. +- `IgxCalendarComponent`, `IgxMonthsViewComponent` and `IgxYearsViewComponent` + - `tabIndex` property was removed in order to improve on page navigation and to be compliant with W3 accessability recommendations; Also the date grid in the calendar is now only one tab stop, the same approach is applied and in the `IgxMonthsViewComponent` and `IgxYearsViewComponent`; ### New Features - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid` diff --git a/projects/igniteui-angular/src/lib/calendar/calendar-multi-view.component.spec.ts b/projects/igniteui-angular/src/lib/calendar/calendar-multi-view.component.spec.ts index 9039d622201..05d8269dc85 100644 --- a/projects/igniteui-angular/src/lib/calendar/calendar-multi-view.component.spec.ts +++ b/projects/igniteui-angular/src/lib/calendar/calendar-multi-view.component.spec.ts @@ -554,6 +554,45 @@ describe('Multi-View Calendar - ', () => { HelperTestFunctions.verifyCalendarSubHeaders(fixture, [march2020, april2020, may2020]); })); + it('Verify tabindex is correct when navigating with arrow keys', fakeAsync(() => { + calendar.hideOutsideDays = true; + fixture.detectChanges(); + + let dates = HelperTestFunctions.getMonthViewDates(fixture, 0); + UIInteractions.simulateClickEvent(dates[0]); + fixture.detectChanges(); + tick(); + + UIInteractions.triggerKeyDownEvtUponElem('ArrowDown', dates[0]); + fixture.detectChanges(); + tick(); + dates = HelperTestFunctions.getMonthViewDates(fixture, 0); + expect(document.activeElement).toEqual(dates[7]); + expect(dates[7].tabIndex).toBe(0); + + UIInteractions.triggerKeyDownEvtUponElem('ArrowUp', dates[7]); + fixture.detectChanges(); + tick(); + dates = HelperTestFunctions.getMonthViewDates(fixture, 0); + expect(document.activeElement).toEqual(dates[0]); + expect(dates[0].tabIndex).toBe(0); + + UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', dates[0]); + fixture.detectChanges(); + tick(); + dates = HelperTestFunctions.getMonthViewDates(fixture, 0); + expect(document.activeElement).toEqual(dates[1]); + expect(dates[1].tabIndex).toBe(0); + + UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', dates[1]); + fixture.detectChanges(); + tick(); + dates = HelperTestFunctions.getMonthViewDates(fixture, 0); + expect(document.activeElement).toEqual(dates[0]); + expect(dates[0].tabIndex).toBe(0); + })); + + it('Verify navigation with pageUp', fakeAsync(() => { let monthDates = HelperTestFunctions.getMonthViewDates(fixture, 1); UIInteractions.simulateClickEvent(monthDates[16]); @@ -694,17 +733,19 @@ describe('Multi-View Calendar - ', () => { fixture.detectChanges(); inactiveDates = HelperTestFunctions.getMonthViewInactiveDates(fixture, 0); inactiveDates.forEach(date => { - expect(date.tabIndex).toEqual(0); + expect(date.tabIndex).toEqual(-1); }); monthDates = HelperTestFunctions.getMonthViewDates(fixture, 0); for (let index = 6; index < 14; index++) { - expect(monthDates[index].tabIndex).toEqual(0); + expect(monthDates[index].tabIndex).toEqual(-1); } + + expect(monthDates[0].tabIndex).toEqual(0); })); - it('Verify navigation with Home and End keys', fakeAsync(() => { + it('Verify navigation with Home and End keys and check the tabindex', fakeAsync(() => { let monthDates = HelperTestFunctions.getMonthViewDates(fixture, 1); UIInteractions.simulateClickEvent(monthDates[16]); fixture.detectChanges(); @@ -716,6 +757,8 @@ describe('Multi-View Calendar - ', () => { monthDates = HelperTestFunctions.getMonthViewDates(fixture, 0); expect(document.activeElement).toEqual(monthDates[0]); + expect(monthDates[0].tabIndex).toEqual(0); + UIInteractions.triggerKeyDownEvtUponElem('End', monthDates[0], true); fixture.detectChanges(); @@ -723,6 +766,8 @@ describe('Multi-View Calendar - ', () => { monthDates = HelperTestFunctions.getMonthViewDates(fixture, 2); expect(document.activeElement).toEqual(monthDates[monthDates.length - 1]); + expect(monthDates[monthDates.length - 1].tabIndex).toEqual(0); + })); it('Verify navigation with Home and End keys when there are disabled dates', fakeAsync(() => { diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.html b/projects/igniteui-angular/src/lib/calendar/calendar.component.html index 628f67245ac..f1612c21944 100644 --- a/projects/igniteui-angular/src/lib/calendar/calendar.component.html +++ b/projects/igniteui-angular/src/lib/calendar/calendar.component.html @@ -50,6 +50,7 @@

[selection]="selection" [locale]="locale" [value]="value" + [(activeDate)]="activeDate" [viewDate]="i | IgxGetViewDate:viewDate" [weekStart]="weekStart" [formatOptions]="formatOptions" @@ -59,7 +60,8 @@

[hideOutsideDays]="hideOutsideDays" [showWeekNumbers]="showWeekNumbers" (onViewChanging)="viewChanging($event)" - (onDateSelection)="childClicked($event)"> + (onDateSelection)="childClicked($event)" + (monthsViewBlur)="resetActiveDate()"> diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts index 949551f74a6..1a0085c3cc3 100644 --- a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts +++ b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts @@ -191,15 +191,6 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements */ public callback: (next) => void; - /** - * The default `tabindex` attribute for the component. - * - * @hidden - * @internal - */ - @HostBinding('attr.tabindex') - public tabindex = 0; - /** * The default aria role attribute for the component. * @@ -402,6 +393,12 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements return this.selectedDates ? this.selectedDates : new Date(); } + /** + * @hidden + * @internal + */ + public activeDate = new Date().toLocaleDateString(); + /** * @hidden * @internal @@ -492,10 +489,10 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements */ public nextMonth(isKeydownTrigger = false) { if (isKeydownTrigger && this.animationAction === 'prev') { return; } + this.isKeydownTrigger = isKeydownTrigger; this.previousViewDate = this.viewDate; this.viewDate = this.calendarModel.getNextMonth(this.viewDate); this.animationAction = ScrollMonth.NEXT; - this.isKeydownTrigger = isKeydownTrigger; } /** @@ -556,7 +553,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements requestAnimationFrame(() => { if (this.dacadeView) { this.dacadeView.date = args; - this.dacadeView.el.nativeElement.focus(); + this.dacadeView.calendarDir.find(date => date.isCurrentYear).nativeElement.focus(); } }); } @@ -571,7 +568,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements requestAnimationFrame(() => { if (this.dacadeView) { this.dacadeView.date = args; - this.dacadeView.el.nativeElement.focus(); + this.dacadeView.calendarDir.find(date => date.isCurrentYear).nativeElement.focus(); } }); } @@ -732,6 +729,9 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements (event.fromState === 'void' && event.toState === ScrollMonth.NONE)) { this.viewDateChanged.emit({ previousValue: this.previousViewDate, currentValue: this.viewDate }); } + if (!this.isKeydownTrigger) { + this.resetActiveDate(); + } if (this.monthScrollDirection !== ScrollMonth.NONE) { this.scrollMonth$.next(); @@ -768,6 +768,21 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements } } + /** + * @hidden + * @internal + */ + public resetActiveDate() { + if (!this.monthViews) { return; } + let dates = []; + this.monthViews.map(mv => mv.dates).forEach(days => { dates = dates.concat(days.toArray()); }); + const date = dates.find(day => day.selected && day.isCurrentMonth) || dates.find(day => day.isToday && day.isCurrentMonth) + || dates.find(d => d.isFocusable); + if (date) { + this.activeDate = date.date.date.toLocaleDateString(); + } + } + /** * Keyboard navigation of the calendar * @hidden @@ -781,7 +796,6 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements return; } - const isPageDown = event.key === 'PageDown'; const step = isPageDown ? 1 : -1; let monthView = this.daysView as IgxDaysViewComponent; diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.directives.ts b/projects/igniteui-angular/src/lib/calendar/calendar.directives.ts index 6fdb30d1d29..6fb9e3a0339 100644 --- a/projects/igniteui-angular/src/lib/calendar/calendar.directives.ts +++ b/projects/igniteui-angular/src/lib/calendar/calendar.directives.ts @@ -48,10 +48,22 @@ export class IgxCalendarYearDirective { return this.isCurrentYear; } + @HostBinding('attr.tabindex') + public get tabIndex(): number { + return this.isCurrentYear ? 0 : -1; + } + + public get isCurrentYear(): boolean { return this.date.getFullYear() === this.value.getFullYear(); } + public get nativeElement() { + return this.elementRef.nativeElement; + } + + constructor(public elementRef: ElementRef) {} + @HostListener('click') public onClick() { this.onYearSelection.emit(this.value); @@ -75,9 +87,6 @@ export class IgxCalendarMonthDirective { @Output() public onMonthSelection = new EventEmitter(); - @HostBinding('attr.tabindex') - public tabindex = 0; - @HostBinding('class.igx-calendar__month') public get defaultCSS(): boolean { return !this.isCurrentMonth; diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/day-item.component.ts b/projects/igniteui-angular/src/lib/calendar/days-view/day-item.component.ts index 50654bece96..db49948bd36 100644 --- a/projects/igniteui-angular/src/lib/calendar/days-view/day-item.component.ts +++ b/projects/igniteui-angular/src/lib/calendar/days-view/day-item.component.ts @@ -155,18 +155,14 @@ export class IgxDayItemComponent { return this.selection !== CalendarSelection.RANGE; } - @HostBinding('attr.tabindex') - public get tabindex(): number { - return this.isDisabled || this.isHidden ? -1 : 0; - } - private _selected = false; constructor(private elementRef: ElementRef) { } - @HostListener('click') - @HostListener('keydown.enter') - public onSelect() { + @HostListener('click', ['$event']) + @HostListener('keydown.enter', ['$event']) + public onSelect(event) { + event.stopPropagation(); this.onDateSelection.emit(this.date); } } diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.html b/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.html index 4ebc73e1c7d..94674c4a078 100644 --- a/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.html +++ b/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.html @@ -27,6 +27,8 @@ [specialDates]="specialDates" [outOfRangeDates]="outOfRangeDates" [hideOutsideDays]="hideOutsideDays" + [attr.tabindex]="tabIndex(day)" + (focus)="activeDate = day.date.toLocaleDateString()" (onDateSelection)="selectDay($event)"> {{ formattedDate(day.date) }} diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts b/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts index 851d2a4e64b..37995a7a0b8 100644 --- a/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts +++ b/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts @@ -65,6 +65,20 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do @Input() public showWeekNumbers: boolean; + /** + * @hidden + * @internal + */ + @Input() + public set activeDate(value: string) { + this._activeDate = value; + this.activeDateChange.emit(this._activeDate); + } + + public get activeDate() { + return this._activeDate ? this._activeDate : this.viewDate.toLocaleDateString(); + } + /** * @hidden */ @@ -77,6 +91,18 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do @Output() public onViewChanging = new EventEmitter(); + /** + * @hidden + */ + @Output() + public activeDateChange = new EventEmitter(); + + /** + * @hidden + */ + @Output() + public monthsViewBlur = new EventEmitter(); + /** * @hidden */ @@ -97,6 +123,8 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do * @hidden */ public prevMonthView: IgxDaysViewComponent; + public _activeDate; + private shouldResetDate = true; /** * The default css class applied to the component. @@ -106,6 +134,34 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do @HostBinding('class.igx-calendar') public styleClass = true; + /** + * @hidden + * @internal + */ + @HostListener('focusout') + public resetActiveMonth() { + if (this.shouldResetDate) { + const date = this.dates.find(day => day.selected && day.isCurrentMonth) + || this.dates.find(day => day.isToday && day.isCurrentMonth) || this.dates.find(d => d.isFocusable); + if (date) { this.activeDate = date.date.date.toLocaleDateString(); } + this.monthsViewBlur.emit(); + } + this.shouldResetDate = true; + } + + /** + * @hidden + * @internal + */ + @HostListener('keydown.pagedown') + @HostListener('keydown.pageup') + @HostListener('keydown.shift.pagedown') + @HostListener('keydown.shift.pageup') + @HostListener('pointerdown') + public pointerDown() { + this.shouldResetDate = false; + } + /** * @hidden */ @@ -136,6 +192,14 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do } } + /** + * @hidden + * @internal + */ + public tabIndex(day: ICalendarDate): number { + return this.activeDate && this.activeDate === day.date.toLocaleDateString() && day.isCurrentMonth ? 0 : -1; + } + /** * Returns the week number by date * @@ -301,7 +365,6 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do public selectDay(event) { this.selectDateFromClient(event.date); this.onDateSelection.emit(event); - this.onSelection.emit(this.selectedDates); } @@ -361,6 +424,7 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do public onKeydownArrow(event: KeyboardEvent) { event.preventDefault(); event.stopPropagation(); + this.shouldResetDate = false; this.daysNavService.focusNextDate(event.target as HTMLElement, event.key); } @@ -371,6 +435,7 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do public onKeydownHome(event: KeyboardEvent) { event.preventDefault(); event.stopPropagation(); + this.shouldResetDate = false; this.getFirstMonthView().daysNavService.focusHomeDate(); } @@ -381,6 +446,7 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do public onKeydownEnd(event: KeyboardEvent) { event.preventDefault(); event.stopPropagation(); + this.shouldResetDate = false; this.getLastMonthView().daysNavService.focusEndDate(); } } diff --git a/projects/igniteui-angular/src/lib/calendar/month-picker-base.ts b/projects/igniteui-angular/src/lib/calendar/month-picker-base.ts index 24150ce16f0..1310ad5fd79 100644 --- a/projects/igniteui-angular/src/lib/calendar/month-picker-base.ts +++ b/projects/igniteui-angular/src/lib/calendar/month-picker-base.ts @@ -21,14 +21,6 @@ export class IgxMonthPickerBaseDirective extends IgxCalendarBaseDirective { */ protected activeViewIdx = 0; - /** - * The default `tabindex` attribute for the component. - * - * @hidden - */ - @HostBinding('attr.tabindex') - public tabindex = 0; - /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.html b/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.html index f806ff9b403..f41e629d2e6 100644 --- a/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.html +++ b/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.html @@ -1,6 +1,6 @@
-
+
{{ formattedMonth(month) | titlecase }}
diff --git a/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts b/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts index 6a69075a8aa..1060aed7999 100644 --- a/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts +++ b/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts @@ -48,7 +48,14 @@ export class IgxMonthsViewComponent implements ControlValueAccessor { * @memberof IgxMonthsViewComponent */ @Input() - public date = new Date(); + public set date(value) { + this._date = value; + this.activeMonth = this.date.getMonth(); + } + + public get date() { + return this._date; + } /** * Gets the month format option of the months view. @@ -132,15 +139,6 @@ export class IgxMonthsViewComponent implements ControlValueAccessor { @ViewChildren(IgxCalendarMonthDirective, { read: IgxCalendarMonthDirective }) public monthsRef: QueryList; - - /** - * The default `tabindex` attribute for the component. - * - * @hidden - */ - @HostBinding('attr.tabindex') - public tabindex = 0; - /** * Returns an array of date objects which are then used to * properly render the month names. @@ -161,6 +159,13 @@ export class IgxMonthsViewComponent implements ControlValueAccessor { return result; } + /** + * @hidden + * @internal + */ + public activeMonth; + + private _date = new Date(); /** * @hidden */ @@ -214,6 +219,7 @@ export class IgxMonthsViewComponent implements ControlValueAccessor { this.onSelection.emit(event); this.date = event; + this.activeMonth = this.date.getMonth(); this._onChangeCallback(this.date); } @@ -274,7 +280,9 @@ export class IgxMonthsViewComponent implements ControlValueAccessor { const nextNodeRect = months[index].nativeElement.getBoundingClientRect(); const tolerance = 6; if (nodeRect.top !== nextNodeRect.top && (nextNodeRect.left - nodeRect.left) < tolerance) { - months[index].nativeElement.focus(); + const month = months[index]; + month.nativeElement.focus(); + this.activeMonth = month.value.getMonth(); break; } } @@ -300,7 +308,9 @@ export class IgxMonthsViewComponent implements ControlValueAccessor { const nextNodeRect = months[index].nativeElement.getBoundingClientRect(); const tolerance = 6; if (nextNodeRect.top !== nodeRect.top && (nodeRect.left - nextNodeRect.left) < tolerance ) { - months[index].nativeElement.focus(); + const month = months[index]; + month.nativeElement.focus(); + this.activeMonth = month.value.getMonth(); break; } } @@ -320,7 +330,7 @@ export class IgxMonthsViewComponent implements ControlValueAccessor { const months = this.monthsRef.toArray(); if (months.indexOf(node) + 1 < months.length) { const month = months[months.indexOf(node) + 1]; - + this.activeMonth = month.value.getMonth(); month.nativeElement.focus(); } } @@ -339,7 +349,7 @@ export class IgxMonthsViewComponent implements ControlValueAccessor { const months = this.monthsRef.toArray(); if (months.indexOf(node) - 1 >= 0) { const month = months[months.indexOf(node) - 1]; - + this.activeMonth = month.value.getMonth(); month.nativeElement.focus(); } } @@ -353,7 +363,7 @@ export class IgxMonthsViewComponent implements ControlValueAccessor { event.stopPropagation(); const month = this.monthsRef.toArray()[0]; - + this.activeMonth = month.value.getMonth(); month.nativeElement.focus(); } @@ -367,7 +377,7 @@ export class IgxMonthsViewComponent implements ControlValueAccessor { const months = this.monthsRef.toArray(); const month = months[months.length - 1]; - + this.activeMonth = month.value.getMonth(); month.nativeElement.focus(); } @@ -378,8 +388,13 @@ export class IgxMonthsViewComponent implements ControlValueAccessor { public onKeydownEnter(event) { const value = this.monthsRef.find((date) => date.nativeElement === event.target).value; this.date = new Date(value.getFullYear(), value.getMonth(), this.date.getDate()); - + this.activeMonth = this.date.getMonth(); this.onSelection.emit(this.date); this._onChangeCallback(this.date); } + + @HostListener('focusout', ['$event']) + public resetActiveMonth(event) { + this.activeMonth = this.date.getMonth(); + } } diff --git a/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts b/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts index 1d1865881ea..5b609b90e24 100644 --- a/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts +++ b/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts @@ -1,7 +1,8 @@ -import { Component, Output, EventEmitter, Input, HostBinding, HostListener, ElementRef, Injectable} from '@angular/core'; +import { Component, Output, EventEmitter, Input, HostBinding, HostListener, ElementRef, Injectable, ViewChildren, QueryList} from '@angular/core'; import { range, Calendar } from '../calendar'; import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser'; +import { IgxCalendarYearDirective } from '../calendar.directives'; let NEXT_ID = 0; @@ -135,12 +136,11 @@ export class IgxYearsViewComponent implements ControlValueAccessor { public styleClass = true; /** - * The default `tabindex` attribute for the component. - * * @hidden + * @internal */ - @HostBinding('attr.tabindex') - public tabindex = 0; + @ViewChildren(IgxCalendarYearDirective, { read: IgxCalendarYearDirective }) + public calendarDir: QueryList; /** * Returns an array of date objects which are then used to properly @@ -276,6 +276,7 @@ export class IgxYearsViewComponent implements ControlValueAccessor { event.stopPropagation(); this.generateYearRange(1); + this.calendarDir.find(date => date.isCurrentYear).nativeElement.nextElementSibling.focus(); } /** @@ -287,6 +288,7 @@ export class IgxYearsViewComponent implements ControlValueAccessor { event.stopPropagation(); this.generateYearRange(-1); + this.calendarDir.find(date => date.isCurrentYear).nativeElement.previousElementSibling.focus(); } /** diff --git a/src/app/calendar/calendar.sample.html b/src/app/calendar/calendar.sample.html index 200bd2ca2f1..a89892909d1 100644 --- a/src/app/calendar/calendar.sample.html +++ b/src/app/calendar/calendar.sample.html @@ -4,8 +4,9 @@
+ {{cal.activeDate}}

Calendar Sample (NO Card wrapper)

- +
@@ -21,16 +22,17 @@

Default Calendar

+ {{calendar.activeDate}}
- +

Vertical Calendar

- +
diff --git a/src/app/calendar/calendar.sample.ts b/src/app/calendar/calendar.sample.ts index 00362b45c53..06fd618ace8 100644 --- a/src/app/calendar/calendar.sample.ts +++ b/src/app/calendar/calendar.sample.ts @@ -1,5 +1,6 @@ -import { Component, OnInit, ViewChild } from '@angular/core'; +import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; import { IgxCalendarComponent, IgxDialogComponent, DateRangeType, CalendarView } from 'igniteui-angular'; +import { type } from 'os'; import { IViewDateChangeEventArgs } from '../../../projects/igniteui-angular/src/lib/calendar/calendar-base'; @Component({ @@ -7,12 +8,13 @@ import { IViewDateChangeEventArgs } from '../../../projects/igniteui-angular/src templateUrl: 'calendar.sample.html', styleUrls: ['calendar.sample.scss'] }) -export class CalendarSampleComponent implements OnInit { +export class CalendarSampleComponent implements OnInit, AfterViewInit { @ViewChild('calendar', { static: true }) calendar: IgxCalendarComponent; @ViewChild('calendar1', { static: true }) public calendar1: IgxCalendarComponent; @ViewChild('alert', { static: true }) public dialog: IgxDialogComponent; public range = []; public today = new Date(); + public ppNovember = new Date(this.today.getFullYear(), this.today.getMonth() + 1, 10); public rangeDisabled = [ new Date(this.today.getFullYear(), this.today.getMonth(), 10), new Date(this.today.getFullYear(), this.today.getMonth(), 13) @@ -20,6 +22,12 @@ export class CalendarSampleComponent implements OnInit { public ngOnInit() { this.calendar1.disabledDates = [{ type: DateRangeType.Between, dateRange: this.rangeDisabled }]; + this.calendar.selectDate([ new Date(this.today.getFullYear(), this.today.getMonth(), 10), + new Date(this.today.getFullYear(), this.today.getMonth(), 17), + new Date(this.today.getFullYear(), this.today.getMonth(), 27)]); + } + + public ngAfterViewInit() { } public selectPTOdays(dates: Date[]) { @@ -66,7 +74,12 @@ export class CalendarSampleComponent implements OnInit { } public select() { - this.calendar.selectDate(new Date(this.today.getFullYear(), this.today.getMonth() + 1, 11)); + if (this.calendar.selection === 'single') { + this.calendar.selectDate(new Date(this.today.getFullYear(), this.today.getMonth() + 1, 11)); + } else { + this.calendar.selectDate([new Date(this.today.getFullYear(), this.today.getMonth(), 10), + new Date(this.today.getFullYear(), this.today.getMonth(), 13)]); + } } public deselect() {