@@ -87,6 +87,7 @@ let NEXT_ID = 0;
8787 templateUrl : 'calendar.component.html'
8888} )
8989export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements AfterViewInit , OnDestroy {
90+
9091 /**
9192 * Sets/gets the `id` of the calendar.
9293 *
@@ -142,23 +143,11 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
142143 }
143144
144145 set monthsViewNumber ( val : number ) {
145- if ( this . _monthsViewNumber === val || val <= 0 ) {
146+ if ( val < 1 ) {
146147 return ;
147- } else if ( this . _monthsViewNumber < val ) {
148- for ( let i = this . _monthsViewNumber ; i < val ; i ++ ) {
149- const nextMonthDate = new Date ( this . viewDate ) ;
150- nextMonthDate . setMonth ( nextMonthDate . getMonth ( ) + i ) ;
151- const monthView = {
152- value : null ,
153- viewDate : nextMonthDate
154- } ;
155- this . dayViews . push ( monthView ) ;
156- }
157- this . _monthsViewNumber = val ;
158- } else {
159- this . dayViews . splice ( val , this . dayViews . length - val ) ;
160- this . _monthsViewNumber = val ;
161148 }
149+
150+ this . _monthsViewNumber = val ;
162151 }
163152
164153 /**
@@ -252,8 +241,8 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
252241 * @hidden
253242 * @internal
254243 */
255- @ViewChild ( 'monthsBtn' )
256- public monthsBtn : ElementRef ;
244+ @ViewChildren ( 'monthsBtn' )
245+ public monthsBtns : QueryList < ElementRef > ;
257246
258247 /**
259248 * ViewChild that represents the decade view.
@@ -327,7 +316,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
327316 /**
328317 * Sets the header template.
329318 *
330- * @example
319+ * @example
331320 * ```html
332321 * <igx-calendar headerTemplateDirective = "igxCalendarHeader"></igx-calendar>
333322 * ```
@@ -429,23 +418,6 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
429418 */
430419 private _monthViewsChanges$ : Subscription ;
431420
432- /**
433- * @hidden
434- * @internal
435- */
436- private defaultDayView = {
437- value : this . value ,
438- viewDate : this . viewDate
439- } ;
440-
441- /**
442- * Days which are displayed into the calendar days view
443- *
444- * @hidden
445- * @internal
446- */
447- public dayViews = [ this . defaultDayView ] ;
448-
449421 public ngAfterViewInit ( ) {
450422 this . setSiblingMonths ( this . monthViews ) ;
451423 this . _monthViewsChanges$ = this . monthViews . changes . subscribe ( c => {
@@ -494,7 +466,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
494466 * @internal
495467 */
496468 public previousMonth ( isKeydownTrigger = false ) {
497- this . viewDate = this . calendarModel . timedelta ( this . viewDate , 'month' , - 1 ) ;
469+ this . viewDate = this . calendarModel . getPrevMonth ( this . viewDate ) ;
498470 this . animationAction = ScrollMonth . PREV ;
499471 this . isKeydownTrigger = isKeydownTrigger ;
500472 }
@@ -506,7 +478,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
506478 * @internal
507479 */
508480 public nextMonth ( isKeydownTrigger = false ) {
509- this . viewDate = this . calendarModel . timedelta ( this . viewDate , 'month' , 1 ) ;
481+ this . viewDate = this . calendarModel . getNextMonth ( this . viewDate ) ;
510482 this . animationAction = ScrollMonth . NEXT ;
511483 this . isKeydownTrigger = isKeydownTrigger ;
512484 }
@@ -564,8 +536,8 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
564536 * @hidden
565537 * @internal
566538 */
567- public activeViewDecade ( args : Date ) {
568- super . activeViewDecade ( ) ;
539+ public onActiveViewDecade ( args : Date , activeViewIdx : number ) {
540+ super . activeViewDecade ( activeViewIdx ) ;
569541 requestAnimationFrame ( ( ) => {
570542 if ( this . dacadeView ) {
571543 this . dacadeView . date = args ;
@@ -578,8 +550,8 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
578550 * @hidden
579551 * @internal
580552 */
581- public activeViewDecadeKB ( event , args : Date ) {
582- super . activeViewDecadeKB ( event , args ) ;
553+ public onActiveViewDecadeKB ( event , args : Date , activeViewIdx : number ) {
554+ super . activeViewDecadeKB ( event , activeViewIdx ) ;
583555
584556 requestAnimationFrame ( ( ) => {
585557 if ( this . dacadeView ) {
@@ -635,51 +607,53 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
635607 this . callback = ( next ) => {
636608 const day = this . daysView . dates . find ( ( item ) => item . date . date . getTime ( ) === next . getTime ( ) ) ;
637609 if ( day ) {
638- this . daysView . navService . focusNextDate ( day . nativeElement , args . key , true ) ;
610+ this . daysView . daysNavService . focusNextDate ( day . nativeElement , args . key , true ) ;
639611 }
640612 } ;
641- this . viewDate = this . calendarModel . timedelta ( this . nextDate , 'month' , 0 ) ;
613+ this . viewDate = this . nextDate ;
642614 }
643615
644616 /**
645617 * @hidden
646618 * @intenal
647619 */
648620 public changeMonth ( event : Date ) {
649- this . viewDate = new Date ( this . viewDate . getFullYear ( ) , event . getMonth ( ) ) ;
621+ this . viewDate = this . calendarModel . getFirstViewDate ( event , 'month' , this . activeViewIdx ) ;
650622 this . activeView = CalendarView . DEFAULT ;
651623
652624 requestAnimationFrame ( ( ) => {
653- if ( this . monthsBtn ) { this . monthsBtn . nativeElement . focus ( ) ; }
625+ const elem = this . monthsBtns . find ( ( e : ElementRef , idx : number ) => idx === this . activeViewIdx ) ;
626+ if ( elem ) { elem . nativeElement . focus ( ) ; }
654627 } ) ;
655628 }
656629
657630 /**
658631 * @hidden
659632 * @internal
660633 */
661- public activeViewYear ( args : Date , event ) : void {
634+ public onActiveViewYear ( args : Date , activeViewIdx : number , event ? ) : void {
662635 this . activeView = CalendarView . YEAR ;
636+ this . activeViewIdx = activeViewIdx ;
663637 requestAnimationFrame ( ( ) => {
664638 this . monthsView . date = args ;
665639 this . focusMonth ( event . target ) ;
666640 } ) ;
667641 }
668642
669643 private focusMonth ( target : HTMLElement ) {
670- const month = this . monthsView . dates . find ( ( date ) =>
671- date . index === parseInt ( target . parentElement . attributes [ 'data-month' ] . value , 10 ) ) ;
644+ const month = this . monthsView . monthsRef . find ( ( e ) =>
645+ e . index === parseInt ( target . parentElement . attributes [ 'data-month' ] . value , 10 ) ) ;
672646 if ( month ) { month . nativeElement . focus ( ) ; }
673647 }
674648
675649 /**
676650 * @hidden
677651 * @internal
678652 */
679- public activeViewYearKB ( args : Date , event ) : void {
653+ public onActiveViewYearKB ( args : Date , event , activeViewIdx : number ) : void {
680654 if ( event . key === KEYS . SPACE || event . key === KEYS . SPACE_IE || event . key === KEYS . ENTER ) {
681655 event . preventDefault ( ) ;
682- this . activeViewYear ( args , event ) ;
656+ this . onActiveViewYear ( args , activeViewIdx , event ) ;
683657 }
684658 }
685659
@@ -722,22 +696,13 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
722696 return date ;
723697 }
724698
725- /**
726- * @hidden
727- * @internal
728- */
729- public getMonth ( i : number ) : number {
730- const date = this . calendarModel . timedelta ( this . viewDate , 'month' , i ) ;
731- return date . getMonth ( ) ;
732- }
733-
734699 /**
735700 * Getter for the context object inside the calendar templates.
736701 * @hidden
737702 * @internal
738703 */
739704 public getContext ( i : number ) {
740- const date = this . calendarModel . timedelta ( this . viewDate , 'month' , i ) ;
705+ const date = this . getViewDate ( i ) ;
741706 return this . generateContext ( date , i ) ;
742707 }
743708
@@ -941,8 +906,8 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
941906 private generateContext ( value : Date , i ?: number ) {
942907 const formatObject = {
943908 index : i ,
944- monthView : ( ) => this . activeViewYear ( value , event ) ,
945- yearView : ( ) => this . activeViewDecade ( value ) ,
909+ monthView : ( ) => this . onActiveViewYear ( value , i ) ,
910+ yearView : ( ) => this . onActiveViewDecade ( value , i ) ,
946911 ...this . calendarModel . formatToParts ( value , this . locale , this . formatOptions ,
947912 [ 'era' , 'year' , 'month' , 'day' , 'weekday' ] )
948913 } ;
0 commit comments