Merge pull request #8057 from IgniteUI/calendar-week-numbers

Calendar week numbers

Author: zdrawku

projects/igniteui-angular/src/lib/calendar/calendar-helper-utils.ts

@@ -9,6 +9,9 @@ export class HelperTestFunctions {
     public static MODAL_OVERLAY_CSSCLASS = 'igx-overlay__wrapper--modal';
 
     public static CALENDAR_CSSCLASS = '.igx-calendar';
+    public static CALENDAR_WEEK_NUMBER_CLASS = '.igx-calendar__date--week-number';
+    public static CALENDAR_WEEK_NUMBER_ITEM_CLASS = '.igx-calendar__date-content--week-number';
+    public static CALENDAR_WEEK_NUMBER_LABEL_CLASS = '.igx-calendar__label--week-number';
     public static CALENDAR_HEADER_CSSCLASS = '.igx-calendar__header';
     public static CALENDAR_HEADER_YEAR_CSSCLASS = '.igx-calendar__header-year';
     public static CALENDAR_HEADER_DATE_CSSCLASS = '.igx-calendar__header-date';

projects/igniteui-angular/src/lib/calendar/calendar.component.html

@@ -57,6 +57,7 @@ <h2 class="igx-calendar__header-date">
                 [disabledDates]="disabledDates"
                 [specialDates]="specialDates"
                 [hideOutsideDays]="hideOutsideDays"
+                [showWeekNumbers]="showWeekNumbers"
                 (onViewChanging)="viewChanging($event)"
                 (onDateSelection)="childClicked($event)">
         </igx-days-view>

projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts

@@ -337,7 +337,7 @@ describe('IgxCalendar - ', () => {
                 // 6 weeks + week header
                 expect(calendarRows.length).toEqual(7);
 
-                // 7 calendar rows * 7 elements in each
+                // 6 calendar rows * 7 elements in each
                 expect(
                     dom.queryAll(By.css(`${HelperTestFunctions.CALENDAR_ROW_CSSCLASS} > igx-day-item`)).length
                 ).toEqual(42);
@@ -360,6 +360,45 @@ describe('IgxCalendar - ', () => {
                 expect(calendarHeader).toBeFalsy();
             });
 
+            it('Should properly render calendar DOM with week numbers enabled', () => {
+                const today = new Date(Date.now());
+                calendar.viewDate = today;
+                calendar.showWeekNumbers = true;
+                fixture.detectChanges();
+
+                const calendarRows = dom.queryAll(By.css(HelperTestFunctions.CALENDAR_ROW_CSSCLASS));
+                expect(calendarRows.length).toEqual(7);
+
+                // 6 calendar rows * 8 elements in each
+                expect(
+                    dom.queryAll(By.css(`${HelperTestFunctions.CALENDAR_ROW_CSSCLASS} > igx-day-item`)).length +
+                    dom.queryAll(By.css(`${HelperTestFunctions.CALENDAR_ROW_CSSCLASS} >
+                        ${HelperTestFunctions.CALENDAR_WEEK_NUMBER_CLASS}`)).length
+                ).toEqual(48);
+                expect(
+                    dom.queryAll(By.css(`${HelperTestFunctions.CALENDAR_ROW_CSSCLASS} > span`)).length +
+                    dom.queryAll(By.css(`${HelperTestFunctions.CALENDAR_ROW_CSSCLASS} > ${HelperTestFunctions.CALENDAR_WEEK_NUMBER_LABEL_CLASS}`)).length
+                ).toEqual(8);
+
+            });
+
+            it('Week numbers should appear as first column', () => {
+                const firstWeekOfTheYear = new Date(2020, 0, 5);
+                calendar.viewDate = firstWeekOfTheYear;
+                calendar.showWeekNumbers = true;
+                fixture.detectChanges();
+
+                const calendarRows = dom.queryAll(By.css(`${HelperTestFunctions.CALENDAR_ROW_CSSCLASS}`));
+
+                const maxWeeks = 52;
+                calendarRows.forEach((row, idx) => {
+                    const firstRowItem = row.nativeElement.children[0];
+                    idx === 0 ?
+                        expect(firstRowItem.firstChild.innerText).toEqual('Wk') :
+                        expect(firstRowItem.firstChild.innerText).toEqual((idx === 1 ? maxWeeks : idx - 1).toString());
+                });
+            });
+
             it('Calendar DOM structure - year view | month view', () => {
                 dom.queryAll(By.css(HelperTestFunctions.CALENDAR_DATE_CSSCLASS))[0].nativeElement.click();
                 fixture.detectChanges();

projects/igniteui-angular/src/lib/calendar/calendar.component.ts

@@ -150,6 +150,17 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
         this._monthsViewNumber = val;
     }
 
+    /**
+     * Show/hide week numbers
+     *
+     * @example
+     * ```html
+     * <igx-calendar [showWeekNumbers]="true"></igx-calendar>
+     * ``
+     */
+    @Input()
+    public showWeekNumbers = false;
+
     /**
      * Apply the different states for the transitions of animateChange
      * @hidden

projects/igniteui-angular/src/lib/calendar/calendar.ts

@@ -354,6 +354,14 @@ export class Calendar {
         return this.timedelta(date, TimeDeltaInterval.Year, -1);
     }
 
+    public getWeekNumber(date: Date) {
+        const firstJan = new Date(date.getFullYear(), 0, 1).getTime();
+        const today = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+        const dayInMilSeconds = 86400000;
+        const dayOfYear = ((today - firstJan + 1) / dayInMilSeconds);
+        return Math.ceil(dayOfYear / 7);
+    }
+
     private generateICalendarDate(date: Date, year: number, month: number): ICalendarDate {
         return {
             date,

projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.html

@@ -1,11 +1,20 @@
 <div class="igx-calendar__body-row">
+    <div *ngIf="showWeekNumbers" class="igx-calendar__label igx-calendar__label--week-number">
+        <span>Wk</span>
+    </div>
     <span *ngFor="let dayName of generateWeekHeader()" class="igx-calendar__label">
         {{ dayName | titlecase }}
     </span>
 </div>
 
 <div *ngFor="let week of getCalendarMonth; last as isLast; index as i; trackBy: rowTracker"
     class="igx-calendar__body-row">
+    <div class="igx-calendar__date igx-calendar__date--week-number" *ngIf="showWeekNumbers">
+        <span class="igx-calendar__date-content igx-calendar__date-content--week-number">
+            {{getWeekNumber(week[0].date)}}
+        </span>
+    </div>
+    <!-- <igx-week-number-item *ngIf="showWeekNumbers">{{getWeekNumber(week[0].date)}}</igx-week-number-item> -->
     <igx-day-item
         *ngFor="let day of week; trackBy: dateTracker"
         [date]="day"

projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts

@@ -54,6 +54,17 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do
     @Input()
     public changeDaysView = false;
 
+    /**
+     * Show/hide week numbers
+     *
+     * @example
+     * ```html
+     * <igx-days-view [showWeekNumbers]="true"></igx-days-view>
+     * ``
+     */
+    @Input()
+    public showWeekNumbers: boolean;
+
     /**
      * @hidden
      */
@@ -125,6 +136,15 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do
         }
     }
 
+    /**
+     * Returns the week number by date
+     *
+     * @hidden
+     */
+    public getWeekNumber(date): number {
+        return this.calendarModel.getWeekNumber(date);
+    }
+
     /**
      * Returns the locale representation of the date in the days view.
      *

projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss

@@ -45,6 +45,10 @@
         @extend %cal-value--label !optional;
     }
 
+    @include e(label, 'week-number') {
+        @extend %label--week-number !optional;
+    }
+
     @include e(date) {
         @extend %cal-value !optional;
 
@@ -54,6 +58,10 @@
         }
     }
 
+    @include e(date, 'week-number') {
+        @extend %cal-value-date--week-number !optional;
+    }
+
     @include e(date, 'inactive') {
         @extend %cal-value !optional;
         @extend %cal-value--inactive !optional;
@@ -143,6 +151,10 @@
         @extend %cal-value-content !optional;
     }
 
+    @include e(date-content, 'week-number') {
+        @extend %cal-value-content--week-number !optional;
+    }
+
     @include e(year) {
         @extend %cal-value !optional;
         @extend %cal-value--year !optional;