feat: highlight events in date inputs (calendar)

projects/ngx-formentry/src/components/ngx-datetime-picker/ngx-datetime-picker.component.ts

@@ -17,18 +17,78 @@ import moment from 'moment';
 export class NgxDatetimeComponent implements ControlValueAccessor {
   value = '';
   isDisabled = false;
+  // calendarEvents = [{ name: "Mashujaa Day", date: "2016-12-12" }, { name: "Christmas Day", date: "2016-12-25" }, { name: "Boxing Day", date: "2016-12-26" }, { name: "New Year Day", date: "2017-01-01" }]
   @Input() id = '';
   @Input() theme = 'dark';
   @Input() datePickerFormat = '';
   @Input() showWeeks = false;
   @Input() weeks: number[];
+  private observer: MutationObserver | null = null;
+  private _dataSource: Array<object>;
+  @Input()
+  public get dataSource(): any {
+    return this._dataSource || [];
+  }
+  public set dataSource(v: any) {
+    this._dataSource = v;
+  }
+
   onChange = (_: any) => {};
   onTouch = () => {};
   onInput($event: any) {
     this.onTouch();
     this.onChange(moment($event.value).format());
   }
 
+  onPickerOpen($event: any) {
+    this.highlightEventDates();
+    const calendarBody = document.querySelector('.owl-dt-calendar-main');
+    if (calendarBody) {
+      this.observer = new MutationObserver(() => {
+        this.highlightEventDates();
+      });
+      this.observer.observe(calendarBody, {
+        childList: true,
+        subtree: true
+      });
+    }
+  }
+
+  onPickerClose($event: any) {
+    if (this.observer) {
+      this.observer.disconnect();
+      this.observer = null;
+    }
+  }
+
+  highlightEventDates(): void {
+    const isMultiYearView = !!document.querySelector(
+      '.owl-dt-calendar-multi-year-view'
+    );
+    if (isMultiYearView) {
+      return;
+    }
+
+    const cells = document.querySelectorAll('.owl-dt-calendar-cell');
+    for (let i = 0; i < cells.length; i++) {
+      const cell = cells[i];
+      const date = new Date(cell.getAttribute('aria-label'));
+      const cellDate = moment(date).format('YYYY-MM-DD');
+      const events = this.dataSource.filter(
+        (d) => moment(d.date).format('YYYY-MM-DD') === cellDate
+      );
+      if (events.length > 0) {
+        const eventName = events
+          .map((h) => h.name)
+          .sort()
+          .join('\n\n');
+
+        cell.classList.add('highlight-date');
+        cell.setAttribute('data-tooltip', eventName);
+      }
+    }
+  }
+
   writeValue(value: any): void {
     if (value && value !== '') {
       this.value = moment(value).format();

projects/ngx-formentry/src/components/ngx-datetime-picker/ngx-datetime-picker.css

@@ -2,3 +2,43 @@
   display: grid;
   row-gap: 1rem;
 }
+
+::ng-deep .highlight-date {
+  border-radius: 999px;
+  background-color: purple !important;
+}
+
+::ng-deep .highlight-date {
+  border-radius: 999px;
+  background-color: lightgreen !important;
+}
+
+::ng-deep .highlight-date[data-tooltip]:hover::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  top: -40px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #333;
+  color: #fff;
+  padding: 9px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 6px;
+  white-space: pre-wrap;
+  z-index: 1000;
+  height: fit-content;
+  width: max-content;
+  text-align: start;
+}
+
+::ng-deep .highlight-date[data-tooltip]:hover::before {
+  content: '';
+  position: absolute;
+  top: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: #333;
+  z-index: 1000;
+}

projects/ngx-formentry/src/components/ngx-datetime-picker/ngx-datetime-picker.html

@@ -89,5 +89,7 @@
 <ofe-owl-date-time
   [pickerType]="datePickerFormat ? datePickerFormat : 'calendar'"
   [disabled]="isDisabled"
+  (afterPickerOpen)="onPickerOpen($event)"
+  (afterPickerClosed)="onPickerClose($event)"
   #dt1
 ></ofe-owl-date-time>

projects/ngx-formentry/src/form-entry/form-factory/question.factory.ts

@@ -166,6 +166,7 @@ export class QuestionFactory {
       id: 'key'
     };
     question.datePickerFormat = schemaQuestion.datePickerFormat ?? 'calendar';
+    question.dataSource = 'calendarEvents';
 
     this.copyProperties(mappings, schemaQuestion, question);
     this.addDisableOrHideProperty(schemaQuestion, question);
@@ -196,6 +197,7 @@ export class QuestionFactory {
     question.showTime = true;
     question.componentConfigs = schemaQuestion.componentConfigs || [];
     question.datePickerFormat = schemaQuestion.datePickerFormat ?? 'calendar';
+    question.dataSource = 'calendarEvents';
 
     this.copyProperties(mappings, schemaQuestion, question);
     this.addDisableOrHideProperty(schemaQuestion, question);

projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.html

@@ -285,6 +285,7 @@
             [formControlName]="node.question.key"
             *ngSwitchCase="'date'"
             [datePickerFormat]="node.question.datePickerFormat"
+            [dataSource]="dataSource"
           ></ofe-ngx-date-time-picker>
 
           <ng-select

projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.ts

@@ -62,6 +62,7 @@ export class FormRendererComponent implements OnInit, OnChanges {
     this.setUpRemoteSelect();
     this.setUpFileUpload();
     this.loadLabels();
+    this.setUpCalendarEvents();
     if (this.node && this.node.form) {
       const tab = this.node.form.valueProcessingInfo.lastFormTab;
       if (tab && tab !== this.activeTab) {
@@ -157,6 +158,12 @@ export class FormRendererComponent implements OnInit, OnChanges {
     }
   }
 
+  public setUpCalendarEvents() {
+    this.dataSource = this.dataSources.dataSources[
+      this.node.question.dataSource
+    ];
+  }
+
   checkSection(node: NodeBase) {
     if (node.question.renderingType === 'section') {
       let groupChildrenHidden = false;

projects/ngx-formentry/src/form-entry/question-models/date-question.ts

@@ -5,6 +5,7 @@ import { AfeControlType } from '../../abstract-controls-extension/afe-control-ty
 export class DateQuestion extends QuestionBase {
   showTime = true;
   showWeeksAdder = false;
+  dataSource?: string;
   constructor(options: DateQuestionOptions) {
     super(options);
     this.renderingType = 'date';

src/app/app.component.ts

@@ -23,6 +23,7 @@ import { PatientIdentifierAdapter } from 'projects/ngx-formentry/src/form-entry/
 const adultReturnVisitForm = require('./adult-1.6.json');
 const adultReturnVisitFormObs = require('./mock/obs.json');
 const formOrdersPayload = require('./mock/orders.json');
+const calendarEvents = require('./mock/calendar-events.json');
 
 @Component({
   selector: 'app-root',
@@ -84,6 +85,7 @@ export class AppComponent implements OnInit {
       searchOptions: this.sampleSearch,
       resolveSelectedValue: this.sampleResolve
     });
+    this.dataSources.registerDataSource('calendarEvents', calendarEvents);
 
     const ds = {
       dataSourceOptions: { concept: undefined },

src/app/mock/calendar-events.json

@@ -0,0 +1,38 @@
+[
+    {
+        "date": "2016-01-01",
+        "name": "New Year's Day"
+    },
+    {
+        "date": "2016-12-25",
+        "name": "Christmas Day"
+    },
+    {
+        "date": "2016-12-26",
+        "name": "Boxing Day"
+    },
+    {
+        "date": "2025-01-01",
+        "name": "New Year's Day"
+    },
+    {
+        "date": "2025-12-25",
+        "name": "Christmas Day"
+    },
+    {
+        "date": "2025-12-26",
+        "name": "Boxing Day"
+    },
+     {
+        "date": "2026-01-01",
+        "name": "New Year's Day"
+    },
+    {
+        "date": "2026-12-25",
+        "name": "Christmas Day"
+    },
+    {
+        "date": "2026-12-26",
+        "name": "Boxing Day"
+    }
+]