feat: add border property to highlightedDates styles in Datetime

[ferreirajose]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

The Datetime Highlight Style type should accept one more item to be able to customize the calendar with highlighted dates.

Describe the Use Case

Aqui esta um exemplo pode isso poderia ser aplicado, para cada evento no mês ser possivel realizar esse tipo de customização

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

Describe Preferred Solution

Since the DatetimeHighlightStyle type already has 2 properties that allow you to customize highlighted dates, the suggestion would be to add a new border property that would be used as follows, for example:

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

Describe Alternatives

No response

Related Code

Here is a suggestion

export type DatetimeHighlightStyle =
  | {
      textColor: string;
      backgroundColor?: string;
      border?: string;
    }
  | {
      textColor?: string;
      backgroundColor: string;
      border?: string;
    };


return (
              <div class="calendar-day-wrapper">
                <button
                  ref={(el) => {
                    if (el) {
                      el.style.setProperty('color', `${dateStyle ? dateStyle.textColor : ''}`, 'important');
                      el.style.setProperty('border', `${dateStyle ? dateStyle.border : ''}`, 'important');
                      el.style.setProperty(
                        'background-color',
                        `${dateStyle ? dateStyle.backgroundColor : ''}`,
                        'important'
                      );
                    }
                  }}
                  .....
    );
  }

Additional Information

No response

[ferreirajose]

The changes needed for the new feature

1 - datetime-interface.ts

export type DatetimeHighlightStyle =
  | {
     ...
      border?: string;
    }
  | {
     ...
      border: string;
    };

  2 - datetime.tsx
  return (
              <div class="calendar-day-wrapper">
                <button
                  ref={(el) => {
                    if (el) {
                      el.style.setProperty('color', `${dateStyle ? dateStyle.textColor : ''}`, 'important');
                      el.style.setProperty('border', `${dateStyle ? dateStyle.border : ''}`, 'important');
                      el.style.setProperty(
                        'background-color',
                        `${dateStyle ? dateStyle.backgroundColor : ''}`,
                        'important'
                      );
                    }
                  }}
                  .....
    );
  }
  
  3 - datetime.e2e.ts
   
       test('should render highlights correctly when using an array', async ({ page }) => {
      const datetime = page.locator('ion-datetime');

      await datetime.evaluate((el: HTMLIonDatetimeElement) => {
        el.highlightedDates = [
          {
            date: '2023-01-01', // ensure selected date style overrides highlight
            textColor: '#800080',
            border: '1px solid #000',
            backgroundColor: '#ffc0cb',
          },
          {
            date: '2023-01-02',
            textColor: '#b22222',
            border: '1px solid #000',
            backgroundColor: '#fa8072',
          },
          {
            date: '2023-01-03',
            textColor: '#0000ff',
            backgroundColor: '#add8e6',
          },
        ];
      });
      ...
    });

4 - state.ts
    ........
      return {
      textColor: matchingHighlight.textColor,
      backgroundColor: matchingHighlight.backgroundColor,
      border: matchingHighlight.border,
    } as DatetimeHighlightStyle;
      ........