Day triggers

DayGridViewDayTrigger, TimeGridViewColumnTrigger and TimelineViewDayTrigger jump from a day to another view. Pass calendar={calendar} and a registered view key; a click calls that instance's onNavigate with the view and the trigger's date.

Pass down the typed instance returned by useCalendar or createCalendar, so TypeScript checks view against its registered keys. The instance from useCalendarContext has erased view types and cannot.

• Your own onClick runs first. Call event.preventDefault() in it to skip the navigation.
• The default accessible name is "Go to" followed by the full date, in the provider's locale. Pass aria-label to replace it.

ExampleCopy Anchor Link

export const DayNumber = ({
  calendar,
  day,
  locked,
}: {
  calendar: DayCalendar;
  day: Calendar_DayGridDay<Booking>;
  locked: boolean;
}) => (
  <DayGridViewDayTrigger
    calendar={calendar}
    day={day}
    view='day'
    onClick={event => {
      // runs before the built-in navigation; preventing it keeps the current view
      if (locked) event.preventDefault();
    }}
  >
    {day.date.day}
  </DayGridViewDayTrigger>
);