refactor(calendar): implement improved design and functionallity (#13650)

Author: desig9stein

CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 17.2.0
+### New Features
+- `IgxCalendar`
+    - Completely revamped calendar themes.
+    - New years view.
+    - Updated months view.
+    - Updated keyboard navigation and accessibility.
+    - Added selection preview in range selection mode.
+    - Added the ability to change the orientation of the calendar when multiple day views are present.
+    - Replaced the `vertical` property with `orientation` that can be set to either `horizontal`(default) or `vertical`.
+    - Standalone views support full-blown keyboard navigation, accessibility improvements and the ability to change pages automatically on keyboard navigation.
+    - Standalone views now emit `pageChanged` event whenever the active view page changes.
+
 ## 17.1.0
 ### New Features
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`

package-lock.json

@@ -61,16 +61,16 @@
     "@angular/compiler": "^17.2.1",
     "@angular/core": "^17.2.1",
     "@angular/forms": "^17.2.1",
-    "@angular/platform-browser-dynamic": "^17.2.1",
     "@angular/platform-browser": "^17.2.1",
+    "@angular/platform-browser-dynamic": "^17.2.1",
     "@angular/platform-server": "^17.2.1",
     "@angular/router": "^17.2.1",
     "@angular/ssr": "^17.2.0",
     "@igniteui/material-icons-extended": "^3.0.0",
     "@types/source-map": "0.5.2",
     "express": "^4.19.2",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^5.0.1",
+    "igniteui-theming": "^6.0.1",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.0",
@@ -82,8 +82,8 @@
     "@angular-devkit/build-angular": "^17.2.0",
     "@angular-devkit/schematics": "^17.2.0",
     "@angular-eslint/builder": "^17.2.1",
-    "@angular-eslint/eslint-plugin-template": "^17.2.1",
     "@angular-eslint/eslint-plugin": "^17.2.1",
+    "@angular-eslint/eslint-plugin-template": "^17.2.1",
     "@angular-eslint/schematics": "^17.2.1",
     "@angular-eslint/template-parser": "^17.2.1",
     "@angular/cli": "^17.2.0",
@@ -105,39 +105,39 @@
     "eslint": "^8.53.0",
     "fs-extra": "^11.1.1",
     "globby": "^13.2.2",
+    "gulp": "^4.0.2",
     "gulp-cached": "^1.1.1",
     "gulp-concat": "^2.6.1",
     "gulp-shell": "^0.6.5",
     "gulp-typescript": "^5.0.1",
     "gulp-uglify": "^3.0.1",
-    "gulp": "^4.0.2",
     "hammer-simulator": "0.0.1",
     "hammerjs": "^2.0.8",
     "ig-typedoc-theme": "^5.0.3",
     "igniteui-sassdoc-theme": "^1.2.3",
     "igniteui-webcomponents": "^4.7.0",
-    "jasmine-core": "~5.1.2",
     "jasmine": "^5.1.0",
+    "jasmine-core": "~5.1.2",
+    "karma": "^6.4.2",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "^2.0.3",
     "karma-jasmine": "~5.1.0",
     "karma-junit-reporter": "^2.0.1",
     "karma-parallel": "^0.3.1",
     "karma-spec-reporter": "^0.0.36",
-    "karma": "^6.4.2",
     "ng-packagr": "^17.2.0",
-    "postcss-scss": "^4.0.6",
     "postcss": "^8.4.31",
+    "postcss-scss": "^4.0.6",
     "puppeteer": "^22.1.0",
     "sass-embedded": "^1.69.1",
     "sass-true": "^6.0.1",
-    "sassdoc-plugin-localization": "^1.4.3",
     "sassdoc": "^2.7.4",
-    "stylelint-scss": "^4.1.0",
+    "sassdoc-plugin-localization": "^1.4.3",
     "stylelint": "^15.1.0",
+    "stylelint-scss": "^4.1.0",
     "ts-node": "^10.8.1",
-    "typedoc-plugin-localization": "^3.0.4",
     "typedoc": "^0.25.3",
+    "typedoc-plugin-localization": "^3.0.4",
     "typescript": "5.2.2"
   }
 }

package.json

@@ -4,10 +4,18 @@ import { ICalendarResourceStrings } from 'igniteui-angular';
 const CalendarResourceStringsBG_: ExpandRequire<ICalendarResourceStrings> = {
     igx_calendar_previous_month: 'Предходен месец',
     igx_calendar_next_month: 'Следващ месец',
+    igx_calendar_previous_year: 'Предходна година',
+    igx_calendar_next_year: 'Следваща година',
+    igx_calendar_previous_years: 'Предходни {0} години',
+    igx_calendar_next_years: 'Следващи {0} години',
+    igx_calendar_select_date: 'Избор на дата',
     igx_calendar_select_month: 'Избор на месец',
     igx_calendar_select_year: 'Избор на година',
     igx_calendar_range_start: 'Начало на диапазона',
     igx_calendar_range_end: 'Край на диапазона',
+    igx_calendar_range_label_start: 'Начало',
+    igx_calendar_range_label_end: 'Край',
+    igx_calendar_range_placeholder: 'Избери диапазон',
     igx_calendar_selected_month_is: 'Избраният месец е ',
     igx_calendar_first_picker_of: 'Първия селектор от {0} започва от',
     igx_calendar_multi_selection: 'Календар с множествен избор с {0} избирачи на дати',

projects/igniteui-angular-i18n/src/i18n/BG/calendar-resources.ts

@@ -4,10 +4,18 @@ import { ICalendarResourceStrings } from 'igniteui-angular';
 const CalendarResourceStringsCS_: ExpandRequire<ICalendarResourceStrings> = {
     igx_calendar_previous_month: 'Předchozí měsíc',
     igx_calendar_next_month: 'Příští měsíc',
+    igx_calendar_previous_year: 'Previous Year',
+    igx_calendar_next_year: 'Next Year',
+    igx_calendar_previous_years: 'Previous {0} Years',
+    igx_calendar_next_years: 'Next {0} Years',
+    igx_calendar_select_date: 'Select Date',
     igx_calendar_select_month: 'Vyberte měsíc',
     igx_calendar_select_year: 'Vyberte rok',
     igx_calendar_range_start: 'Začátek dosahu',
     igx_calendar_range_end: 'Konec rozsahu',
+    igx_calendar_range_label_start: 'Start',
+    igx_calendar_range_label_end: 'End',
+    igx_calendar_range_placeholder: 'Select Range',
     igx_calendar_selected_month_is: 'Vybraný měsíc je ',
     igx_calendar_first_picker_of: 'První výběr z {0} začíná od',
     igx_calendar_multi_selection: 'Kalendář s více výběry s {0} nástroji pro výběr data',

projects/igniteui-angular-i18n/src/i18n/CS/calendar-resources.ts

@@ -4,10 +4,18 @@ import { ICalendarResourceStrings } from 'igniteui-angular';
 const CalendarResourceStringsDA_: ExpandRequire<ICalendarResourceStrings> = {
     igx_calendar_previous_month: 'Forrige måned',
     igx_calendar_next_month: 'Næste måned',
+    igx_calendar_previous_year: 'Previous Year',
+    igx_calendar_next_year: 'Next Year',
+    igx_calendar_previous_years: 'Previous {0} Years',
+    igx_calendar_next_years: 'Next {0} Years',
+    igx_calendar_select_date: 'Select Date',
     igx_calendar_select_month: 'Vælg måned',
     igx_calendar_select_year: 'Vælg år',
     igx_calendar_range_start: 'Interval start',
     igx_calendar_range_end: 'Interval slut',
+    igx_calendar_range_label_start: 'Start',
+    igx_calendar_range_label_end: 'End',
+    igx_calendar_range_placeholder: 'Select Range',
     igx_calendar_selected_month_is: 'Den valgte måned er ',
     igx_calendar_first_picker_of: 'Første vælger af {0} starter fra',
     igx_calendar_multi_selection: 'Kalender med flere markeringer med {0} datovælgere',

projects/igniteui-angular-i18n/src/i18n/DA/calendar-resources.ts

@@ -4,10 +4,18 @@ import { ICalendarResourceStrings } from 'igniteui-angular';
 const CalendarResourceStringsDE_: ExpandRequire<ICalendarResourceStrings> = {
     igx_calendar_previous_month: 'Vorheriger Monat',
     igx_calendar_next_month: 'Nächster Monat',
+    igx_calendar_previous_year: 'Previous Year',
+    igx_calendar_next_year: 'Next Year',
+    igx_calendar_previous_years: 'Previous {0} Years',
+    igx_calendar_next_years: 'Next {0} Years',
+    igx_calendar_select_date: 'Select Date',
     igx_calendar_select_month: 'Wähle Monat',
     igx_calendar_select_year: 'Wähle Jahr',
     igx_calendar_range_start: 'Datumsperiode Anfang',
     igx_calendar_range_end: 'Datumsperiode Ende',
+    igx_calendar_range_label_start: 'Start',
+    igx_calendar_range_label_end: 'End',
+    igx_calendar_range_placeholder: 'Select Range',
     igx_calendar_selected_month_is: 'Der ausgewählter Monat ist ',
     igx_calendar_first_picker_of: 'Die erste Auswahl von {0} beginnt am',
     igx_calendar_multi_selection: 'Mehrfachauswahl-Kalender mit {0} Datumswählern',

projects/igniteui-angular-i18n/src/i18n/DE/calendar-resources.ts

@@ -4,10 +4,18 @@ import { ICalendarResourceStrings } from 'igniteui-angular';
 const CalendarResourceStringsES_: ExpandRequire<ICalendarResourceStrings> = {
     igx_calendar_previous_month: 'Mes anterior',
     igx_calendar_next_month: 'Mes siguiente',
+    igx_calendar_previous_year: 'Previous Year',
+    igx_calendar_next_year: 'Next Year',
+    igx_calendar_previous_years: 'Previous {0} Years',
+    igx_calendar_next_years: 'Next {0} Years',
+    igx_calendar_select_date: 'Select Date',
     igx_calendar_select_month: 'Seleccionar mes',
     igx_calendar_select_year: 'Seleccionar año',
     igx_calendar_range_start: 'Inicio de rango',
     igx_calendar_range_end: 'Fin de rango',
+    igx_calendar_range_label_start: 'Start',
+    igx_calendar_range_label_end: 'End',
+    igx_calendar_range_placeholder: 'Select Range',
     igx_calendar_selected_month_is: 'El mes seleccionado es ',
     igx_calendar_first_picker_of: 'El primer selector de {0} comienza en',
     igx_calendar_multi_selection: 'Calendario de selección múltiple con {0} selectores de fechas',

projects/igniteui-angular-i18n/src/i18n/ES/calendar-resources.ts

@@ -4,10 +4,18 @@ import { ICalendarResourceStrings } from 'igniteui-angular';
 const CalendarResourceStringsFR_: ExpandRequire<ICalendarResourceStrings> = {
     igx_calendar_previous_month: 'Le mois dernier',
     igx_calendar_next_month: 'Le mois prochain',
+    igx_calendar_previous_year: 'Previous Year',
+    igx_calendar_next_year: 'Next Year',
+    igx_calendar_previous_years: 'Previous {0} Years',
+    igx_calendar_next_years: 'Next {0} Years',
+    igx_calendar_select_date: 'Select Date',
     igx_calendar_select_month: 'Sélectionner un mois',
     igx_calendar_select_year: 'Sélectionner une année',
     igx_calendar_range_start: 'Début de l\'intervalle',
     igx_calendar_range_end: 'Fin de l\'intervalle',
+    igx_calendar_range_label_start: 'Start',
+    igx_calendar_range_label_end: 'End',
+    igx_calendar_range_placeholder: 'Select Range',
     igx_calendar_selected_month_is: 'Le mois sélectionné est ',
     igx_calendar_first_picker_of: 'Le premier sélecteur de {0} commence à partir de',
     igx_calendar_multi_selection: 'Calendrier à sélection multiple avec {0} sélecteurs de dates',

projects/igniteui-angular-i18n/src/i18n/FR/calendar-resources.ts

@@ -4,10 +4,18 @@ import { ICalendarResourceStrings } from 'igniteui-angular';
 const CalendarResourceStringsHU_: ExpandRequire<ICalendarResourceStrings> = {
     igx_calendar_previous_month: 'Előző hónap',
     igx_calendar_next_month: 'Következő hónap',
+    igx_calendar_previous_year: 'Previous Year',
+    igx_calendar_next_year: 'Next Year',
+    igx_calendar_previous_years: 'Previous {0} Years',
+    igx_calendar_next_years: 'Next {0} Years',
+    igx_calendar_select_date: 'Select Date',
     igx_calendar_select_month: 'Hónap kiválasztása',
     igx_calendar_select_year: 'Év kiválasztása',
     igx_calendar_range_start: 'Tartomány kezdete',
     igx_calendar_range_end: 'Tartomány vége',
+    igx_calendar_range_label_start: 'Start',
+    igx_calendar_range_label_end: 'End',
+    igx_calendar_range_placeholder: 'Select Range',
     igx_calendar_selected_month_is: 'A kiválasztott hónap ',
     igx_calendar_first_picker_of: 'A(z) {0} első választója innen indul:',
     igx_calendar_multi_selection: 'Többszörös időpontválasztó naptár {0} dátumválasztóval',