Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 25 commits into from
Feb 22, 2023

Conversation

amandaejohnston
Copy link
Contributor

@amandaejohnston amandaejohnston commented Feb 9, 2023

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
Copy link

stackblitz bot commented Feb 9, 2023

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@github-actions github-actions bot added package: angular @ionic/angular package package: core @ionic/core package package: vue @ionic/vue package labels Feb 9, 2023
@amandaejohnston amandaejohnston marked this pull request as ready for review February 10, 2023 19:38
Copy link
Contributor

@sean-perkins sean-perkins left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

core/src/components/datetime/datetime.scss Outdated Show resolved Hide resolved
core/src/components/datetime/datetime.tsx Outdated Show resolved Hide resolved
core/src/components/datetime/datetime.tsx Show resolved Hide resolved
@amandaejohnston
Copy link
Contributor Author

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

core/src/components/datetime/datetime.tsx Show resolved Hide resolved
core/src/components/datetime/datetime.tsx Outdated Show resolved Hide resolved
core/src/components/datetime/datetime.tsx Show resolved Hide resolved
core/src/components/datetime/datetime.tsx Outdated Show resolved Hide resolved
core/src/components/datetime/datetime.tsx Outdated Show resolved Hide resolved
core/src/components/datetime/datetime.tsx Outdated Show resolved Hide resolved
core/src/components/datetime/datetime.scss Outdated Show resolved Hide resolved
core/src/components/datetime/datetime.tsx Show resolved Hide resolved
core/src/components/datetime/datetime-interface.ts Outdated Show resolved Hide resolved
core/src/components/datetime/datetime.scss Outdated Show resolved Hide resolved
Copy link
Contributor

@liamdebeasi liamdebeasi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job!

@seatechdev
Copy link

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

@creatxrgithub
Copy link

creatxrgithub commented May 15, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: angular @ionic/angular package package: core @ionic/core package package: vue @ionic/vue package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants