Merge pull request #8704 from infor-design/NG1659-monthview-activedate

NG1659 - Monthview Add Day
infor-design · May 22, 2024 · 532dc96 · 532dc96
2 parents 4328198 + 9a3abd5
commit 532dc96
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 2 deletions.
diff --git a/app/views/components/monthview/test-add-day.html b/app/views/components/monthview/test-add-day.html
@@ -0,0 +1,60 @@
+<div class="row">
+  <div class="twelve columns">
+    <p id="selected-date"></p><br>
+    <button class="btn-primary" type="button" id="btn-add">Add Day</button>
+  </div>
+</div>
+<div class="row top-padding">
+  <div class="twelve columns">
+    <div class="monthview" data-init="false">
+    </div>
+  </div>
+</div>
+
+
+<script>
+  $('body').on('initialized', function() {
+    var monthViewApi = null;
+    var selectedDate = new Date();
+    var monthViewOptions = {
+      inPage: true,
+      inPageExpanded: true,
+      showMonthYearPicker: false,
+      showLegend: true,
+      disable: {
+      isEnable: false, // inverses the disable options
+      attributes: [
+        { name: 'id', value: 'monthview-id' },
+        { name: 'data-automation-id', value: 'monthview-automation-id' }
+      ]
+    },
+    }
+    $('.monthview').monthview({
+      ...monthViewOptions,
+      day: selectedDate.getDate(),
+      month: selectedDate.getMonth(),
+      year: selectedDate.getFullYear(),
+      activeDate: selectedDate
+    });
+
+    monthViewApi = $('.monthview').data('monthview');
+
+    $('#selected-date').text(selectedDate);
+
+    $('#btn-add').on('click', () => {
+      selectedDate = monthViewApi.currentDate;
+      selectedDate.setDate(selectedDate.getDate() + 1);
+      var settings = {
+        ...monthViewOptions,
+        day: selectedDate.getDate(),
+        month: selectedDate.getMonth(),
+        year: selectedDate.getFullYear(),
+        activeDate: selectedDate,
+      };
+      console.log(selectedDate.toDateString());
+
+      $('#selected-date').text(selectedDate);
+      monthViewApi.updated(settings);
+    })
+  });
+</script>
diff --git a/src/components/monthview/monthview.js b/src/components/monthview/monthview.js
@@ -637,6 +637,12 @@ MonthView.prototype = {
     now.setMinutes(0);
     now.setSeconds(0);
 
+    if (this.toUpdate !== undefined && this.toUpdate) {
+      s.activeDateIslamic = null;
+      delete this.currentDay;
+      delete this.toUpdate;
+    }
+
     let elementDate;
     if (this.isIslamic) {
       elementDate = s.activeDate || Locale.gregorianToUmalqura(now);
@@ -658,7 +664,7 @@ MonthView.prototype = {
         month = islamicDate[1];
         elementDate = islamicDate;
         this.currentDay = islamicDate[2];
-      } else {
+      } else {  
         elementDate = s.activeDateIslamic;
       }
     }
@@ -796,7 +802,7 @@ MonthView.prototype = {
           const setHours = el => (el ? el.setHours(tHours, tMinutes, tSeconds, 0) : 0);
 
           const newDate = setHours(new Date(year, month, dayCnt));
-          const comparisonDate = self.currentDate || elementDate;
+          const comparisonDate = elementDate || self.currentDate;
           if (!(s.day && !s.activeDate) && newDate === setHours(comparisonDate)) {
             setSelected(th, true);
           }
@@ -2988,6 +2994,7 @@ MonthView.prototype = {
 
     if (settings) {
       this.settings = utils.mergeSettings(this.element[0], settings, this.settings);
+      this.toUpdate = true;
     }
 
     return this