feat: datetime, expose calendar grid buttons for styling

[phyr0s]

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

This issue #24963 is closed but ion-datetime hasn't got properties to edit css #24963

In that issue there is one code pen -> https://codepen.io/liamdebeasi/pen/YzYWBgV but it's not possible to change all colors.

For example if i want this style with the text in one color (white) and background selected (green) it's not possible to customize

Font size, bold, or change disabled styles (for one days or more days) it's not possible

Describe the Use Case

Should allow to customize color, background color, font size, font weight, for all items (selected, unselected, disabled, selection arrows)

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[GusLAN]

I have the same problem... It's important for me to cutomize the component.

[liamdebeasi]

Thanks for the issue. Can you help me understand the use case for each of the customizations you need as well as what you have tried already? Most of the customizations listed here can be achieved by modifying the Ionic theme. Here is an example: https://ionic-docs-okx99ne93-ionic1.vercel.app/docs/api/datetime#theming

Datetime is a tricky component to open up for customization given how complex it is. As a result, we are trying to prioritize a consistent user experience. However, there are certainly areas that we should open up for more customization.

[phyr0s]

@liamdebeasi try to change font size of the numbers or create day selector with custom color. Only can change the background-color but not the color of the number

[liamdebeasi]

Thanks! It sounds like a majority of the styling needs here revolve around the buttons in the calendar grid. I think it makes sense to expose these buttons with potentially ways of styling based on state (selected, today, disabled, etc).

One idea is to expose one or more CSS Shadow Parts. This will give developers the flexibility to apply any style to the individual buttons without disrupting the overall layout of the calendar grid.

[phyr0s]

@liamdebeasi css shadow parts will be perfect solution.

[balaji-sasikumar]

@liamdebeasi any updates on this feature request?