fix(calendar): header sizing and selecteddate bindings

package.json

@@ -31,7 +31,7 @@
     "@nativescript/plugin-tools": "5.5.3",
     "@nativescript/tailwind": "^2.1.0",
     "@nativescript/types": "~9.0.0",
-    "@nativescript/webpack": "5.0.31",
+    "@nativescript/webpack": "5.0.33",
     "@nativescript-community/ui-material-bottomsheet": "7.2.67",
     "@ngtools/webpack": "^19.0.0",
     "husky": "~9.0.0",

packages/nativescript-calendar/CHANGELOG.md

@@ -1,3 +1,40 @@
+## 1.0.5 (2026-04-03)
+
+### 🩹 Fixes
+
+- **calendar:** emit dayRender with the actual reusable cell view ([befd9c3](https://github.com/nstudio/nativescript-ui-kit/commit/befd9c3))
+
+### ❤️ Thank You
+
+- Nathan Walker
+
+## 1.0.4 (2026-04-03)
+
+### 🩹 Fixes
+
+- build and packaging with NativeClass
+
+## 1.0.3 (2026-04-02)
+
+### 🚀 Features
+
+- **calendar:** disabledDates and disabledWeekdays ([1f04c04](https://github.com/nstudio/nativescript-ui-kit/commit/1f04c04))
+
+### ❤️ Thank You
+
+- Nathan Walker
+
+## 1.0.2 (2026-04-02)
+
+### 🩹 Fixes
+
+- more robust selection and programmatic date handling ([0acad8c](https://github.com/nstudio/nativescript-ui-kit/commit/0acad8c))
+- **calendar:** header sizing and selecteddate bindings ([fe4aa74](https://github.com/nstudio/nativescript-ui-kit/commit/fe4aa74))
+
+### ❤️ Thank You
+
+- Nathan Walker
+
 # 1.0.0 (2026-03-01)
 
 ### 🚀 Features

packages/nativescript-calendar/common.ts

@@ -165,6 +165,8 @@ export abstract class NCalendarCommon extends View {
   selectedDayBackgroundColor: Color;
   selectedRangeColor: Color;
   weekendTextColor: Color;
+  disabledDates: Date[];
+  disabledWeekdays: number[];
   disabledDayTextColor: Color;
   outDateTextColor: Color;
   monthHeaderTextColor: Color;
@@ -204,6 +206,15 @@ export abstract class NCalendarCommon extends View {
     const t = normalizeDate(date).getTime();
     if (this.minDate && t < normalizeDate(this.minDate).getTime()) return true;
     if (this.maxDate && t > normalizeDate(this.maxDate).getTime()) return true;
+    if (this.disabledWeekdays && this.disabledWeekdays.length) {
+      if (this.disabledWeekdays.indexOf(date.getDay()) !== -1) return true;
+    }
+    if (this.disabledDates && this.disabledDates.length) {
+      const key = dateToKey(date);
+      for (const d of this.disabledDates) {
+        if (dateToKey(d) === key) return true;
+      }
+    }
     return false;
   }
 
@@ -361,8 +372,17 @@ export abstract class NCalendarCommon extends View {
   }
 
   selectDateRange(start: Date, end: Date): void {
-    this._rangeStart = normalizeDate(start);
-    this._rangeEnd = normalizeDate(end);
+    const normalizedStart = normalizeDate(start);
+    const normalizedEnd = normalizeDate(end);
+
+    if (normalizedStart.getTime() <= normalizedEnd.getTime()) {
+      this._rangeStart = normalizedStart;
+      this._rangeEnd = normalizedEnd;
+    } else {
+      this._rangeStart = normalizedEnd;
+      this._rangeEnd = normalizedStart;
+    }
+
     this._selectedKeys.clear();
     const cursor = new Date(this._rangeStart.getTime());
     while (cursor.getTime() <= this._rangeEnd.getTime()) {
@@ -371,6 +391,9 @@ export abstract class NCalendarCommon extends View {
     }
     this._syncSelectedDateRange();
     this._refreshAfterSelectionChange();
+
+    // Keep programmatic range selection behavior intuitive by navigating to the range start.
+    this.scrollToDate(this._rangeStart, false);
   }
 
   clearSelection(): void {
@@ -484,12 +507,39 @@ firstDayOfWeekProperty.register(NCalendarCommon);
 export const selectedDatesProperty = new Property<NCalendarCommon, Date[]>({
   name: 'selectedDates',
   defaultValue: [],
+  valueChanged: (target, _oldValue, newValue) => {
+    if (target._internalSelectionChange) return;
+    target._selectedKeys.clear();
+    if (newValue && newValue.length) {
+      for (const d of newValue) {
+        target._selectedKeys.add(target._toDateKey(d));
+      }
+    }
+  },
 });
 selectedDatesProperty.register(NCalendarCommon);
 
 export const selectedDateRangeProperty = new Property<NCalendarCommon, DateRange>({
   name: 'selectedDateRange',
   defaultValue: undefined,
+  valueChanged: (target, _oldValue, newValue) => {
+    if (target._internalSelectionChange) return;
+    if (newValue && newValue.start && newValue.end) {
+      target._rangeStart = newValue.start;
+      target._rangeEnd = newValue.end;
+      target._selectedKeys.clear();
+      const cursor = new Date(newValue.start.getTime());
+      const endTime = newValue.end.getTime();
+      while (cursor.getTime() <= endTime) {
+        target._selectedKeys.add(target._toDateKey(cursor));
+        cursor.setDate(cursor.getDate() + 1);
+      }
+    } else {
+      target._rangeStart = null;
+      target._rangeEnd = null;
+      target._selectedKeys.clear();
+    }
+  },
 });
 selectedDateRangeProperty.register(NCalendarCommon);
 
@@ -499,6 +549,18 @@ export const eventsProperty = new Property<NCalendarCommon, CalendarEvent[]>({
 });
 eventsProperty.register(NCalendarCommon);
 
+export const disabledDatesProperty = new Property<NCalendarCommon, Date[]>({
+  name: 'disabledDates',
+  defaultValue: [],
+});
+disabledDatesProperty.register(NCalendarCommon);
+
+export const disabledWeekdaysProperty = new Property<NCalendarCommon, number[]>({
+  name: 'disabledWeekdays',
+  defaultValue: [],
+});
+disabledWeekdaysProperty.register(NCalendarCommon);
+
 export const interMonthSpacingProperty = new Property<NCalendarCommon, number>({
   name: 'interMonthSpacing',
   defaultValue: 0,

packages/nativescript-calendar/index.android.ts

@@ -19,6 +19,8 @@ import {
   selectedDatesProperty,
   selectedDateRangeProperty,
   eventsProperty,
+  disabledDatesProperty,
+  disabledWeekdaysProperty,
   interMonthSpacingProperty,
   outDateStyleProperty,
   monthColumnsProperty,
@@ -786,7 +788,14 @@ export class NCalendar extends NCalendarCommon {
     const localDate = jsDateToLocalDate(date);
 
     if (this.displayMode === DisplayMode.Month) {
-      if (animated) {
+      if (this.orientation === Orientation.Horizontal && this.scrollPaged) {
+        const ym = java.time.YearMonth.of(date.getFullYear(), date.getMonth() + 1);
+        if (animated) {
+          this._calendarView.smoothScrollToMonth(ym);
+        } else {
+          this._calendarView.scrollToMonth(ym);
+        }
+      } else if (animated) {
         this._calendarView.smoothScrollToDate(localDate);
       } else {
         this._calendarView.scrollToDate(localDate);
@@ -870,19 +879,54 @@ export class NCalendar extends NCalendarCommon {
   [selectedDatesProperty.setNative](value: Date[]) {
     if (this._internalSelectionChange) return;
     this._selectedKeys.clear();
+    const normalizedDates: Date[] = [];
     if (value && value.length) {
       for (const d of value) {
-        this._selectedKeys.add(this._toDateKey(d));
+        const normalized = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+        normalizedDates.push(normalized);
+        this._selectedKeys.add(this._toDateKey(normalized));
+      }
+    }
+
+    if (this.selectionMode === SelectionMode.Range) {
+      normalizedDates.sort((a, b) => a.getTime() - b.getTime());
+      if (normalizedDates.length) {
+        this._rangeStart = normalizedDates[0];
+        this._rangeEnd = normalizedDates[normalizedDates.length - 1];
+        this._selectedKeys.clear();
+        const cursor = new Date(this._rangeStart.getTime());
+        while (cursor.getTime() <= this._rangeEnd.getTime()) {
+          this._selectedKeys.add(this._toDateKey(cursor));
+          cursor.setDate(cursor.getDate() + 1);
+        }
+      } else {
+        this._rangeStart = null;
+        this._rangeEnd = null;
       }
+      this._internalSelectionChange = true;
+      this._syncSelectedDateRange();
+      this._internalSelectionChange = false;
     }
+
     this._refreshCalendar();
+
+    if (normalizedDates.length) {
+      this.scrollToDate(normalizedDates[0], false);
+    }
   }
 
   [selectedDateRangeProperty.setNative](value: any) {
     if (this._internalSelectionChange) return;
     if (value && value.start && value.end) {
-      this._rangeStart = value.start;
-      this._rangeEnd = value.end;
+      const start = new Date(value.start.getFullYear(), value.start.getMonth(), value.start.getDate());
+      const end = new Date(value.end.getFullYear(), value.end.getMonth(), value.end.getDate());
+      if (start.getTime() <= end.getTime()) {
+        this._rangeStart = start;
+        this._rangeEnd = end;
+      } else {
+        this._rangeStart = end;
+        this._rangeEnd = start;
+      }
       this._selectedKeys.clear();
       const cursor = new Date(this._rangeStart.getTime());
       while (cursor.getTime() <= this._rangeEnd.getTime()) {
@@ -895,11 +939,21 @@ export class NCalendar extends NCalendarCommon {
       this._selectedKeys.clear();
     }
     this._refreshCalendar();
+
+    if (this._rangeStart) {
+      this.scrollToDate(this._rangeStart, false);
+    }
   }
 
   [eventsProperty.setNative](_value: any) {
     this._refreshCalendar();
   }
+  [disabledDatesProperty.setNative](_value: any) {
+    this._refreshCalendar();
+  }
+  [disabledWeekdaysProperty.setNative](_value: any) {
+    this._refreshCalendar();
+  }
   [interMonthSpacingProperty.setNative](_value: number) {
     this._swapCalendarView();
   }

packages/nativescript-calendar/index.d.ts

@@ -137,6 +137,10 @@ export class NCalendar extends View {
   outDateStyle: OutDateStyle;
   monthColumns: number;
 
+  // Disabled dates
+  disabledDates: Date[];
+  disabledWeekdays: number[];
+
   // Style
   dayTextColor: Color;
   dayFontSize: number;