chore: update 'calendar' demo for nativescript-ui-calendar v6.1.0

Author: nsplugins

calendar/app/calendar/calendar-styles.service.ts

@@ -51,7 +51,6 @@ export class CalendarStylesService {
         dayCellStyle.eventFontName = this._preferredFontName;
         dayCellStyle.eventFontStyle = CalendarFontStyle.BoldItalic;
         dayCellStyle.eventTextSize = 8;
-        dayCellStyle.cellAlignment = CalendarCellAlignment.VerticalCenter;
         dayCellStyle.cellPaddingHorizontal = 10;
         dayCellStyle.cellPaddingVertical = 5;
         dayCellStyle.cellBackgroundColor = this._lightGreenColor;
@@ -63,12 +62,45 @@ export class CalendarStylesService {
         dayCellStyle.cellTextSize = 10;
         monthViewStyle.dayCellStyle = dayCellStyle;
 
+        const anotherMonthCellStyle = new DayCellStyle();
+        anotherMonthCellStyle.showEventsText = true;
+        anotherMonthCellStyle.eventTextColor = this._lightGrayColor;
+        anotherMonthCellStyle.eventFontName = this._preferredFontName;
+        anotherMonthCellStyle.eventFontStyle = CalendarFontStyle.BoldItalic;
+        anotherMonthCellStyle.eventTextSize = 8;
+        anotherMonthCellStyle.cellPaddingHorizontal = 10;
+        anotherMonthCellStyle.cellPaddingVertical = 5;
+        anotherMonthCellStyle.cellBackgroundColor = this._lightGreenColor;
+        anotherMonthCellStyle.cellBorderWidth = 1;
+        anotherMonthCellStyle.cellBorderColor = this._lightYellowColor;
+        anotherMonthCellStyle.cellTextColor = this._darkBrownColor;
+        anotherMonthCellStyle.cellTextFontName = this._preferredFontName;
+        anotherMonthCellStyle.cellTextFontStyle = CalendarFontStyle.Bold;
+        anotherMonthCellStyle.cellTextSize = 10;
+        monthViewStyle.anotherMonthCellStyle = anotherMonthCellStyle;
+
+        const disabledCellStyle = new DayCellStyle();
+        disabledCellStyle.showEventsText = true;
+        disabledCellStyle.eventTextColor = this._lightGrayColor;
+        disabledCellStyle.eventFontName = this._preferredFontName;
+        disabledCellStyle.eventFontStyle = CalendarFontStyle.BoldItalic;
+        disabledCellStyle.eventTextSize = 8;
+        disabledCellStyle.cellPaddingHorizontal = 10;
+        disabledCellStyle.cellPaddingVertical = 5;
+        disabledCellStyle.cellBackgroundColor = this._lightGrayColor;
+        disabledCellStyle.cellBorderWidth = 1;
+        disabledCellStyle.cellBorderColor = this._lightYellowColor;
+        disabledCellStyle.cellTextColor = this._darkBrownColor;
+        disabledCellStyle.cellTextFontName = this._preferredFontName;
+        disabledCellStyle.cellTextFontStyle = CalendarFontStyle.Bold;
+        disabledCellStyle.cellTextSize = 10;
+        monthViewStyle.disabledCellStyle = disabledCellStyle;
+
         const weekendCellStyle = new DayCellStyle();
         weekendCellStyle.eventTextColor = this._blueVioletColor;
         weekendCellStyle.eventFontName = this._preferredFontName;
         weekendCellStyle.eventFontStyle = CalendarFontStyle.BoldItalic;
         weekendCellStyle.eventTextSize = 8;
-        weekendCellStyle.cellAlignment = CalendarCellAlignment.VerticalCenter;
         weekendCellStyle.cellPaddingHorizontal = 10;
         weekendCellStyle.cellPaddingVertical = 5;
         weekendCellStyle.cellBackgroundColor = this._orangeColor;
@@ -85,7 +117,6 @@ export class CalendarStylesService {
         selectedCellStyle.eventFontName = this._preferredFontName;
         selectedCellStyle.eventFontStyle = CalendarFontStyle.Bold;
         selectedCellStyle.eventTextSize = 8;
-        selectedCellStyle.cellAlignment = CalendarCellAlignment.VerticalCenter;
         selectedCellStyle.cellPaddingHorizontal = 10;
         selectedCellStyle.cellPaddingVertical = 5;
         selectedCellStyle.cellBackgroundColor = this._lightBrownColor;

calendar/app/calendar/cell-styling/calendar-cell-styling.component.html

@@ -13,6 +13,7 @@
 <!-- >> angular-calendar-styling-html -->
 <GridLayout>
         <RadCalendar [monthViewStyle]="monthViewStyle" [weekViewStyle]="weekViewStyle" [monthNamesViewStyle]="monthNamesViewStyle"
-                [yearViewStyle]="yearViewStyle" [dayViewStyle]="dayViewStyle" [viewMode]="viewMode"></RadCalendar>
+                [yearViewStyle]="yearViewStyle" [dayViewStyle]="dayViewStyle" [viewMode]="viewMode"
+                [minDate]="minDate" [maxDate]="maxDate" selectionMode="Single"></RadCalendar>
 </GridLayout>
 <!-- << angular-calendar-styling-html -->

calendar/app/calendar/cell-styling/calendar-cell-styling.component.ts

@@ -69,6 +69,16 @@ export class CalendarCellStylingComponent extends OptionsExampleBase implements
         return this._dayViewStyle;
     }
 
+    get minDate(): Date {
+        // 80 days ago
+        return new Date(Date.now() - 1000 * 60 * 60 * 24 * 80);
+    }
+
+    get maxDate(): Date {
+        // in 10 days
+        return new Date(Date.now() + 1000 * 60 * 60 * 24 * 10);
+    }
+
     onYearTap() {
         this._viewMode = CalendarViewMode.Year;
     }

calendar/package.json

@@ -6,10 +6,10 @@
   "nativescript": {
     "id": "org.nativescript.demoangular",
     "tns-ios": {
-      "version": "6.2.0"
+      "version": "6.4.0"
     },
     "tns-android": {
-      "version": "6.2.0"
+      "version": "6.4.0"
     }
   },
   "dependencies": {
@@ -21,12 +21,12 @@
     "@angular/platform-browser": "~8.2.0",
     "@angular/platform-browser-dynamic": "~8.2.0",
     "@angular/router": "~8.2.0",
-    "nativescript-angular": "~8.20.0",
+    "nativescript-angular": "~8.21.0",
     "nativescript-theme-core": "~1.0.4",
     "nativescript-ui-calendar": "*",
     "reflect-metadata": "~0.1.10",
     "rxjs": "^6.4.0",
-    "tns-core-modules": "^6.2.0",
+    "tns-core-modules": "^6.4.0",
     "zone.js": "^0.9.1"
   },
   "devDependencies": {
@@ -49,8 +49,8 @@
     "mochawesome": "^3.1.1",
     "nativescript-css-loader": "~0.26.0",
     "nativescript-dev-appium": "^6.0.0",
-    "nativescript-dev-webpack": "^1.3.0",
-    "tns-platform-declarations": "^6.2.0",
+    "nativescript-dev-webpack": "^1.5.0",
+    "tns-platform-declarations": "^6.4.2",
     "tslint": "~5.11.0",
     "typescript": "~3.5.3"
   }