TimelineCalendar

TimelineCalendar renders a day/week schedule timeline with hour lanes and packed event blocks. Ideal for scheduling and calendar app interfaces.

Usage

TimelineExample.tsx

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

const events = [
  {
    start: '2026-08-25 09:00',
    end: '2026-08-25 10:30',
    title: 'Team Standup',
    summary: 'Daily sync meeting',
    color: '#6366F1',
  },
];

export function TimelineExample() {
  return (
    <CalendarProvider date="2026-08-25">
      <TimelineCalendar events={events} />
    </CalendarProvider>
  );
}

Props API

Prop	Type	Default	Description
events*	TimelineEventProps[]	—	Array of events to display on the timeline.
start	number	0	Start hour of the timeline (0-23).
end	number	24	End hour of the timeline (0-24).
onEventPress	(event: TimelineEventProps) => void	—	Callback when an event is pressed.
onBackgroundLongPress	(time: string) => void	—	Long press on empty time slot.

TimelineEventProps

Prop	Type	Default	Description
start*	string	—	Event start datetime (YYYY-MM-DD HH:mm).
end*	string	—	Event end datetime (YYYY-MM-DD HH:mm).
title*	string	—	Event title.
summary	string	—	Event description.
color	string	—	Event background color.