AgendaCalendar

And the row of marks is the whole difference. A strip of seven numbers is a date picker. A strip of seven numbers with marks under some of them is an agenda.

<AgendaCalendar events={[new Date(2026, 8, 7), new Date(2026, 8, 9)]} />

events is a list rather than a predicate, because a list is what a caller has: a month of events mapped to their dates. It is read by day, so the time each one carries is ignored, and it is turned into a set once per change rather than scanned per cell.

The cells are the Calendar's own style, resolved through calendarRecipe rather than a second table. A strip and a month showing two different discs for the same chosen day is what that sharing exists to prevent — and the two sit one above the other the moment a caller expands one into the other, which is what the chevron beside the title is usually for.

It steps by weeks. That is a different unit from the Calendar's month, so the state under it is different too: a layout="week" prop would have had to mean "and now month is a week", which is a prop that changes what another prop means.

Everything genuinely shared — the cell, the disc, the mark, the column headings, the date arithmetic — is shared. The API is not, because the two do not do the same thing.

All seven are on screen and all seven are choosable. A strip that greyed out the two days belonging to next month would be greying out days it is showing.

Only minValue / maxValue make a day inert. The chevrons go dead when the week they would reach has no selectable day in it — the Calendar's rule, one unit down.

A horizontal drag on AgendaCalendar.Week turns the week — left for the next, right for the previous — so the chevrons are a shortcut rather than the only way. The strip follows the finger a little and springs back; past ~48pt, or a fast flick, the week changes. A drag that would land on a week with no selectable day does nothing, exactly like the dead chevron.

A tap on a day never starts a drag, and a vertical drag is handed straight back to whatever scrolls the page. swipeable={false} turns the gesture off — and with it the react-native-gesture-handler requirement.

<AgendaCalendar
  value={day}
  onValueChange={setDay}
  week={week}
  onWeekChange={setWeek}
/>

Paging weeks is not choosing a day, for the reason calendar.md gives about months.

AgendaCalendar.TodayButton brings today's week on screen, closes any month or year row that is open, and chooses today — the same three things legacy's dialog did. A button that dropped you on the right week and left you to find the day would be half a button. select still honours the bounds, so an out-of-range today moves the strip without choosing.

It goes dead, and reads dead, only when there is nothing left for it to do: today's week is showing, the day strip is the view, and today is the chosen day. Page away, open a picker, or choose another day and it comes back to life.

The word is the caller's — "Today", "Aujourd'hui", "Hoy" — and R3 wraps a text child into the label.

const [view, setView] = useState<AgendaCalendarView>('week')

<AgendaCalendar value={day} onValueChange={setDay} view={view} onViewChange={setView}>
  <AgendaCalendar.Header>
    <PressableFeedback onPress={() => setView(v => (v === 'week' ? 'year' : 'week'))}>
      <AgendaCalendar.Title />
    </PressableFeedback>
    <AgendaCalendar.Nav>
      <AgendaCalendar.PreviousButton accessibilityLabel="Précédent" />
      <AgendaCalendar.TodayButton>Today</AgendaCalendar.TodayButton>
      <AgendaCalendar.NextButton accessibilityLabel="Suivant" />
    </AgendaCalendar.Nav>
  </AgendaCalendar.Header>
  {view === 'year' ? (
    <AgendaCalendar.YearPicker />
  ) : view === 'month' ? (
    <AgendaCalendar.MonthPicker />
  ) : (
    <>
      <AgendaCalendar.Weekdays />
      <AgendaCalendar.Week />
    </>
  )}
</AgendaCalendar>

view is a third piece of state, controlled the way value and week are. The pickers are rows in the strip's place, not a grid over it — they scroll sideways where the days were, the way the strip itself does. The walk is the Calendar's, one unit down: the title opens the years, a year opens that year's months, a month lands back on the week that holds it.

One pair of chevrons pages all three. PreviousButton / NextButton step whatever view is showing — a week, a month, or a year — and go dead when the unit they would reach has no selectable day in it. The caller reads view to render one of the three; the pickers only ever step it.

A week can straddle two. The fourth of seven is always in the majority month, and it is the only rule that does not call a week with six September days in it "August".

AgendaCalendar.Week takes a function, exactly as Calendar.Grid does and for the same reason: seven cells are generated from a date rather than written.

<AgendaCalendar.Week>
  {date => (
    <AgendaCalendar.Day key={date.getTime()} date={date}>
      <Text>{date.getDate()}</Text>
    </AgendaCalendar.Day>
  )}
</AgendaCalendar.Week>

useAgendaCalendar() is exported (R10) and carries the seven days, the chosen one, hasEvent, view / setView, and the moves — goByWeeks, goByMonths, goByYears, page (whichever the view shows), goToYear, goToMonthInYear, goToToday and select — plus isOnToday and isTodayResolved. Enough to write a strip of your own: names under the numbers, a count instead of a dot, a second mark in another colour. Outside an <AgendaCalendar> it throws by name.