New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

allow custom day styles #64

Open

WickyNilliams wants to merge 2 commits into main from feature/custom-css-parts

Owner

WickyNilliams commented Sep 22, 2024 •

edited

Loading

adds new prop getPartsForDate: (date: Date) => string
this can be used for adding a custom CSS part for any day that gets rendered
css parts are selectable outside of shadow dom, enabling custom styles per day

doesn't quite solve #54, but does improve the situation

example:

<style>
calendar-month::part(available) {
  background: green;
}
</style>

<calendar-date>
  <calendar-month></calendar-month>
</calendar-date>

<script>
const available = ["2024-09-22", "2024-09-23", "2024-09-24"]
calendar.getPartsForDate = date => available.includes(toISOString(date)) ? "available" : ""
</script>

TODO

docs
decide final naming


          add support for custom date parts

4260e57

WickyNilliams mentioned this pull request

Add data-date attribute to calendar month #59

Closed

WickyNilliams changed the title ~~add support for custom date parts~~ allow custom day styles


          add docs

0d170b9

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet