Skip to main content
Version: Next 🚧

Agenda

Agenda lists events day by day, the schedule view of a calendar app. It opens at today, or at selectedDate, and scrolls there when that changes; as the user scrolls, onVisibleDateChange tells you the day at the top, so a calendar above it can follow. Put an ExpandableCalendar or a WeekStrip over it and the two stay in step.

It follows the design of each platform's own calendar:

  • iOS, like Calendar's list: a band for each day that sticks to the top while its events scroll under it, and rows with the start over the end, a colored bar and the title.
  • Material, like Google Calendar's schedule on Android: the weekday over the date beside each day's events, and a card per event filled with its color.
  • Web, like Google Calendar's schedule in a browser: the date and "NOV, MON" beside each day, and a compact row per event with a dot, the time and the title.
import { Agenda } from '@elik56a/react-native-pickers';
Loading…
<Agenda events={EVENTS} style={{ height: 420 }} />

Give it a height, or flex: 1 in a screen: the list scrolls inside it.

Try the props​

Platform
format
<Agenda events={events} />

With a calendar​

Keep the day in your state. The calendar sets it when a day is tapped, and the agenda scrolls there; the agenda sets it as the user scrolls, and the calendar follows. Neither scroll calls back the other: changing selectedDate yourself never fires onVisibleDateChange.

Loading…
<View style={{ height: 560 }}>
  <ExpandableCalendar value={day} onChange={setDay} markedDates={marks} />
  <Agenda events={EVENTS} selectedDate={day} onVisibleDateChange={setDay} style={{ flex: 1 }} />
</View>

A day with nothing on scrolls to the next day that has events. To list every day instead, showEmptyDays fills the days between the first and the last event with "No events".

Events​

Events are the same objects a Timeline draws: an id, a title, a start and an end, plus an optional color, subtitle and allDay, extended with your own fields as you like.

  • All-day events come first in their day, as "All day". A timed event that fills the whole day counts as all day too.
  • Over midnight, an event is listed on each day it's on, with that day's part of its times; one that ends at midnight stays on its own day.
  • Loading more: onEndReached fires as the end comes into view, and onRefresh with refreshing adds pull to refresh. ListHeaderComponent and ListFooterComponent go above and below the days.

Custom rows​

renderEvent draws an event's row from the same info as the timeline's: the event, its start and end on that day, allDay, the timeText, its colors and the theme. The row keeps its press and screen-reader label. renderDayHeader draws the day's band on iOS, or the date beside its events in Material and on the web, from { date, today, theme }.

<Agenda
  events={events}
  renderEvent={({ event, timeText }) => (
    <View style={{ padding: 12 }}>
      <Text style={{ fontWeight: '600' }}>{event.title}</Text>
      <Text>{timeText}</Text>
    </View>
  )}
/>

Props​

PropTypeDefaultDescription
eventsT extends ScheduleEvent[]—The events to list.
selectedDateDatetodayThe day scrolled to the top. Changing it scrolls there, to the next day with events if it has none.
onVisibleDateChange(date: Date) => void—Fires with the day at the top as the user scrolls.
showEmptyDaysbooleanfalseList the days between the first and the last event that have nothing on.
format'auto' | '12h' | '24h''auto'The clock the times are written on.
localestringdeviceDates and times.
onEventPress(event: T) => void—An event was tapped.
onEventLongPress(event: T) => void—An event was held.
renderEvent(info: ScheduleEventInfo<T>) => ReactNode—Fully custom event row.
renderDayHeader(info: ScheduleDayInfo) => ReactNode—Fully custom date: the band on iOS, the date beside the events elsewhere.
onEndReached() => void—Load more as the end comes into view.
onRefresh() => void—Pull to refresh.
refreshingbooleanfalseShows the refresh spinner.
ListHeaderComponent / ListFooterComponentReactElement—Above and below the days.
labelsPartial<{ allDay: string; noEvents: string }>EnglishThe words shown, for other languages.
styleStyleProp<ViewStyle>—Container style. Give it a height or flex: 1.
stylesSlotStyles<AgendaSlot>—container, dayHeader, dayHeaderText, date, event, eventTitle, eventText, emptyText.
themeDeepPartial<PickerTheme>—Theme override.
design'ios' | 'material' | 'web'from PickersProviderThe look to follow, over the provider's: iOS, Material or web.
testIDstring—Test ID.

Accessibility​

Each day's band or date is a header, such as "Monday, November 9" (the date beside the events in Material and on the web also reads the year). Each event is a button read as its title and time, such as "Lunch with Maya, 12:30 PM – 1:30 PM".

Related​