WickyNilliams
commented
2 months ago Hey this was a bug actually! I just published v0.5.3 with a fix.
Rather than custom properties, i would recommend using the available CSS Parts. They offer much more fine-grained control vs custom properties, since you can set any property you like, plus combine with pseudo-classes.
However there was a bug whereby the disallowed part was not added to the buttons, so you couldn't style them. With the latest changes you can easily customise like:
calendar-month::part(day):hover {
/* hover regular days */
}
calendar-month::part(disallowed):hover {
/* hover disallowed days */
}see an example here: https://codepen.io/WickyNilliams/pen/rNbPEjw
Cata1989
Summary: Currently, customization options for calendar buttons, especially disabled buttons, are limited. It would be beneficial to provide users with more control over button customization, particularly for disabled buttons. One suggested improvement is to move the hard-coded button hover style into a CSS variable within the host { ... } section. This would allow for easier customization from external sources.
Proposed Enhancement:
Move the hard-coded button hover style, such as button:hover:where(:not(:disabled)) { background: #0000000d; }, into a CSS variable. Define this CSS variable within the host { ... } section, like --button-hover-disabled: #0000000d;. By doing so, users can easily override this style by customizing the value of --button-hover-disabled externally, providing more flexibility and control.
Expected Benefits:
Enhanced customization options for calendar buttons, especially disabled buttons. Improved maintainability and ease of customization by moving hard-coded styles into CSS variables. Facilitated integration with external styling systems, allowing for seamless customization according to user preferences.
Request: Consider implementing this enhancement to provide users with more control and flexibility in customizing calendar buttons, ultimately enhancing the overall user experience.