feat: add support for DatePickerEx date-based styles

Author: javier-godoy

src/main/java/com/flowingcode/addons/ycalendar/DatePickerEx.java

@@ -19,11 +19,16 @@
  */
 package com.flowingcode.addons.ycalendar;
 
+import com.vaadin.flow.component.ClientCallable;
 import com.vaadin.flow.component.Tag;
 import com.vaadin.flow.component.datepicker.DatePicker;
 import com.vaadin.flow.component.dependency.JsModule;
 import com.vaadin.flow.function.ValueProvider;
+import elemental.json.Json;
+import elemental.json.JsonObject;
 import java.time.LocalDate;
+import java.time.YearMonth;
+import java.util.Optional;
 
 @SuppressWarnings("serial")
 @Tag("fc-date-picker")
@@ -50,4 +55,35 @@ public DatePickerEx(LocalDate initialDate) {
     setValue(initialDate);
   }
 
+  /**
+   * Sets the function that generates CSS class names for days in this calendar.
+   *
+   * Returning {@code null} from the generator results in no custom class name being set. Multiple
+   * class names can be returned from the generator as space-separated.
+   *
+   * @param classNameGenerator the {@code ValueProvider} to use for generating class names
+   */
+  public void setClassNameGenerator(ValueProvider<LocalDate, String> classNameGenerator) {
+    this.classNameGenerator = classNameGenerator;
+    refreshAll();
+  }
+
+  /** Refresh the styles of all dates in the displayed year and month. */
+  public void refreshAll() {
+    // getElement().executeJs("setTimeout(()=>this._clearEmptyDaysStyle())");
+  }
+
+  @ClientCallable
+  private JsonObject fetchStyles(String yearMonthStr) {
+    YearMonth yearMonth = YearMonth.parse(yearMonthStr);
+    JsonObject monthStyles = Json.createObject();
+    for (int i = 1, n = yearMonth.lengthOfMonth(); i <= n; i++) {
+      LocalDate date = yearMonth.atDay(i);
+      Optional.ofNullable(classNameGenerator).map(g -> g.apply(date)).ifPresent(className -> {
+        monthStyles.put(Integer.toString(date.getDayOfMonth()), className);
+      });
+    }
+    return monthStyles;
+  }
+
 }

src/main/resources/META-INF/frontend/fc-date-picker/fc-date-picker.js

@@ -23,12 +23,64 @@ export class FcDatePicker extends DatePicker {
   }
 
   ready() {
+    super.ready();
+    
     const buttons=document.createElement('fc-date-picker-buttons');
     buttons.setAttribute('slot','prefix');
     this.appendChild(buttons);
     buttons.addEventListener("click-up", ()=>this._onButtonClick(+1));
     buttons.addEventListener("click-down", ()=>this._onButtonClick(-1));
-    super.ready();
+    
+    this._styles={};
+    
+    const _clearStyles = function() { 
+        let e = this.shadowRoot.querySelectorAll("[part~='date']");
+        e.forEach(item => item.removeAttribute('class'));
+    };
+
+    const _setStyleForDay = function(i,className) {
+        let e = this.shadowRoot.querySelectorAll("[part~='date']:not(:empty)")[i-1];
+        if (className) {
+            e.className=className;
+        } else {
+            e.removeAttribute('class');
+        }
+    };
+
+    const _getStyle = key => {
+        return this._styles[key] || (this._styles[key] = this.$server.fetchStyles(key));
+    }
+    
+    const _updateMonthStyles = function(element) {
+        const month = element.month;
+        const key   = month.toISOString().substr(0,7);
+        _clearStyles.call(element);
+        _getStyle(key).then(styles=>setTimeout(()=>{
+            if (element.month===month) {
+                for (let i in styles) {
+                    _setStyleForDay.call(element,i,styles[i]);
+                }
+            }
+        }));
+    }
+    
+    this._overlayElement.renderer = e => {
+        this._boundOverlayRenderer.call(this,e);
+        
+        if (!this._overlayContent._monthScroller.__fcWrapped) {
+            const createElement = this._overlayContent._monthScroller._createElement;
+            this._overlayContent._monthScroller.__fcWrapped = true;
+            this._overlayContent._monthScroller._createElement = () => {
+                var calendar = createElement();
+                calendar.addEventListener('dom-change',ev=>{
+                    if (ev.composedPath()[0].as=='week') {
+                        setTimeout(()=> _updateMonthStyles(calendar));
+                    }
+                });
+                return calendar;
+            }
+        }
+    };
   }
 
   _onButtonClick(delta) {

src/test/java/com/flowingcode/addons/ycalendar/DatePickerDemo.java

@@ -24,6 +24,7 @@
 import com.vaadin.flow.component.notification.Notification;
 import com.vaadin.flow.router.PageTitle;
 import com.vaadin.flow.router.Route;
+import java.time.DayOfWeek;
 import java.time.LocalDate;
 import java.util.Objects;
 
@@ -43,6 +44,16 @@ public DatePickerDemo() {
       Notification.show(Objects.toString(ev.getValue()));
     });
 
+    field.setClassNameGenerator(date -> {
+      if (date.getDayOfWeek() == DayOfWeek.SATURDAY || date.getDayOfWeek() == DayOfWeek.SUNDAY) {
+        return "weekend";
+      } else if (TestUtils.isPublicHoliday(date)) {
+        return "holiday";
+      } else {
+        return null;
+      }
+    });
+
     add(field);
   }