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?

[ntorrey]

I came here to request this exact feature! I need to display multiple date ranges each with it's own color and styling (for example, I style the first/last dates of the range differently from the dates in the middle).

I currently use the Angular material datepicker for this feature (https://material.angular.io/components/datepicker/overview#datepicker-date-class). They utilize a "dateClass" method which runs for each individual date and applies a custom class based on whatever logic you want. The downside to their feature is that since it applies a class, I need to hard code the classes (unless there is a way to dynamically load css that I don't know about, which is very possible). It would be nicer if there were a way to apply either classes or styles to each date based on some logic.

[Joep-DDQ]

Somewhat unrelated but hoping someone can point me in the right direction. I somehow messed up the css for the datetimepicker, but can't find where to restore it. I see that the class for the day button is calendar-day but in which file is this normally stored?

[ZachLHelms]

Also somewhat related, being able to change the size of the selector would be beneficial, and i can't find documentation on that ability. Example of what I'm running into:

Where my selector is covering up adjacent dates because im using the calendar in a narrow area.

[aparajita]

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.

@liamdebeasi How do envision setting the CSS for a specific button's shadow parts? Adding a cssClass property to DatetimeHighlightStyle?

[loyaj]

I'm having this issue, too. My specific use case is changing the border-radius of the circular highlight on the selected date(s) so that it's a rounded rectangle rather than a circle. Having shadow parts for this would work nicely.

[loyaj]

After working further with the datetime component, I too am needing to specify the font properties for the numbers in the grid (like font-size and font-weight). Again, shadow parts for the individual date buttons would work nicely for this.

Also, could we have a shadow part or css property for changing the size of the chevrons we use to navigate to the next/previous month (in the upper-right corner)? Compared to the other buttons in my interface, these buttons are huge and I need a way to make them smaller.

[aparajita]

@liamdebeasi I think the simplest solution would be to add a style property to DatetimeHighlightStyle. That would give us complete control.

[brandyscarney]

Thank you for the issue! This has been resolved by 79b005d. It will be in the 7.4 release. Example usage will be available in the datetime docs after the release is published.

[aparajita]

@brandyscarney Unless I'm missing something, this solution is global to the entire calendar, and does not allow us to style different days in different ways.

[liamdebeasi]

The original request was to expose a way to style the days in the calendar grid. We also added a way to style the selected days as well as today's date. If you want to customize specific days (regardless of today/selected state) then the highlightedDates API should be used.

[aparajita]

Unfortunately highlightedDates is extremely limited. Here's the interface:

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

No control over any other css properties!

[liamdebeasi]

That's intentional. highlightedDates allows developers to call out notable dates in the calendar not change the shape of specific calendar days. Our focus is on providing tools so developers can customize datetime in a consistent way.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.