Ability to customize date rendering

[Olivierko]

Some calendars offer the possibility to customize the rendering of of a single date by adding additional meta data such as price, availability etc.

Is this something that is planned to be implemented into cally?

[WickyNilliams]

Thanks for creating the issue. As you say it's fairly common for booking calendars. It is something I'd like to add eventually. But I think it's one of the trickier features to get right, so I've been putting it off.

Will leave this open to track the feature

[mashaal]

A modifier similar to isDateDisallowed could be helpful for this too?

isDateModified = (date) => {
  if (soldOut(date)) return "sold-out"
  if (sellingFast(date)) return "selling-fast"
}

The function could include any custom business logic required, and whatever is returned could be added to the date as a class or data-attribute?

[WickyNilliams]

@mashaal I don't think a data attribute is a good idea, because you can't style it from the outside. It's essentially inaccessible without reaching into the shadow dom, which is similar to modifying private state - inadvisable.

Maybe it could return CSS parts, then it can be easily styled. That is at pretty easy to implement and opens up arbitrary styles per date

[SalahAdDin]

I'm our case we need something similar like this:

[WickyNilliams]

@SalahAdDin as for the colour, that is possible with the existing CSS Parts for calendar-month eg day-6 and day-0. See https://wicky.nillia.ms/cally/components/calendar-month/#css-parts

Relevant PR #83

As for the day names, that's also possible with format-weekday="short" on calendar-date etc

Relevant PR #69

[svenjacobs]

Hello, I came across this nice Web component and want to use it to create a calendar where customers can book appointments. I'm looking for a way to style specific dates – like today 2025-07-21 – differently. For example I might want to gray out dates that are already booked or change the background and text color of a specific date to highlight cheaper prices or whatever. Is this possible?

Cally version 0.8.0.

[fnarvaez-airmiles]

@SalahAdDin as for the colour, that is possible with the existing CSS Parts for calendar-month eg day-6 and day-0. See https://wicky.nillia.ms/cally/components/calendar-month/#css-parts

Relevant PR #83

As for the day names, that's also possible with format-weekday="short" on calendar-date etc

Relevant PR #69

What about years next to each month, is there a way to modify header to get that?

[svenjacobs]

Hello, I came across this nice Web component and want to use it to create a calendar where customers can book appointments. I'm looking for a way to style specific dates – like today 2025-07-21 – differently. For example I might want to gray out dates that are already booked or change the background and text color of a specific date to highlight cheaper prices or whatever. Is this possible?

Sorry I missed the reference of PR #64. So this seems to be possible 🙌🏼

[WickyNilliams]

@svenjacobs yep, that should allow you to do what you want! You can also use isDateDisallowed to grey out fully booked days and make them non-selectable.

@fnarvaez-airmiles here is the issue to track that functionality #25