Add data-date attribute to calendar month

[shabbyrobe]

I've got similar problems to the ones outlined in #54, where I'd like to be able to have different styles for each date based on an external condition.

I figured given the last comment on that thread indicates it might be tricky to get right, that it might take some time for a good solution to arrive for that. It might help in the meantime if there was a more reliable attribute on the calendar we could grab onto via the shadow root.

This PR adds a data-date="YYYY-MM-DD" attribute to each button in the calendar, such that you can script in your own styles as you please by committing some crimes against the shadow root, i.e.

// attach custom styles:
for (const cal of document.querySelectorAll('calendar-month')) {
  cal.shadowRoot.adoptedStyleSheets.push(customStyles);
}

// search the calendars for the specific date and add a custom class:
for (const cal of document.querySelectorAll('calendar-month')) {
  cal.shadowRoot.querySelector('[data-date="2024-01-01"]').className = 'yep';
}

I can sort of do all of this with the aria label already, but it doesn't have the year in it and may be subject to localisation issues. At least with an ISO date, I have a slightly more reliable thing I can grab on to.

The above demonstration code is pretty hacky, but this change allows the hacks to live entirely in my app, not cally, which I can live with as it does at least let me do what I need without having to ask too many compromises of cally in the near term, while a longer term solution is conceived in #54.

[WickyNilliams]

Thanks for this! Really appreciate anyone PRs.

But I would not advise this kind of approach. Shadow DOM is considered private and likely to change at any moment. It's too fragile. And even if you did add a class, it would not be selectable via CSS styles because the shadow DOM is isolated.

I would prefer that we offer a prop like getDateParts: (date: Date) => string (name tbd). This value then gets added to the existing set of parts on the button, which can be targeted by CSS.

Happy to accept a PR for that. If you want to make one let me know and I can offer some guidance :)