ExpandableCalendar

ExpandableCalendar provides a collapsible week/month calendar view with an integrated agenda list. Powered by react-native-calendars with theme integration.

Components

Component	Description
CalendarProvider	Context provider for calendar state
ExpandableCalendar	Collapsible calendar (week/month toggle)
AgendaList	Section list synced to calendar selection
WeekCalendar	Standalone week strip calendar

Usage

ExpandableCalendarExample.tsx

import { ExpandableCalendar, CalendarProvider, AgendaList } from '@masumdev/rn-ui';

const agendaItems = [
  { title: '2026-08-25', data: [{ name: 'Meeting', hour: '10:00' }] },
];

export function ExpandableCalendarExample() {
  return (
    <CalendarProvider date="2026-08-25">
      <ExpandableCalendar />
      <AgendaList
        sections={agendaItems}
        renderItem={({ item }) => <Text>{item.name}</Text>}
      />
    </CalendarProvider>
  );
}

Props API

ExpandableCalendar

Prop	Type	Default	Description
initialPosition	"open" | "closed"	"closed"	Initial calendar position (month or week view).
markedDates	Record<string, CalendarDayMarking>	—	Dates with markers/dots.
onDayPress	(date: DateData) => void	—	Callback when a day is pressed.
hideKnob	boolean	false	Hide the expand/collapse knob.

CalendarProvider

Prop	Type	Default	Description
date*	string	—	Initial selected date (YYYY-MM-DD format).
onDateChanged	(date: string) => void	—	Callback when the active date changes.