feat(datetime): add ability to specify custom colors for specific dates

[averyjohnston]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Developers have no way of highlighting specific days on the calendar picker with custom styles.

Issue URL: Resolves #25832

What is the new behavior?

Adds a new property, highlightedDates, which allows certain dates in the calendar view to be styled with custom text and/or background colors. This can be in the form of either an array of specific dates and their colors, or a callback that takes an ISO string and returns the colors to use.

As a side effect, all styles around focused/selected/"today" dates have been consolidated into the new .calendar-day-highlight element. A new element was necessary in order to programmatically apply background colors, since inline styles can't be used with pseudo-elements.

Note that this feature does not include the ability to show details about events associated with highlighted dates, such as birthdays or scheduled meetings. This is intentional as ion-datetime is only intended to concern itself with date selection, and any additional context should be an application-level detail provided in a separate UI.

Playgrounds/docs updates are made in a separate PR: ionic-team/ionic-docs#2769

Does this introduce a breaking change?

• Yes
• No

Other information

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[sean-perkins]

Small recommended changes, but this feature looks great testing locally. Nice work!

[averyjohnston]

Docs PR created: ionic-team/ionic-docs#2769

[liamdebeasi]

Great job!

[seatechdev]

Just looked at the new release. It is amazing! Thanks for adding this so quickly.

[creatxrgithub]

its docs: https://ionicframework.com/docs/api/datetime#highlighting-specific-dates

it seems that it has only two properties "textColor" and "backgroundColor".

{
          date: '2023-01-10',
          textColor: '#09721b',
          backgroundColor: '#c8e5d0',
},

is it possible to attach text? so that i could do :
#26361
or
#25832

[ChanakaWeerasinghe]

@averyjohnston @seatechdev @creatxrgithub @sean-perkins @liamdebeasi

its docs: https://ionicframework.com/docs/api/datetime#highlighting-specific-dates

it seems that it has only two properties "textColor" and "backgroundColor".

{
          date: '2023-01-10',
          textColor: '#09721b',
          backgroundColor: '#c8e5d0',
},
is it possible to attach text? so that i could do :
https://github.com/ionic-team/ionic-framework/issues/26361
or
https://github.com/ionic-team/ionic-framework/issues/25832