{"library":"react-calendar-timeline","title":"React Calendar Timeline","description":"react-calendar-timeline is a flexible and highly customizable React component designed for displaying and interacting with items on a horizontal timeline. It supports features such as drag-and-drop, resizing, zooming, and extensive custom rendering capabilities for both items and groups. The package is currently under active development, with the 0.30.0-beta series representing a significant modernization effort. While 0.28.0 is identified as the last stable release, the beta stream, initiating with a full rewrite to TypeScript and an update to React 18+, is the primary focus for continuous improvements. It leverages Vite for bundling and relies on `interactjs` for its robust interaction model. Key differentiators include its highly customizable UI, sophisticated interaction handling, and recent performance and stability enhancements, such as scroll jank fixes and native ResizeObserver integration.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-calendar-timeline"],"cli":null},"imports":["import Timeline from 'react-calendar-timeline'","import { TimelineMarkers, TodayMarker, CursorMarker, CustomMarker } from 'react-calendar-timeline'","import { TimelineHeaders, SidebarHeader, DateHeader } from 'react-calendar-timeline'","import type { ReactCalendarTimelineProps } from 'react-calendar-timeline'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport dayjs from 'dayjs';\nimport Timeline, { TimelineHeaders, SidebarHeader, DateHeader, TodayMarker } from 'react-calendar-timeline';\n\ninterface MyItem {\n  id: number;\n  group: number;\n  title: string;\n  start_time: dayjs.Dayjs;\n  end_time: dayjs.Dayjs;\n}\n\ninterface MyGroup {\n  id: number;\n  title: string;\n}\n\nconst groups: MyGroup[] = [\n  { id: 1, title: 'Group One' },\n  { id: 2, title: 'Group Two' }\n];\n\nconst items: MyItem[] = [\n  { id: 1, group: 1, title: 'Item 1', start_time: dayjs().add(-1, 'hour'), end_time: dayjs().add(1, 'hour') },\n  { id: 2, group: 2, title: 'Item 2', start_time: dayjs().add(-3, 'hours'), end_time: dayjs().add(-1, 'hour') },\n  { id: 3, group: 1, title: 'Item 3', start_time: dayjs().add(2, 'hours'), end_time: dayjs().add(4, 'hour') }\n];\n\nconst TimelineExample: React.FC = () => {\n  const defaultTimeStart = dayjs().add(-12, 'hour').toDate();\n  const defaultTimeEnd = dayjs().add(12, 'hour').toDate();\n\n  return (\n    <Timeline\n      groups={groups}\n      items={items}\n      defaultTimeStart={defaultTimeStart}\n      defaultTimeEnd={defaultTimeEnd}\n      canMove={true}\n      canResize={'right'}\n      canChangeGroup={true}\n    >\n      <TimelineHeaders className=\"sticky\">\n        <SidebarHeader>\n          {({ get}) => {\n            return <div {...get('sidebarProps')}>My Custom Sidebar</div>;\n          }}\n        </SidebarHeader>\n        <DateHeader unit=\"primaryHeader\" />\n        <DateHeader />\n      </TimelineHeaders>\n      <TodayMarker />\n    </Timeline>\n  );\n};\n\nexport default TimelineExample;\n","lang":"typescript","description":"This quickstart demonstrates a basic `react-calendar-timeline` setup with two groups, three items, and custom headers. It showcases initial rendering, basic interaction (move, resize, change group), and marker usage within a TypeScript React component.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}