Merge branch 'dev'

geex-arts · May 30, 2024 · 4b2943d · 4b2943d
2 parents 2d26c3d + 20091e8
commit 4b2943d
Show file tree

Hide file tree

Showing 12 changed files with 211 additions and 100 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -6,8 +6,8 @@
   <base href="/ng-gxdatepicker/demo/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-<link rel="stylesheet" href="styles.46758fa8a592b8d5023e.css"></head>
+<link rel="stylesheet" href="styles.b343884ccaaa38fed9cc.css"></head>
 <body>
   <app-root></app-root>
-<script type="text/javascript" src="runtime.a66f828dca56eeb90e02.js"></script><script type="text/javascript" src="polyfills.c73631205450cdf588fb.js"></script><script type="text/javascript" src="main.fbecf79ab38f3282850e.js"></script></body>
+<script type="text/javascript" src="runtime.a66f828dca56eeb90e02.js"></script><script type="text/javascript" src="polyfills.c73631205450cdf588fb.js"></script><script type="text/javascript" src="main.2ff3551e80de372c8c26.js"></script></body>
 </html>
diff --git a/demo/main.fbecf79ab38f3282850e.js → demo/main.2ff3551e80de372c8c26.js b/demo/main.fbecf79ab38f3282850e.js → demo/main.2ff3551e80de372c8c26.js
diff --git a/demo/styles.46758fa8a592b8d5023e.css b/demo/styles.46758fa8a592b8d5023e.css
diff --git a/demo/styles.b343884ccaaa38fed9cc.css b/demo/styles.b343884ccaaa38fed9cc.css
diff --git a/projects/ng-gxdatepicker/package.json b/projects/ng-gxdatepicker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng-gxdatepicker",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "Customizable date and time pickers",
   "repository": {
     "type": "git",

diff --git a/projects/ng-gxdatepicker/src/lib/components/calendar/calendar.component.html b/projects/ng-gxdatepicker/src/lib/components/calendar/calendar.component.html
@@ -1,69 +1,73 @@
-<div class="datepicker-calendar"
-     [ngClass]="['datepicker-calendar_theme_' + options.theme]">
-  <div class="datepicker-calendar__header">
-    <div class="datepicker-calendar__header-controls datepicker-calendar__header-controls_left">
-      <a href="javascript:void(0)"
-         class="datepicker-calendar__header-control"
-         (tap)="goToPrevYear()"
-         tabindex="-1">
-        &laquo;
-      </a>
-      <a href="javascript:void(0)"
-         class="datepicker-calendar__header-control"
-         (tap)="goToPrevMonth()"
-         tabindex="-1">
-        &#8249;
-      </a>
-    </div>
+<div class="datepicker-calendars" [ngClass]="['datepicker-calendar_theme_' + options.theme]">
+  <div *ngFor="let monthDisplay of monthDisplays; let first = first; let last = last"
+       class="datepicker-calendar datepicker-calendars__item">
+    <div class="datepicker-calendar__header">
+      <div *ngIf="first" class="datepicker-calendar__header-controls datepicker-calendar__header-controls_left">
+        <a href="javascript:void(0)"
+           class="datepicker-calendar__header-control"
+           (tap)="goToPrevYear()"
+           tabindex="-1">
+          &laquo;
+        </a>
+        <a href="javascript:void(0)"
+           class="datepicker-calendar__header-control"
+           (tap)="goToPrevMonth()"
+           tabindex="-1">
+          &#8249;
+        </a>
+      </div>
 
-    <span class="datepicker-calendar__header-title">
-      <span class="datepicker-calendar__header-month">{{monthDisplay.date.format('MMMM')}}</span>
-      <span class="datepicker-calendar__header-year">{{monthDisplay.date.format('YYYY')}}</span>
-    </span>
+      <span class="datepicker-calendar__header-title">
+        <span class="datepicker-calendar__header-month">{{monthDisplay.date.format('MMMM')}}</span>
+        <span class="datepicker-calendar__header-year">{{monthDisplay.date.format('YYYY')}}</span>
+      </span>
 
-    <div class="datepicker-calendar__header-controls datepicker-calendar__header-controls_right">
-      <a href="javascript:void(0)"
-         class="datepicker-calendar__header-control"
-         (tap)="goToNextMonth()"
-         tabindex="-1">
-        &#8250;
-      </a>
-      <a href="javascript:void(0)"
-         class="datepicker-calendar__header-control"
-         (tap)="goToNextYear()"
-         tabindex="-1">
-        &raquo;
-      </a>
-    </div>
-  </div>
-  <table class="datepicker-calendar__table">
-    <thead>
-    <tr class="datepicker-calendar__table-header">
-      <th *ngFor="let day of monthDisplay.weekDays"
-          class="datepicker-calendar__table-heading"
-          [class.datepicker-calendar__table-heading_weekend]="day.weekend">
-        {{day.date.format('dd')}}
-      </th>
-    </tr>
-    </thead>
-    <tbody>
-    <tr *ngFor="let week of monthDisplay.weeks" class="datepicker-calendar__table-row">
-      <td *ngFor="let day of week"
-          class="datepicker-calendar__table-cell"
-          [class.datepicker-calendar__table-cell_another-month]="!day.currentMonth"
-          [class.datepicker-calendar__table-cell_today]="day.today"
-          [class.datepicker-calendar__table-cell_selected]="day.selected"
-          [class.datepicker-calendar__table-cell_weekend]="day.weekend"
-          [class.datepicker-calendar__table-cell_enabled]="day.enabled === true"
-          [class.datepicker-calendar__table-cell_disabled]="day.enabled === false">
+      <div *ngIf="last" class="datepicker-calendar__header-controls datepicker-calendar__header-controls_right">
         <a href="javascript:void(0)"
-           class="datepicker-calendar__table-cell-link"
-           (tap)="select(day.date)"
+           class="datepicker-calendar__header-control"
+           (tap)="goToNextMonth()"
            tabindex="-1">
-          {{day.date.format('D')}}
+          &#8250;
         </a>
-      </td>
-    </tr>
-    </tbody>
-  </table>
+        <a href="javascript:void(0)"
+           class="datepicker-calendar__header-control"
+           (tap)="goToNextYear()"
+           tabindex="-1">
+          &raquo;
+        </a>
+      </div>
+    </div>
+    <table class="datepicker-calendar__table">
+      <thead>
+      <tr class="datepicker-calendar__table-header">
+        <th *ngFor="let day of monthDisplay.weekDays"
+            class="datepicker-calendar__table-heading"
+            [class.datepicker-calendar__table-heading_weekend]="day.weekend">
+          {{day.date.format('dd')}}
+        </th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr *ngFor="let week of monthDisplay.weeks" class="datepicker-calendar__table-row">
+        <td *ngFor="let day of week"
+            class="datepicker-calendar__table-cell"
+            [class.datepicker-calendar__table-cell_another-month]="!day.currentMonth"
+            [class.datepicker-calendar__table-cell_today]="day.today"
+            [class.datepicker-calendar__table-cell_range-bound]="day.rangeBound"
+            [class.datepicker-calendar__table-cell_range-inside]="day.rangeInside"
+            [class.datepicker-calendar__table-cell_selected]="day.selected"
+            [class.datepicker-calendar__table-cell_weekend]="day.weekend"
+            [class.datepicker-calendar__table-cell_enabled]="day.enabled === true"
+            [class.datepicker-calendar__table-cell_disabled]="day.enabled === false">
+          <a href="javascript:void(0)"
+             class="datepicker-calendar__table-cell-link"
+             (tap)="select(day.date)"
+             tabindex="-1">
+            {{day.date.format('D')}}
+          </a>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
 </div>
diff --git a/projects/ng-gxdatepicker/src/lib/components/calendar/calendar.component.scss b/projects/ng-gxdatepicker/src/lib/components/calendar/calendar.component.scss
@@ -1,5 +1,17 @@
 
 .datepicker-calendar_theme_default {
+  .datepicker-calendars {
+  }
+
+  .datepicker-calendars__item {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  .datepicker-calendars__item + .datepicker-calendars__item {
+    margin-left: 20px;
+  }
+
   .datepicker-calendar {
     min-width: 200px;
   }
@@ -116,6 +128,15 @@
       color: #ff505c;
     }
 
+    &_range-inside {
+      background: #f1f1f1;
+    }
+
+    &_range-bound, &_range-bound:hover {
+      background: #6da5ff;
+      color: #fff;
+    }
+
     &_selected, &_selected:hover {
       background: #6da5ff;
       color: #fff;