calcite-date-picker-day: API for setting properties and themeing from calcite-date-picker or calcite-input-date-picker

jwasilgeo commented 2 years ago

Description

Is there an API currently available to set properties and, separately, change styles/themes of individual calcite-date-picker-days from the level of the parent calcite-date-picker or calcite-input-date-picker?

The goal is to let individual calcite-date-picker-day properties or styles/themes be data-driven and easily applied via the parent calcite-date-picker or calcite-input-date-picker APIs.

If not, I request a formal API enhancement, or clarified documentation. Thanks!

For a property example, I would want to set any number of arbitrary, individual days as disabled, as documented as a capability here: https://github.com/Esri/calcite-components/tree/v1.0.0-beta.74/src/components/calcite-date-picker-day#properties

As a rough and hacky example of what I could figure out on my own, today at v1.0.0-beta.74 I'd need to somehow hook into each month change event by the user (<left || right > user button click) when the new month gets rendered, and then try to access an individual calcite-date-picker-day in the shadow DOM to change its disabled property:
```
referenceToCalciteInputDatePickerParentComponent
  .shadowRoot.querySelector("calcite-date-picker")
  .shadowRoot.querySelector("calcite-date-picker-month")
  .shadowRoot.querySelectorAll("calcite-date-picker-day")
  // set them all as disabled for the sake of argument,
  // but we're interested in this being data-driven for just some of the individual dates
  .forEach((cdpd) => (cdpd.disabled = true));
```
As a style/theme example, I would want to change the individual background-color of a individual day to indicate to a user that there is some other attribute at play and they should pay special attention to that day. For example, in the calcite-*-date-picker UI, Friday the 13th would appear to have a background of hotpink or deepskyblue or some other custom styling, because reasons.

Acceptance Criteria

As a developer using calcite-date-picker or calcite-input-date-picker, I can affect properties and/or styles/themes of individual calcite-date-picker-days rendered in each month of the parent UI.

Or, restated by borrowing a line from the section above:

The goal is to let individual calcite-date-picker-day properties or styles/themes be data-driven and easily applied via the parent calcite-date-picker or calcite-input-date-picker APIs.

Relevant Info

No response

Which Component

Focused on: calcite-date-picker-day

Related to: calcite-date-picker and calcite-input-date-picker

Example Use Case

@esri/calcite-components@1.0.0-beta.74

Consider the following screenshot with desired behavior:

May 3rd, in blue: currently chosen date
May 4th, grayed out: disabled = true
May 5th, in hotpink: available as another choice that the user can click on, but custom styling indicates something unique about this day.

macandcheese commented 1 year ago

From triage discussion:

Allowing arrays of dates to be provided that can be styled in some way by the user via css vars.
Allow array of dates to be disabled
Use cases discussed: "rental availability" where some items may exist in a non-selectable state. "campsite booking" where some items may exist in a selectable state but need to be denoted in some way ("low inventory", etc.)
cc @ashetland @SkyeSeitz

geospatialem commented 1 year ago

Updating the time estimate to accommodate two requests, per discussion with @eriklharper:

Allowing an array of dates to be disabled: estimate-5
Color support: estimate-3
Total: estimate-8

geospatialem commented 1 year ago

Design will encompass a disabled color state prior to implementation and next steps.

SkyeSeitz commented 1 year ago

In addition to allowing arrays of dates to be disabled and allowing arrays of dates to be styled by the user via css vars, below shows the current day support to be built into Date Picker. Figma file specs

@macandcheese do you think current day support needs to be opt in?

github-actions[bot] commented 1 year ago

cc @geospatialem, @brittneytewks

geospatialem commented 3 weeks ago

Next steps, which may take place over multiple milestones depending on the discussions:

Internal discussions between design and engineering teams on the functionality of the API and Figma look and feel

Esri / calcite-design-system