Add range change event

tp-date-picker.js

@@ -303,6 +303,7 @@ class TpDatePicker extends FormElement(LitElement) {
 
     this.month = prevMonth;
     this.year = prevYear;
+    this.dispatchRangeChangeEvent();
   }
 
   nextMonth() {
@@ -316,14 +317,17 @@ class TpDatePicker extends FormElement(LitElement) {
 
     this.month = nextMonth;
     this.year = nextYear;
+    this.dispatchRangeChangeEvent();
   }
 
   previousYear() {
     this.year -= 1;
+    this.dispatchRangeChangeEvent();
   }
 
   nextYear() {
     this.year += 1;
+    this.dispatchRangeChangeEvent();
   }
 
   getMonthDates(month = null, year = null) {
@@ -386,6 +390,7 @@ class TpDatePicker extends FormElement(LitElement) {
       if (el.value) {
         this.year = el.value;
         this.showYearSelector = false;
+        this.dispatchRangeChangeEvent();
         break;
       }
     }
@@ -395,6 +400,24 @@ class TpDatePicker extends FormElement(LitElement) {
     if (!Array.isArray(this.events)) return 0;
     return this.events.filter(event => this.equalDate(event, date)).length;
   }
+
+  dispatchRangeChangeEvent() {
+    const currentMonthDates = this.getMonthDates(this.month, this.year);
+    const rangeStart = currentMonthDates[0];
+    const rangeEnd = currentMonthDates[currentMonthDates.length - 1];
+    
+    this.dispatchEvent(new CustomEvent('range-changed', {
+      detail: {
+        month: this.month,
+        year: this.year,
+        rangeStart,
+        rangeEnd,
+        visibleDates: currentMonthDates
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
 }
 
 window.customElements.define('tp-date-picker', TpDatePicker);