Allow use of Indicator on days in Cally

[marknelissen]

I have been trying to integrate the Indicator component to display it on selected days in Cally.

Direct integration through @apply does not work, since indicator-item makes use of :where which cannot be combined with the ::part selector.

I think the best integration would be to be able to integrate into the .cally styling some custom parts that are styled to display the indicator component on the day. That way it would suffice to add this custom part through the getDayParts function to display the indicator. Not sure how to handle the color though.

[tevinch]

Cally’s getDayParts can supply your own parts for the native day buttons. Assign it on <calendar-date>, then style those parts on <calendar-month>:

await customElements.whenDefined("calendar-date");
const calendar = document.querySelector("calendar-date");
const marked = new Map([
  ["2026-10-07", "event-primary"],
  ["2026-10-21", "event-warning"],
]);
calendar.getDayParts = (date) => {
  const color = marked.get(date.toISOString().slice(0, 10));
  return color ? `has-event ${color}` : "";
};

calendar-month::part(day) {
  position: relative;
  height: 2.5rem;
  padding-bottom: .4rem;
}
calendar-month::part(event-primary) {
  --day-marker-color: var(--color-primary);
}
calendar-month::part(event-warning) {
  --day-marker-color: var(--color-warning);
}
calendar-month::part(has-event)::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  left: 50%;
  bottom: .2rem;
  transform: translateX(-50%);
  background: var(--day-marker-color);
  pointer-events: none;
}
calendar-month::part(has-event today)::after {
  background: var(--color-primary-content);
}
calendar-month::part(has-event selected)::after {
  background: var(--color-base-100);
}

This uses daisyUI’s theme colors directly. Today gets a contrasting dot against its primary fill; the selected-day rule comes last so selection keeps the appropriate contrast. Cally supplies UTC dates, so the full UTC date key also avoids timezone shifts or matching the same day number in another month.

The standalone example and explanation use Cally 0.9.2 and daisyUI 5.7.50. Chromium checks covered clicking marked dates repeatedly, clicking the dot, keyboard selection, month navigation, light/dark themes and two timezones. The marks are decorative; keep an event list or another accessible source of event details alongside the calendar. Other browser engines have not been checked.