update demo

projects/demo/src/app/demos/demo-basic/demo-basic.component.html

@@ -173,10 +173,10 @@ <h3 style="text-align: center;">IonCalendar Options</h3>
           </ion-checkbox>
         </ion-item>
         <ion-item>
-          <ion-checkbox [(ngModel)]="optModel.showMonthSubtitle"
-                        (ngModelChange)="onChangeShowMonthSubtitle($event)"
+          <ion-checkbox [(ngModel)]="optModel.showMonthAdjacentDays"
+                        (ngModelChange)="onChangeShowMonthAdjacentDays($event)"
                         [disabled]="optModel.displayMode !== 'week'">
-            showMonthSubtitle
+            showMonthAdjacentDays
           </ion-checkbox>
         </ion-item>
         <ion-item>

projects/demo/src/app/demos/demo-basic/demo-basic.component.ts

@@ -223,7 +223,7 @@ export class DemoBasicComponent {
   onChangeShowYearPicker(showYearPicker: boolean) {
     this.options = {
       ...this.options,
-      showYearPicker,
+      showYearPicker
     };
   }
 

projects/demo/src/app/demos/demo-modal-range-backwards/demo-modal-range-backwards.component.html

@@ -1,3 +1,3 @@
-<ion-button (click)="openCalendar()" color="medium">
-  Range can backwards
+<ion-button (click)="openCalendar()" color="secondary">
+  Range - can backwards
 </ion-button>

projects/demo/src/app/demos/demo-modal-range-backwards/demo-modal-range-backwards.component.ts

@@ -15,7 +15,7 @@ export class DemoModalRangeBackwardsComponent  {
     to: Date;
   } = {
     from: new Date(),
-    to: new Date(Date.now() + 24 * 60 * 60 * 1000 * 5),
+    to: new Date(Date.now() + 24 * 60 * 60 * 1000 * 5), //+ 5 dias no futuro
   };
 
   constructor(public modalCtrl: ModalController) {}
@@ -25,8 +25,9 @@ export class DemoModalRangeBackwardsComponent  {
       pickMode: 'range',
       title: 'RANGE - BACKWARDS',
       defaultDateRange: this.dateRange,
+      clearLabel: 'CLEAR',
       canBackwardsSelected: true,
-      color: "medium",
+      color: "secondary",
     };
 
     const myCalendar = await this.modalCtrl.create({

projects/demo/src/app/demos/demo-modal-range-noend-date/demo-modal-range-noend-date.component.html

@@ -0,0 +1,3 @@
+<ion-button (click)="openCalendar()" color="medium">
+  Range - no defined end date
+</ion-button>

projects/demo/src/app/demos/demo-modal-range-end-date/demo-modal-range-end-date.component.spec.ts → projects/demo/src/app/demos/demo-modal-range-noend-date/demo-modal-range-noend-date.component.spec.ts

@@ -1,19 +1,19 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { IonicModule } from '@ionic/angular';
 
-import { DemoModalRangeEndDateComponent } from './demo-modal-range-end-date.component';
+import { DemoModalRangeNoEndDateComponent } from './demo-modal-range-noend-date.component';
 
 describe('DemoModalRangeEndDateComponent', () => {
-  let component: DemoModalRangeEndDateComponent;
-  let fixture: ComponentFixture<DemoModalRangeEndDateComponent>;
+  let component: DemoModalRangeNoEndDateComponent;
+  let fixture: ComponentFixture<DemoModalRangeNoEndDateComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ DemoModalRangeEndDateComponent ],
+      declarations: [ DemoModalRangeNoEndDateComponent ],
       imports: [IonicModule.forRoot()]
     }).compileComponents();
 
-    fixture = TestBed.createComponent(DemoModalRangeEndDateComponent);
+    fixture = TestBed.createComponent(DemoModalRangeNoEndDateComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   }));

projects/demo/src/app/demos/demo-modal-range-end-date/demo-modal-range-end-date.component.ts → projects/demo/src/app/demos/demo-modal-range-noend-date/demo-modal-range-noend-date.component.ts

@@ -4,11 +4,11 @@ import { ModalController } from '@ionic/angular';
 import { CalendarModalComponent, ICalendarModalOptions } from '@heliomarpm/ion-calendar';
 
 @Component({
-  selector: 'app-demo-modal-range-end-date',
-  templateUrl: './demo-modal-range-end-date.component.html',
-  styleUrls: ['./demo-modal-range-end-date.component.scss'],
+  selector: 'app-demo-modal-range-noend-date',
+  templateUrl: './demo-modal-range-noend-date.component.html',
+  styleUrls: ['./demo-modal-range-noend-date.component.scss'],
 })
-export class DemoModalRangeEndDateComponent {
+export class DemoModalRangeNoEndDateComponent {
   dateRange: {
     from: Date;
   } = {
@@ -20,9 +20,9 @@ export class DemoModalRangeEndDateComponent {
   async openCalendar() {
     const options: ICalendarModalOptions = {
       pickMode: 'range',
-      title: 'RANGE - END DATE',
+      title: 'RANGE - NO DEFINED END DATE',
       defaultDateRange: this.dateRange,
-      color: "secondary"
+      color: "medium"
     };
 
     const myCalendar = await this.modalCtrl.create({

projects/demo/src/app/demos/demo-modal-range/demo-modal-range.component.html

@@ -1,3 +1,3 @@
 <ion-button (click)="openCalendar()" color="dark">
-  Range
+  Range - defined end date
 </ion-button>

projects/demo/src/app/demos/demo-modal-range/demo-modal-range.component.ts

@@ -14,15 +14,15 @@ export class DemoModalRangeComponent {
     to: Date;
   } = {
       from: new Date(),
-      to: new Date(Date.now() + 24 * 60 * 60 * 1000 * 5),
+      to: new Date(Date.now() + 24 * 60 * 60 * 1000 * 5), //+ 5 dias no futuro
     };
 
   constructor(public modalCtrl: ModalController) { }
 
   async openCalendar() {
     const options: ICalendarModalOptions = {
       pickMode: 'range',
-      title: 'RANGE',
+      title: 'RANGE - DEFINED END DATE',
       defaultDateRange: this.dateRange,
       clearLabel: 'CLEAR',
       color: 'dark'

projects/demo/src/app/demos/demos.module.ts

@@ -16,7 +16,7 @@ import { DemoModalLocaleComponent } from './demo-modal-locale/demo-modal-locale.
 import { DemoModalMultiComponent } from './demo-modal-multi/demo-modal-multi.component';
 import { DemoModalRangeComponent } from './demo-modal-range/demo-modal-range.component';
 import { DemoModalRangeBackwardsComponent } from './demo-modal-range-backwards/demo-modal-range-backwards.component';
-import { DemoModalRangeEndDateComponent } from './demo-modal-range-end-date/demo-modal-range-end-date.component';
+import { DemoModalRangeNoEndDateComponent } from './demo-modal-range-noend-date/demo-modal-range-noend-date.component';
 
 import { PipesModule } from '../pipes/pipes.module';
 
@@ -33,7 +33,7 @@ const COMPONENTS = [
   DemoModalMultiComponent,
   DemoModalRangeComponent,
   DemoModalRangeBackwardsComponent,
-  DemoModalRangeEndDateComponent,
+  DemoModalRangeNoEndDateComponent,
 ];
 
 

projects/ion-calendar/src/lib/components/calendar-modal/calendar-modal.component.ts

@@ -17,7 +17,7 @@ const NUM_OF_MONTHS_TO_CREATE = 3;
 })
 export class CalendarModalComponent implements OnInit, AfterViewInit {
   def!: ICalendarModalOptions;
-  datesTemp: Array<ICalendarDay | null> = [null, null];
+  datesTemp: Array<ICalendarDay | null> = [null];
   calendarMonths!: Array<ICalendarMonth>;
   // private step!: number;
   private showYearPicker!: boolean;
@@ -120,7 +120,7 @@ export class CalendarModalComponent implements OnInit, AfterViewInit {
     }
   }
 
-  protected onChange(data: any): void {
+  protected onChange(data: ICalendarDay[]): void {
     const { pickMode, autoDone } = this.def;
 
     this.datesTemp = data;
@@ -151,11 +151,11 @@ export class CalendarModalComponent implements OnInit, AfterViewInit {
 
     switch (pickMode) {
       case pickModes.single:
-        return !!(this.datesTemp[0] && this.datesTemp[0].time);
+        return !!this.datesTemp[0]?.time;
       case pickModes.range:
-        return !!(this.datesTemp[0] && this.datesTemp[1]) && !!(this.datesTemp[0].time && this.datesTemp[1].time);
+        return !!(this.datesTemp[0]?.time && this.datesTemp[1]?.time);
       case pickModes.multi:
-        return this.datesTemp.length > 0 && this.datesTemp.every(e => !!e && !!e.time);
+        return this.datesTemp.length > 0 && this.datesTemp.every(e => !!e?.time);
       default:
         return false;
     }

projects/ion-calendar/src/lib/components/calendar-month/calendar-month.component.ts

@@ -75,7 +75,7 @@ export class CalendarMonthComponent implements ControlValueAccessor, AfterViewIn
   isEndSelection(day: ICalendarDay): boolean {
     if (!day) { return false; }
 
-    if (this.pickMode !== pickModes.range || !this._isInit || this._date[1] === null) {
+    if (this.pickMode !== pickModes.range || !this._isInit || !this._date[1]) {
       return false;
     }
 
@@ -93,7 +93,7 @@ export class CalendarMonthComponent implements ControlValueAccessor, AfterViewIn
       return false;
     }
 
-    if (this._date[0] === null || this._date[1] === null) {
+    if (!this._date[0] || !this._date[1]) {
       return false;
     }
 
@@ -105,11 +105,11 @@ export class CalendarMonthComponent implements ControlValueAccessor, AfterViewIn
 
   isStartSelection(day: ICalendarDay): boolean {
     if (!day) { return false; }
-    if (this.pickMode !== pickModes.range || !this._isInit || this._date[0] === null) {
+    if (this.pickMode !== pickModes.range || !this._isInit || !this._date[0]) {
       return false;
     }
 
-    return this._date[0].time === day.time && this._date[1] !== null;
+    return this._date[0].time === day.time && !!this._date[1];
   }
 
   isSelected(time: number): boolean {
@@ -135,51 +135,64 @@ export class CalendarMonthComponent implements ControlValueAccessor, AfterViewIn
     item.selected = true;
     this.onSelect.emit(item);
 
-    if (this.pickMode === pickModes.single) {
-      this._date[0] = item;
-      this.onChange.emit(this._date as ICalendarDay[]);
-      return;
+    switch (this.pickMode) {
+      case pickModes.range:
+        this.handleSelectedRangeMode(item);
+        break;
+      case pickModes.multi:
+        this.handleSelectedMultiMode(item);
+        break;
+      case pickModes.single:
+      default:
+        this.handleSelectedSingleMode(item);
+        break;
     }
 
-    if (this.pickMode === pickModes.range) {
-      if (this._date[0] === null) {
-        this._date[0] = item;
-        this.onSelectStart.emit(item);
-      } else if (this._date[1] === null) {
-        if (this._date[0].time < item.time) {
-          this._date[1] = item;
-          this.onSelectEnd.emit(item);
-        } else {
-          this._date[1] = this._date[0];
-          this.onSelectEnd.emit(this._date[0]);
-          this._date[0] = item;
-          this.onSelectStart.emit(item);
-        }
-      } else if (this._date[0].time > item.time) {
-        this._date[0] = item;
-        this.onSelectStart.emit(item);
-      } else if (this._date[1].time < item.time) {
+  }
+
+  private handleSelectedSingleMode(item: ICalendarDay): void {
+    this._date[0] = item;
+    this.onChange.emit(this._date as ICalendarDay[]);
+  }
+
+  private handleSelectedRangeMode(item: ICalendarDay): void {
+    if (!this._date[0]) {
+      this._date[0] = item;
+      this.onSelectStart.emit(item);
+    } else if (!this._date[1]) {
+      if (this._date[0].time < item.time) {
         this._date[1] = item;
         this.onSelectEnd.emit(item);
       } else {
+        this._date[1] = this._date[0];
+        this.onSelectEnd.emit(this._date[0]);
         this._date[0] = item;
         this.onSelectStart.emit(item);
-        this._date[1] = null;
       }
-
-      this.onChange.emit(this._date as ICalendarDay[]);
-      return;
+    } else if (this._date[0].time > item.time) {
+      this._date[0] = item;
+      this.onSelectStart.emit(item);
+    } else if (this._date[1].time < item.time) {
+      this._date[1] = item;
+      this.onSelectEnd.emit(item);
+    } else {
+      this._date[0] = item;
+      this.onSelectStart.emit(item);
+      this._date[1] = null;
     }
 
-    if (this.pickMode === pickModes.multi) {
-      const index = this._date.findIndex(e => e !== null && e.time === item.time);
+    this.onChange.emit(this._date as ICalendarDay[]);
+  }
 
-      if (index === -1) {
-        this._date.push(item);
-      } else {
-        this._date.splice(index, 1);
-      }
-      this.onChange.emit(this._date.filter(e => e !== null) as ICalendarDay[]);
+  private handleSelectedMultiMode(item: ICalendarDay): void {
+    const index = this._date.findIndex(e => !!e && e.time === item.time);
+
+    if (index === -1) {
+      this._date.push(item);
+    } else {
+      this._date.splice(index, 1);
     }
+
+    this.onChange.emit(this._date.filter(e => !!e) as ICalendarDay[]);
   }
 }