From 220608708e41c86204bdf24b80374d167249b818 Mon Sep 17 00:00:00 2001
From: Prasanth-Boyina <139340256+Prasanth-Boyina@users.noreply.github.com>
Date: Fri, 12 Apr 2024 08:33:51 +0530
Subject: [PATCH] Range selection in calendar (#1034)

* Enhancement(`ngx-calendar`): Supports selecting a range of dates with hours and minutes
---
 projects/swimlane/ngx-ui/CHANGELOG.md         |   2 +
 .../calendar/calendar-select.enum.ts          |   4 +
 .../calendar/calendar.component.html          | 138 ++++++++++-
 .../calendar/calendar.component.scss          | 221 +++++++++++++++++-
 .../components/calendar/calendar.component.ts | 155 ++++++++++++
 .../components/calendar/calendar.module.ts    |   5 +-
 .../calendar/calender.component.spec.ts       | 109 +++++++++
 .../calendar-page.component.html              | 210 ++++++++++-------
 .../calendar-page/calendar-page.component.ts  |   4 +
 9 files changed, 754 insertions(+), 94 deletions(-)
 create mode 100644 projects/swimlane/ngx-ui/src/lib/components/calendar/calendar-select.enum.ts

diff --git a/projects/swimlane/ngx-ui/CHANGELOG.md b/projects/swimlane/ngx-ui/CHANGELOG.md
index 90d7b6af3..9e5069fe3 100644
--- a/projects/swimlane/ngx-ui/CHANGELOG.md
+++ b/projects/swimlane/ngx-ui/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## HEAD (unreleased)
 
+- Enhancement(`ngx-calendar`): Supports selecting a range of dates with hours and minutes
+
 ## 47.0.0 (2023-02-12)
 
 - Breaking: Angular 17 support
diff --git a/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar-select.enum.ts b/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar-select.enum.ts
new file mode 100644
index 000000000..576de206d
--- /dev/null
+++ b/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar-select.enum.ts
@@ -0,0 +1,4 @@
+export enum CalendarSelect {
+  Single = 'single',
+  Range = 'range'
+}
diff --git a/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.component.html b/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.component.html
index 96b68dd08..8afea0c14 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.component.html
+++ b/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.component.html
@@ -2,14 +2,28 @@
   <div class="text-center" [ngSwitch]="currentView">
     <div *ngSwitchCase="CalendarView.Date">
       <div class="title-row">
-        <button type="button" tabindex="0" class="prev-month" [disabled]="disabled" title="Previous Month" (click)="prevMonth()">
+        <button
+          type="button"
+          tabindex="0"
+          class="prev-month"
+          [disabled]="disabled"
+          title="Previous Month"
+          (click)="prevMonth()"
+        >
           <span class="ngx-icon ngx-arrow-left"></span>
         </button>
         <button type="button" class="title" tabindex="0" (click)="changeViews()">
           {{ focusDate | amTimeZone: timezone | amDateFormat: 'MMMM YYYY' }}
         </button>
-        <button type="button" tabindex="0" class="next-month" title="Next Month" [disabled]="disabled" (click)="nextMonth()">
-          <span class="ngx-icon  ngx-arrow-right"></span>
+        <button
+          type="button"
+          tabindex="0"
+          class="next-month"
+          title="Next Month"
+          [disabled]="disabled"
+          (click)="nextMonth()"
+        >
+          <span class="ngx-icon ngx-arrow-right"></span>
         </button>
       </div>
       <div class="day-name-row">
@@ -17,7 +31,7 @@
           {{ d }}
         </div>
       </div>
-      <table class="day-container" role="grid">
+      <table class="day-container" role="grid" *ngIf="selectType === CalendarSelect.Single">
         <tr *ngFor="let week of weeks" class="day-row" role="row">
           <td *ngFor="let day of week" class="day-cell text-center" role="gridcell">
             <button
@@ -39,6 +53,30 @@
           </td>
         </tr>
       </table>
+      <table class="day-container" role="grid" *ngIf="selectType === CalendarSelect.Range">
+        <tr *ngFor="let week of weeks" class="day-row" role="row">
+          <td *ngFor="let day of week" class="day-cell2 text-center" role="gridcell">
+            <button
+              *ngIf="day.num"
+              class="day2"
+              type="button"
+              (focus)="onDayFocus(day)"
+              [title]="day.date | amTimeZone: timezone | amDateFormat: 'LL'"
+              [class.active]="isRangeStartActive(day.date)"
+              [class.extreme1]="isDayRangeStart(day.date)"
+              [class.extreme2]="isDayRangeEnd(day.date)"
+              [class.focus]="!disabled && isDayFocus(day.date) && !isDisabled(day.date, 'day')"
+              [class.range]="isDayInRange(day.date)"
+              [attr.tabindex]="!disabled && isDayFocus(day.date) && !isDisabled(day.date, 'day') ? 0 : -1"
+              [ngClass]="day.classes"
+              [disabled]="isDisabled(day.date, 'day')"
+              (click)="onDaySelectRange(day)"
+            >
+              <span class="day-num">{{ day.num }}</span>
+            </button>
+          </td>
+        </tr>
+      </table>
     </div>
 
     <div *ngSwitchCase="CalendarView.Month">
@@ -68,7 +106,7 @@
               (keydown)="onMonthDown($event)"
             >
               {{ month }}
-            </button>            
+            </button>
           </td>
         </tr>
       </table>
@@ -85,7 +123,7 @@
         >
           <span class="ngx-icon ngx-arrow-left"></span>
         </button>
-        <button class="title" (click)="changeViews()"> {{ startYear }} - {{ startYear + 20 }} </button>
+        <button class="title" (click)="changeViews()">{{ startYear }} - {{ startYear + 20 }}</button>
         <button
           type="button"
           class="next-month"
@@ -98,7 +136,11 @@
       </div>
       <table class="years-container" role="grid">
         <tr class="years-row" role="row">
-          <td class="year-cell text-center" role="gridcell" *ngFor="let dummy of ' '.repeat(20).split(''); let x = index;">
+          <td
+            class="year-cell text-center"
+            role="gridcell"
+            *ngFor="let dummy of ' '.repeat(20).split(''); let x = index"
+          >
             <button
               class="year"
               type="button"
@@ -117,4 +159,86 @@
       </table>
     </div>
   </div>
+  <div *ngIf="selectType === 'range'" class="time-inputs">
+    <div class="time-row" *ngIf="range.startDate">
+      <div>
+        <ngx-input
+          type="number"
+          hint="Hour"
+          label="{{ formatDate(range.startDate) }}"
+          [ngModel]="startHour"
+          min="1"
+          max="12"
+          (change)="hourChanged($event, 'start')"
+        >
+        </ngx-input>
+      </div>
+      <div>
+        <ngx-input
+          type="number"
+          hint="Minute"
+          [ngModel]="startMinute"
+          min="0"
+          max="59"
+          (change)="minuteChanged($event, 'start')"
+        >
+        </ngx-input>
+      </div>
+      <div>
+        <button
+          class="ampm"
+          type="button"
+          [class.selected]="startAmPmVal === 'AM'"
+          (click)="onAmPmChange('AM', 'start')"
+        >
+          AM
+        </button>
+      </div>
+      <div>
+        <button
+          class="ampm"
+          type="button"
+          [class.selected]="startAmPmVal === 'PM'"
+          (click)="onAmPmChange('PM', 'start')"
+        >
+          PM
+        </button>
+      </div>
+    </div>
+    <div class="time-row" *ngIf="range.endDate">
+      <div>
+        <ngx-input
+          type="number"
+          hint="Hour"
+          label="{{ formatDate(range.endDate) }}"
+          [ngModel]="endHour"
+          min="1"
+          max="12"
+          (change)="hourChanged($event, 'end')"
+        >
+        </ngx-input>
+      </div>
+      <div>
+        <ngx-input
+          type="number"
+          hint="Minute"
+          [ngModel]="endMinute"
+          min="0"
+          max="59"
+          (change)="minuteChanged($event, 'end')"
+        >
+        </ngx-input>
+      </div>
+      <div>
+        <button class="ampm" type="button" [class.selected]="endAmPmVal === 'AM'" (click)="onAmPmChange('AM', 'end')">
+          AM
+        </button>
+      </div>
+      <div>
+        <button class="ampm" type="button" [class.selected]="endAmPmVal === 'PM'" (click)="onAmPmChange('PM', 'end')">
+          PM
+        </button>
+      </div>
+    </div>
+  </div>
 </div>
diff --git a/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.component.scss b/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.component.scss
index fafc95284..c64c8be58 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.component.scss
@@ -1,4 +1,5 @@
 @import 'colors/variables';
+@import 'forms/inputs';
 
 $calendar-bg: $color-blue-grey-800;
 $calendar-border: $color-blue-grey-700;
@@ -8,6 +9,7 @@ $calendar-hover-bg: $color-blue-400;
 $calendar-today-bg: $color-blue-grey-750;
 $calendar-active-bg: $color-blue-400;
 $calendar-active-text: $color-grey-050;
+$calendar-range-bg: $color-blue-700;
 $calendar-day-text: $color-blue-grey-350;
 $calendar-month-current: $color-blue-grey-750;
 
@@ -19,8 +21,7 @@ $calendar-month-current: $color-blue-grey-750;
   display: inline-block;
   border: 1px solid $calendar-border;
   width: 270px;
-  padding: 0.5rem;
-  height: 270px;
+  padding: 0.5rem 0rem;
 
   .ngx-calendar-wrap {
     flex: 1 1 100%;
@@ -72,6 +73,10 @@ $calendar-month-current: $color-blue-grey-750;
     }
   }
 
+  td {
+    padding: 0px;
+  }
+
   .day-name,
   .day-cell {
     margin: 0.1rem 0.2rem;
@@ -80,6 +85,14 @@ $calendar-month-current: $color-blue-grey-750;
     width: 1.8rem;
     height: 1.8rem;
   }
+  .day-name,
+  .day-cell2 {
+    line-height: 1.8rem;
+    text-align: center;
+    width: 34px;
+    height: 32px;
+    margin: 0.1rem 0.2rem;
+  }
 
   .day-container {
     margin-top: 0;
@@ -87,10 +100,13 @@ $calendar-month-current: $color-blue-grey-750;
 
     .day-row {
       display: flex;
-
       .day-cell {
         flex: 1 0 30px;
       }
+      .day-cell2 {
+        flex: 1 0 30px;
+        margin: 0.1rem 0rem;
+      }
     }
 
     .day {
@@ -128,6 +144,165 @@ $calendar-month-current: $color-blue-grey-750;
         }
       }
     }
+
+    button.day2 {
+      color: $calendar-active-text;
+      height: 100%;
+      width: 100%;
+      max-height: 34px;
+      max-width: 32px;
+      line-height: 100%;
+      border-radius: 50%;
+      text-align: center;
+      transition: background 200ms;
+      padding: 0;
+      position: relative;
+
+      &.prev-month,
+      &.next-month {
+        color: $calendar-day-text;
+        opacity: 0.2;
+      }
+
+      &.today {
+        background: $calendar-today-bg;
+      }
+
+      &.active {
+        background: $calendar-active-bg;
+        color: $calendar-active-text;
+      }
+
+      &.extreme1 {
+        position: relative;
+        &:not(.extreme2) {
+          &:before {
+            content: '';
+            position: absolute;
+            top: 0%;
+            left: 50%;
+            right: -10%;
+            bottom: 0%;
+            background: $calendar-range-bg;
+            z-index: 1;
+            opacity: 50%;
+            text-align: center;
+          }
+          &:after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: $calendar-active-bg;
+            border-radius: 50%;
+            z-index: 2;
+            text-align: center;
+          }
+        }
+      }
+      &.extreme2 {
+        position: relative;
+        outline: 2px solid transparent;
+        &:not(.extreme1) {
+          &:before {
+            content: '';
+            position: absolute;
+            top: 0%;
+            left: -9.9%;
+            right: 50%;
+            bottom: 0%;
+            background: $calendar-range-bg;
+            z-index: 1;
+            opacity: 50%;
+          }
+          &:after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: $calendar-bg;
+            outline: 2px solid #1483ff;
+            outline-offset: -1px;
+            border-radius: 50%;
+            z-index: 2;
+          }
+        }
+      }
+      &.range {
+        color: $calendar-active-text;
+        margin: 0rem 0rem;
+        max-width: initial;
+        flex: 1 1 30px;
+        &:before {
+          content: '';
+          position: absolute;
+          top: -0%;
+          left: -0%;
+          right: -0%;
+          bottom: -0%;
+          background: $calendar-range-bg;
+          z-index: 1;
+          opacity: 50%;
+          text-align: center;
+        }
+        &:hover {
+          &:not([disabled]) {
+            outline: 2px solid #1483ff;
+            outline-offset: 1px;
+            z-index: 2;
+            border-radius: 50%;
+            max-width: 32px;
+            max-height: 34px;
+            &:before {
+              content: '';
+              position: absolute;
+              top: -0%;
+              left: -9.9%;
+              right: -10%;
+              bottom: -0%;
+              background: $calendar-range-bg;
+              z-index: 1;
+              opacity: 50%;
+              text-align: center;
+            }
+          }
+        }
+        &.today {
+          border-radius: 50%;
+          max-width: 32px;
+          max-height: 34px;
+          background: $calendar-today-bg;
+          &:before {
+            content: '';
+            position: absolute;
+            top: -0%;
+            left: -9.9%;
+            right: -10%;
+            bottom: -0%;
+            background: $calendar-range-bg;
+            z-index: 1;
+            opacity: 50%;
+            text-align: center;
+          }
+        }
+      }
+      .day-num {
+        position: relative;
+        z-index: 4;
+        color: $calendar-active-text;
+      }
+      &:hover:not(.extremes) {
+        &:hover:not([disabled]) {
+          outline: 2px solid #1483ff;
+          outline-offset: 1px;
+          border-radius: 50%;
+        }
+      }
+    }
   }
 
   .months-container,
@@ -197,3 +372,43 @@ $calendar-month-current: $color-blue-grey-750;
     }
   }
 }
+
+.time-row {
+  background: $calendar-bg;
+  border-top: 1px solid $calendar-border;
+  border-bottom: 1px solid $calendar-border;
+  padding: 24px 18px 6px 18px;
+
+  flex-direction: row;
+  box-sizing: border-box;
+  display: flex;
+  place-content: stretch center;
+  align-items: baseline;
+  justify-content: space-between;
+
+  > * {
+    flex: 0 0 calc(15% - 6px);
+  }
+
+  .ngx-input {
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    width: 73px;
+    height: 46px;
+
+    .ngx-input-underline {
+      background-color: $color-input-text;
+    }
+  }
+
+  button.ampm {
+    color: $color-blue-grey-500;
+
+    &.selected {
+      color: $color-white;
+      background-color: #818fa933;
+      opacity: 20;
+    }
+  }
+}
diff --git a/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.component.ts b/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.component.ts
index 27526fff5..6791199c8 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.component.ts
+++ b/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.component.ts
@@ -20,6 +20,7 @@ import { getDecadeStartYear } from './utils/get-decade-start-year/get-decade-sta
 import { CalendarDay } from './calendar-day.interface';
 import { CalendarMonth } from './calendar-month.type';
 import { CalendarView } from './calendar-view.enum';
+import { CalendarSelect } from './calendar-select.enum';
 import { KeyboardKeys } from '../../enums/keyboard-keys.enum';
 
 const CALENDAR_VALUE_ACCESSOR = {
@@ -28,6 +29,11 @@ const CALENDAR_VALUE_ACCESSOR = {
   multi: true
 };
 
+export interface CalendarDateRange {
+  startDate: Date | undefined;
+  endDate: Date | undefined;
+}
+
 @Component({
   selector: 'ngx-calendar',
   exportAs: 'ngxCalendar',
@@ -53,6 +59,9 @@ export class CalendarComponent implements OnInit, AfterViewInit, ControlValueAcc
   @Input() daysOfWeek: string[] = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
   @Input() timezone: string;
   @Input() inputFormats: Array<string | MomentBuiltinFormat> = ['L', 'LT', 'L LT', moment.ISO_8601];
+  @Input() selectType: string = CalendarSelect.Single;
+  @Input() dateLabelFormat: string = 'MMM D YYYY';
+  @Input() range: CalendarDateRange = { startDate: undefined, endDate: undefined };
 
   @Input('minView')
   get minView() {
@@ -73,6 +82,7 @@ export class CalendarComponent implements OnInit, AfterViewInit, ControlValueAcc
   }
 
   @Output() change = new EventEmitter<Date>();
+  @Output() onRangeSelect = new EventEmitter<CalendarDateRange>();
   @Output() dayKeyEnter = new EventEmitter<Date>();
 
   @HostBinding('attr.tabindex')
@@ -104,7 +114,15 @@ export class CalendarComponent implements OnInit, AfterViewInit, ControlValueAcc
   monthsList = moment.monthsShort();
   startYear: number;
 
+  startHour: number;
+  endHour: number;
+  startMinute: number;
+  endMinute: number;
+  startAmPmVal: string;
+  endAmPmVal: string;
+
   readonly CalendarView = CalendarView;
+  readonly CalendarSelect = CalendarSelect;
 
   private _value: Date;
   private _current: Moment;
@@ -119,6 +137,7 @@ export class CalendarComponent implements OnInit, AfterViewInit, ControlValueAcc
     this.monthsList = moment.monthsShort();
     this._current = this.focusDate;
     this.startYear = getDecadeStartYear(this._current.year());
+    this.initializeTime();
     this.validateView();
   }
 
@@ -154,6 +173,33 @@ export class CalendarComponent implements OnInit, AfterViewInit, ControlValueAcc
     this.currentView = this.defaultView;
   }
 
+  /**
+   * Initializes the values for initial time
+   */
+  initializeTime(): void {
+    this.startHour = this.range.startDate
+      ? this.range.startDate.getHours() % 12
+      : +moment('2001-01-01T00:00:00').format('hh') % 12;
+    this.endHour = this.range.endDate
+      ? this.range.endDate.getHours() % 12
+      : +moment('2001-01-01T00:00:00').format('hh') % 12;
+
+    this.startMinute = this.range.startDate
+      ? this.range.startDate.getMinutes()
+      : +moment('2001-01-01T00:00:00').format('mm');
+    this.endMinute = this.range.endDate ? this.range.endDate.getMinutes() : +moment('2001-01-01T00:00:00').format('mm');
+    this.startAmPmVal = this.range.startDate
+      ? this.range.startDate.getHours() >= 12
+        ? 'PM'
+        : 'AM'
+      : moment('2001-01-01T00:00:00').format('A');
+    this.endAmPmVal = this.range.endDate
+      ? this.range.endDate.getHours() >= 12
+        ? 'PM'
+        : 'AM'
+      : moment('2001-01-01T00:00:00').format('A');
+  }
+
   /**
    * Checks if `date` matches selected value
    */
@@ -161,6 +207,27 @@ export class CalendarComponent implements OnInit, AfterViewInit, ControlValueAcc
     return date.isSame(this.value, 'day');
   }
 
+  /**
+   * Checks if `date` matches the extreme ends of range
+   */
+  isDayRangeEnd(date: Moment): boolean {
+    if (this.range.endDate) return date.isSame(this.range.endDate, 'day');
+  }
+  isDayRangeStart(date: Moment): boolean {
+    if (this.range.startDate && this.range.endDate) return date.isSame(this.range.startDate, 'day');
+  }
+  isRangeStartActive(date: Moment): boolean {
+    if (this.range.startDate) return date.isSame(this.range.startDate, 'day');
+  }
+
+  /**
+   * Checks if `date` matches the extreme ends of range
+   */
+  isDayInRange(date: Moment): boolean {
+    if (this.range.startDate && this.range.endDate)
+      return date.isBetween(this.range.startDate, this.range.endDate, 'day', '()');
+  }
+
   /**
    * Checks if `date` matches selected value
    */
@@ -252,6 +319,36 @@ export class CalendarComponent implements OnInit, AfterViewInit, ControlValueAcc
     }
   }
 
+  onDaySelectRange(day: CalendarDay) {
+    this.focusDate = day.date.clone();
+
+    if (this.range.startDate === undefined && this.range.endDate === undefined) {
+      this.range.startDate = this.focusDate.toDate();
+      this.range.startDate.setHours(this.startHour);
+      this.range.startDate.setMinutes(+this.startMinute);
+    } else if (this.range.endDate === undefined) {
+      if (this.focusDate.toDate() > this.range.startDate) {
+        this.range.endDate = this.focusDate.toDate();
+        this.range.endDate.setHours(this.endHour);
+        this.range.endDate.setMinutes(+this.endMinute);
+      } else {
+        this.range.startDate = this.focusDate.toDate();
+        this.range.startDate.setHours(this.startHour);
+        this.range.startDate.setMinutes(+this.startMinute);
+      }
+    } else {
+      this.range.startDate = this.focusDate.toDate();
+      this.range.startDate.setHours(this.startHour);
+      this.range.startDate.setMinutes(+this.startMinute);
+      this.range.endDate = undefined;
+    }
+    this.onRangeSelect.emit({ startDate: this.range.startDate, endDate: this.range.endDate });
+
+    if (day.prevMonth || day.nextMonth) {
+      this.weeks = getMonth(this.focusDate);
+    }
+  }
+
   onDayFocus(day: CalendarDay) {
     this.focusDate = day.date.clone();
     this.cdr.detectChanges();
@@ -278,6 +375,58 @@ export class CalendarComponent implements OnInit, AfterViewInit, ControlValueAcc
     }
   }
 
+  hourChanged(newVal: number, type: string) {
+    newVal = +newVal % 12;
+    if (type === 'start') {
+      if (this.range.startDate) {
+        if (this.startAmPmVal === 'PM') newVal = 12 + newVal;
+        this.range.startDate.setHours(newVal);
+      }
+      this.startHour = newVal % 12;
+    } else {
+      if (this.range.endDate) {
+        if (this.endAmPmVal === 'PM') newVal = 12 + newVal;
+        this.range.endDate.setHours(newVal);
+      }
+      this.endHour = newVal % 12;
+    }
+    this.onRangeSelect.emit({ startDate: this.range.startDate, endDate: this.range.endDate });
+  }
+  minuteChanged(newVal: number, type: string) {
+    if (type === 'start') {
+      if (this.range.startDate) this.range.startDate.setMinutes(newVal);
+      this.startMinute = newVal;
+    } else {
+      if (this.range.endDate) this.range.endDate.setMinutes(newVal);
+      this.endMinute = newVal;
+    }
+    this.onRangeSelect.emit({ startDate: this.range.startDate, endDate: this.range.endDate });
+  }
+  onAmPmChange(newVal, type) {
+    if (type === 'start') {
+      if (this.range.startDate) {
+        const hourClone = this.range.startDate.getHours();
+        if (newVal === 'AM' && this.startAmPmVal === 'PM') {
+          this.range.startDate.setHours(hourClone - 12);
+        } else if (newVal === 'PM' && this.startAmPmVal === 'AM') {
+          this.range.startDate.setHours(hourClone + 12);
+        }
+      }
+      this.startAmPmVal = newVal;
+    } else {
+      if (this.range.endDate) {
+        const hourClone = this.range.endDate.getHours();
+        if (newVal === 'AM' && this.endAmPmVal === 'PM') {
+          this.range.endDate.setHours(hourClone - 12);
+        } else if (newVal === 'PM' && this.endAmPmVal === 'AM') {
+          this.range.endDate.setHours(hourClone + 12);
+        }
+      }
+      this.endAmPmVal = newVal;
+    }
+    this.onRangeSelect.emit({ startDate: this.range.startDate, endDate: this.range.endDate });
+  }
+
   prevMonth() {
     const date = this.focusDate.clone();
     this.focusDate = date.subtract(1, 'month');
@@ -550,6 +699,12 @@ export class CalendarComponent implements OnInit, AfterViewInit, ControlValueAcc
     this.cdr.detectChanges();
   }
 
+  formatDate(date: Date): string {
+    const customMoment = this.createMoment(date);
+
+    return customMoment.format(this.dateLabelFormat);
+  }
+
   private onChangeCallback: (_: any) => void = () => {
     // placeholder
   };
diff --git a/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.module.ts b/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.module.ts
index 1da7c687a..7ec8d90a3 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.module.ts
+++ b/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.module.ts
@@ -5,10 +5,13 @@ import { MomentModule } from 'ngx-moment';
 
 import { CalendarComponent } from './calendar.component';
 import { PipesModule } from '../../pipes/pipes.module';
+import { InputModule } from '../input/input.module';
+
+export { CalendarDateRange } from './calendar.component';
 
 @NgModule({
   declarations: [CalendarComponent],
   exports: [CalendarComponent],
-  imports: [CommonModule, FormsModule, MomentModule, PipesModule]
+  imports: [CommonModule, FormsModule, MomentModule, PipesModule, InputModule]
 })
 export class CalendarModule {}
diff --git a/projects/swimlane/ngx-ui/src/lib/components/calendar/calender.component.spec.ts b/projects/swimlane/ngx-ui/src/lib/components/calendar/calender.component.spec.ts
index 28a94f2f1..c7bc91371 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/calendar/calender.component.spec.ts
+++ b/projects/swimlane/ngx-ui/src/lib/components/calendar/calender.component.spec.ts
@@ -7,6 +7,7 @@ import moment from 'moment-timezone';
 import { PipesModule } from '../../pipes/pipes.module';
 import { CalendarView } from './calendar-view.enum';
 import { CalendarComponent } from './calendar.component';
+import { CalendarDay } from './calendar-day.interface';
 
 (moment as any).suppressDeprecationWarnings = true;
 
@@ -324,4 +325,112 @@ describe('CalendarComponent', () => {
       component.value = now;
     });
   });
+
+  describe('Time Functions', () => {
+    it('should update hour correctly', () => {
+      component.range = { startDate: new Date(), endDate: undefined };
+      component.startAmPmVal = 'PM';
+      component.startHour = 5;
+      component.hourChanged(3, 'start');
+      expect(component.range?.startDate?.getHours()).toBe(15);
+    });
+
+    it('should update minute correctly', () => {
+      component.range = { startDate: new Date(), endDate: undefined };
+      component.startMinute = 30;
+      component.minuteChanged(45, 'start');
+      expect(component.range?.startDate?.getMinutes()).toBe(45);
+    });
+
+    it('should update AM/PM correctly', () => {
+      component.range = { startDate: new Date(), endDate: undefined };
+      component.startAmPmVal = 'AM';
+      component.range?.startDate?.setHours(2);
+      component.onAmPmChange('PM', 'start');
+      expect(component.range?.startDate?.getHours()).toBe(14);
+    });
+  });
+
+  describe('initializeTime', () => {
+    it('should initialize time properties based on range start and range end', () => {
+      const rangeStart = new Date('2024-04-04T10:30:00');
+      const rangeEnd = new Date('2024-04-04T15:45:00');
+
+      component.range = { startDate: rangeStart, endDate: rangeEnd };
+      component.initializeTime();
+
+      expect(component.startHour).toBe(10);
+      expect(component.startMinute).toBe(30);
+      expect(component.startAmPmVal).toBe('AM');
+
+      expect(component.endHour).toBe(3);
+      expect(component.endMinute).toBe(45);
+      expect(component.endAmPmVal).toBe('PM');
+    });
+
+    it('should initialize time properties with default values if range start and rangeEnd are not provided', () => {
+      component.initializeTime();
+
+      expect(component.startHour).toBe(0);
+      expect(component.endHour).toBe(0);
+      expect(component.startMinute).toBe(0);
+      expect(component.endMinute).toBe(0);
+      expect(component.startAmPmVal).toBe('AM');
+      expect(component.endAmPmVal).toBe('AM');
+    });
+  });
+
+  describe('onDaySelectRange', () => {
+    it('should set range start if both range start and range end are undefined', () => {
+      const day = { date: moment('2024-04-04'), nextMonth: true, prevMonth: true } as CalendarDay;
+      component.focusDate = moment('2024-04-04');
+      component.range = { startDate: undefined, endDate: undefined };
+      component.startHour = 10;
+      component.startMinute = 30;
+
+      component.onDaySelectRange(day);
+
+      expect(component.range?.startDate).toEqual(new Date('2024-04-04T10:30:00'));
+      expect(component.range?.endDate).toBeUndefined();
+    });
+
+    it('should set range end if range start is set and focusDate is greater than range start', () => {
+      const day = { date: moment('2024-04-10'), nextMonth: true, prevMonth: true } as CalendarDay;
+      component.focusDate = moment('2024-04-10');
+      component.range = { startDate: new Date('2024-04-04T10:30:00'), endDate: undefined };
+      component.endHour = 15;
+      component.endMinute = 45;
+
+      component.onDaySelectRange(day);
+
+      expect(component.range?.startDate).toEqual(new Date('2024-04-04T10:30:00'));
+      expect(component.range?.endDate).toEqual(new Date('2024-04-10T15:45:00'));
+    });
+
+    it('should update range start if range start is set and focusDate is less than or equal to range start', () => {
+      const day = { date: moment('2024-04-01'), nextMonth: true, prevMonth: true } as CalendarDay;
+      component.focusDate = moment('2024-04-01');
+      component.range = { startDate: new Date('2024-04-04T10:30:00'), endDate: undefined };
+      component.startHour = 8;
+      component.startMinute = 15;
+
+      component.onDaySelectRange(day);
+
+      expect(component.range?.startDate).toEqual(new Date('2024-04-01T08:15:00'));
+      expect(component.range?.endDate).toBeUndefined();
+    });
+
+    it('should reset range start and range end if both are already set', () => {
+      const day = { date: moment('2024-04-04'), nextMonth: true, prevMonth: true } as CalendarDay;
+      component.focusDate = moment('2024-04-04');
+      component.range = { startDate: new Date('2024-04-01T08:15:00'), endDate: new Date('2024-04-10T15:45:00') };
+      component.startHour = 12;
+      component.startMinute = 0;
+
+      component.onDaySelectRange(day);
+
+      expect(component.range?.startDate).toEqual(new Date('2024-04-04T12:00:00'));
+      expect(component.range?.endDate).toBeUndefined();
+    });
+  });
 });
diff --git a/src/app/forms/calendar-page/calendar-page.component.html b/src/app/forms/calendar-page/calendar-page.component.html
index 8bba32524..b0622303d 100644
--- a/src/app/forms/calendar-page/calendar-page.component.html
+++ b/src/app/forms/calendar-page/calendar-page.component.html
@@ -4,129 +4,146 @@ <h3 class="style-header">Calendar</h3>
   <ngx-tab label="Examples">
     <ngx-section class="shadow" [sectionTitle]="'Calendar'">
       <h3>Basic</h3>
-      <ngx-calendar name="calendar1" [(ngModel)]="curDate1" (change)="dateChanged($event)">
-      </ngx-calendar>
-      <p>Current Date:
-        <i>{{curDate1}}</i>
+      <ngx-calendar name="calendar1" [(ngModel)]="curDate1" (change)="dateChanged($event)"> </ngx-calendar>
+      <p>
+        Current Date:
+        <i>{{ curDate1 }}</i>
       </p>
       <app-prism>
-    <![CDATA[<ngx-calendar
-      name="calendar1"
-      [(ngModel)]="curDate"
-      (change)="dateChanged($event)">
-    </ngx-calendar>]]>
+        <![CDATA[<ngx-calendar name="calendar1" [(ngModel)]="curDate" (change)="dateChanged($event)"> </ngx-calendar>]]>
       </app-prism>
       <br />
-    
+
       <h3>Min/Max Dates</h3>
-      <ngx-calendar name="calendar2" [minDate]="minDate" [maxDate]="maxDate" [(ngModel)]="date" (change)="dateChanged($event)">
+      <ngx-calendar
+        name="calendar2"
+        [minDate]="minDate"
+        [maxDate]="maxDate"
+        [(ngModel)]="date"
+        (change)="dateChanged($event)"
+      >
       </ngx-calendar>
-      <p>Min Date:
-        <i>{{minDate}}</i> and Max Date:
-        <i>{{maxDate}}</i>
+      <p>
+        Min Date: <i>{{ minDate }}</i> and Max Date:
+        <i>{{ maxDate }}</i>
       </p>
       <app-prism>
-    <![CDATA[<ngx-calendar
-      name="calendar2"
-      [minDate]="minDate"
-      [maxDate]="maxDate"
-      [(ngModel)]="date"
-      (change)="dateChanged($event)">
-    </ngx-calendar>]]>
+        <![CDATA[<ngx-calendar name="calendar2" [minDate]="minDate" [maxDate]="maxDate" [(ngModel)]="date"
+        (change)="dateChanged($event)"> </ngx-calendar>]]>
       </app-prism>
-    
+
       <br />
-    
+
       <h3>Disabled</h3>
       <ngx-calendar name="calendar3" [disabled]="true" [(ngModel)]="curDate3" (change)="dateChanged($event)">
       </ngx-calendar>
       <br />
       <app-prism>
-    <![CDATA[<ngx-calendar
-      name="calendar3"
-      [disabled]="true"
-      [(ngModel)]="curDate"
-      (change)="dateChanged($event)">
-    </ngx-calendar>]]>
+        <![CDATA[<ngx-calendar name="calendar3" [disabled]="true" [(ngModel)]="curDate" (change)="dateChanged($event)">
+        </ngx-calendar>]]>
       </app-prism>
-    
+
       <h3>Timezones</h3>
-    
-      <h4>Local: {{dateTz | amDateFormat: 'LL zz' }}</h4>
-      <ngx-calendar name="calendar3" [(ngModel)]="dateTz" (change)="dateChanged($event)">
-      </ngx-calendar>
-    
-      <h4>UTC: {{dateTz | amTimeZone: 'utc' | amDateFormat: 'LL zz' }}</h4>
-      <ngx-calendar name="calendar3" timezone="utc" [(ngModel)]="dateTz" (change)="dateChanged($event)">
-      </ngx-calendar>
-    
-      <h4>JST: {{dateTz | amTimeZone: 'Asia/Tokyo' | amDateFormat: 'LL zz' }}</h4>
-      <ngx-calendar name="calendar3" timezone="Asia/Tokyo"  [(ngModel)]="dateTz" (change)="dateChanged($event)">
+
+      <h4>Local: {{ dateTz | amDateFormat: 'LL zz' }}</h4>
+      <ngx-calendar name="calendar3" [(ngModel)]="dateTz" (change)="dateChanged($event)"> </ngx-calendar>
+
+      <h4>UTC: {{ dateTz | amTimeZone: 'utc' | amDateFormat: 'LL zz' }}</h4>
+      <ngx-calendar name="calendar3" timezone="utc" [(ngModel)]="dateTz" (change)="dateChanged($event)"> </ngx-calendar>
+
+      <h4>JST: {{ dateTz | amTimeZone: 'Asia/Tokyo' | amDateFormat: 'LL zz' }}</h4>
+      <ngx-calendar name="calendar3" timezone="Asia/Tokyo" [(ngModel)]="dateTz" (change)="dateChanged($event)">
       </ngx-calendar>
       <br />
       <br />
       <br />
-    
+
+      <h3>Select Range</h3>
+      <ngx-calendar
+        name="calendar-range"
+        [selectType]="'range'"
+        [dateLabelFormat]="'YYYY MMM D'"
+        (onRangeSelect)="onRangeSelect($event)"
+      >
+      </ngx-calendar>
+      <app-prism>
+        <![CDATA[<ngx-calendar name="calendar-range" [selectType]="'range'" [dateLabelFormat]="'YYYY MMM D'"
+        (onRangeSelect)="onRangeSelect($event)"> </ngx-calendar>]]>
+      </app-prism>
+
       <h3>Min view and Default view</h3>
-    
-      <h4> Min view: "date" default view: "date" </h4>
-      <ngx-calendar name="calendar4" [(ngModel)]="curDate4" (change)="dateChanged($event)" [minView]="'date'" [defaultView]="'date'">
+
+      <h4>Min view: "date" default view: "date"</h4>
+      <ngx-calendar
+        name="calendar4"
+        [(ngModel)]="curDate4"
+        (change)="dateChanged($event)"
+        [minView]="'date'"
+        [defaultView]="'date'"
+      >
       </ngx-calendar>
-      <p>Current Date:
-        <i>{{curDate4}}</i>
+      <p>
+        Current Date:
+        <i>{{ curDate4 }}</i>
       </p>
       <app-prism>
-    <![CDATA[<ngx-calendar
-      name="calendar4"
-      [(ngModel)]="curDate"
-      (change)="dateChanged($event)"
-      [minView]="'date'" [defaultView]="'date'">
-    </ngx-calendar>]]>
+        <![CDATA[<ngx-calendar name="calendar4" [(ngModel)]="curDate" (change)="dateChanged($event)" [minView]="'date'"
+        [defaultView]="'date'"> </ngx-calendar>]]>
       </app-prism>
       <br />
-    
-      <h4> Min view: "date" default view: "month" </h4>
-      <ngx-calendar name="calendar5" [(ngModel)]="curDate5" (change)="dateChanged($event)" [minView]="'date'" [defaultView]="'month'">
+
+      <h4>Min view: "date" default view: "month"</h4>
+      <ngx-calendar
+        name="calendar5"
+        [(ngModel)]="curDate5"
+        (change)="dateChanged($event)"
+        [minView]="'date'"
+        [defaultView]="'month'"
+      >
       </ngx-calendar>
-      <p>Current Date:
-        <i>{{curDate5}}</i>
+      <p>
+        Current Date:
+        <i>{{ curDate5 }}</i>
       </p>
       <app-prism>
-    <![CDATA[<ngx-calendar
-      name="calendar5"
-      [(ngModel)]="curDate"
-      (change)="dateChanged($event)"
-      [minView]="'date'" [defaultView]="'month'">
-    </ngx-calendar>]]>
+        <![CDATA[<ngx-calendar name="calendar5" [(ngModel)]="curDate" (change)="dateChanged($event)" [minView]="'date'"
+        [defaultView]="'month'"> </ngx-calendar>]]>
       </app-prism>
       <br />
-      <h4> Min view: "month" default view: "year" </h4>
-      <ngx-calendar name="calendar6" [(ngModel)]="curDate6" (change)="dateChanged($event)" [minView]="'month'" [defaultView]="'year'">
+      <h4>Min view: "month" default view: "year"</h4>
+      <ngx-calendar
+        name="calendar6"
+        [(ngModel)]="curDate6"
+        (change)="dateChanged($event)"
+        [minView]="'month'"
+        [defaultView]="'year'"
+      >
       </ngx-calendar>
-      <p>Current Date:
-        <i>{{curDate6}}</i>
+      <p>
+        Current Date:
+        <i>{{ curDate6 }}</i>
       </p>
       <app-prism>
-    <![CDATA[<ngx-calendar
-      name="calendar6"
-      [(ngModel)]="curDate"
-      (change)="dateChanged($event)"
-      [minView]="'month'" [defaultView]="'year'">
-    </ngx-calendar>]]>
+        <![CDATA[<ngx-calendar name="calendar6" [(ngModel)]="curDate" (change)="dateChanged($event)" [minView]="'month'"
+        [defaultView]="'year'"> </ngx-calendar>]]>
       </app-prism>
       <br />
-    
+
       <h3>Flexible Width</h3>
-    
-      <ngx-calendar style="width: 100%" name="calendar1" [(ngModel)]="curDate1" (change)="dateChanged($event)"></ngx-calendar>
-    
+
+      <ngx-calendar
+        style="width: 100%"
+        name="calendar1"
+        [(ngModel)]="curDate1"
+        (change)="dateChanged($event)"
+      ></ngx-calendar>
     </ngx-section>
   </ngx-tab>
   <ngx-tab label="API">
     <h3>Table of Contents</h3>
     <a class="documentation-content" (click)="scrollTo('inputs')">Component Inputs</a>
     <a class="documentation-content" (click)="scrollTo('outputs')">Component Outputs</a>
-    <hr>
+    <hr />
 
     <h3 class="style-header" id="inputs">Component Inputs</h3>
     <table class="table documentation-table">
@@ -149,7 +166,10 @@ <h3 class="style-header" id="inputs">Component Inputs</h3>
             <code class="component-type">&#64;Input()</code>
             <code>defaultView: CalendarView</code>
           </th>
-          <td>The default view for the component. Will display year, month, or date. Overrides the <code>minView</code> Input. See Examples tab.</td>
+          <td>
+            The default view for the component. Will display year, month, or date. Overrides the
+            <code>minView</code> Input. See Examples tab.
+          </td>
         </tr>
         <tr>
           <th>
@@ -184,7 +204,10 @@ <h3 class="style-header" id="inputs">Component Inputs</h3>
             <code class="component-type">&#64;Input()</code>
             <code>minView: CalendarView</code>
           </th>
-          <td>The minimum view for the initial state of the component. Will display year, month, or date. See Examples tab.</td>
+          <td>
+            The minimum view for the initial state of the component. Will display year, month, or date. See Examples
+            tab.
+          </td>
         </tr>
         <tr>
           <th>
@@ -193,9 +216,23 @@ <h3 class="style-header" id="inputs">Component Inputs</h3>
           </th>
           <td>The timezone for the component. This will affect what date is listed as the current day.</td>
         </tr>
+        <tr>
+          <th>
+            <code class="component-type">&#64;Input()</code>
+            <code>dateLabelFormat: string</code>
+          </th>
+          <td>The format in which the date should be displayed in the inputs label of range selection.</td>
+        </tr>
+        <tr>
+          <th>
+            <code class="component-type">&#64;Input()</code>
+            <code>range: &#123;startDate: Date &#124; undefined&#59; endDate: Date &#124; undefined&#125;</code>
+          </th>
+          <td>The format to set a date range.</td>
+        </tr>
       </tbody>
     </table>
-    <hr>
+    <hr />
     <h3 class="style-header" id="outputs">Component Outputs</h3>
     <table class="table documentation-table">
       <thead>
@@ -219,7 +256,14 @@ <h3 class="style-header" id="outputs">Component Outputs</h3>
           </th>
           <td>Event emitted when a date is selected using keyboard navigation via the Enter key.</td>
         </tr>
+        <tr>
+          <th>
+            <code class="component-type">&#64;Output()</code>
+            <code>onRangeSelect: EventEmitter&lt; startDate: Date | undefined; endDate: Date | undefined &gt;</code>
+          </th>
+          <td>Event emitted when start date or end Date is changed.</td>
+        </tr>
       </tbody>
     </table>
   </ngx-tab>
-</ngx-tabs>
\ No newline at end of file
+</ngx-tabs>
diff --git a/src/app/forms/calendar-page/calendar-page.component.ts b/src/app/forms/calendar-page/calendar-page.component.ts
index 625608383..167f03c6e 100644
--- a/src/app/forms/calendar-page/calendar-page.component.ts
+++ b/src/app/forms/calendar-page/calendar-page.component.ts
@@ -26,6 +26,10 @@ export class CalendarPageComponent {
     console.log('date changed!', val);
   }
 
+  onRangeSelect(val) {
+    console.log(val);
+  }
+
   scrollTo(id: string) {
     (document.getElementById(id) as HTMLElement)?.scrollIntoView({ behavior: 'smooth' });
   }