How to extend ion-datetime's Datetime Highlight interface

ferreirajose · September 3, 2024, 1:12pm

It would be possible to extend the DatetimeHighlight interface, and add a new property to the ion-datime DatetimeHighlightStyle interface to allow adding an option, e.g.: border

In the current scenario it only accepts textColor and backgroundColor.

I ask because I need to create a custom calendar with the following events:

Vacation
Event in the month
Current date
Vacation + Current date
Vacation + Events

Below is the example

I tried to use this approach here

highlightedDates: DatetimeHighlight[] = [
    {
      date: '2024-08-09',
      textColor: '#000',
      backgroundColor: '#FFCFAB',
      border: '1px solid red'
    },
    {
      date: '2024-08-10',
      textColor: '#000',
      backgroundColor: '#FFCFAB',
    },
    {
      date: '2024-08-11',
      textColor: '#000',
      backgroundColor: '#FFCFAB',
    }
  ];

  ngAfterViewInit(): void {
    timer(300).subscribe(() => {
      const ionDatetime: DocumentFragment = this.calendar?.nativeElement.shadowRoot;
      if (ionDatetime) {
        const dateElement = ionDatetime.querySelector<HTMLButtonElement>(
          'button.calendar-day[data-day="9"][data-month="8"][data-year="2024"]'
        );


        if (dateElement) {
          dateElement.style.border = '2px solid #003D67'; 
        }
      }

    });

  }

  <ion-datetime #calendar
      presentation="date"
      size="cover"
      [multiple]="true"
      [highlightedDates]="highlightedDates">
    </ion-datetime>

However, this approach is generating an error, as the style is applied to the dates in the period requested in this example 2024/08/09.

Would it be possible to extend the DatetimeHighlightStyle interface to support this border property directly, or is there a recommended approach for achieving this level of customization within IonDatetime?