BHP-DevHub / React Timeline 9000
Licence: mit
React Timeline
Stars: ✭ 184
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Timeline 9000
React Timeline Gantt
A react Timeline component with virtual rendering
Stars: ✭ 347 (+88.59%)
Mutual labels: scheduler, timeline
react-gantt-schedule-timeline-calendar
React Gantt Schedule Timeline Calendar component wrapper for gantt-schedule-timeline-calendar [ react gantt, gantt, react gantt chart, react schedule, react timeline, react calendar, gantt, schedule, scheduler, timeline, calendar, react gantt chart ]
Stars: ✭ 47 (-74.46%)
Mutual labels: timeline, scheduler
Gantt Schedule Timeline Calendar
Gantt Gantt Gantt Timeline Schedule Calendar [ javascript gantt, js gantt, projects gantt, timeline, scheduler, gantt timeline, reservation timeline, react gantt, angular gantt, vue gantt, svelte gantt, booking manager ]
Stars: ✭ 990 (+438.04%)
Mutual labels: scheduler, timeline
angular-gantt-schedule-timeline-calendar-example
Angular gantt-schedule-timeline-calendar usage example
Stars: ✭ 15 (-91.85%)
Mutual labels: timeline, scheduler
Ej2 Angular Ui Components
Syncfusion Angular UI components library offer more than 50+ cross-browser, responsive, and lightweight angular UI controls for building modern web applications.
Stars: ✭ 159 (-13.59%)
Mutual labels: scheduler
Scenejs
🎬 Scene.js is JavaScript & CSS timeline-based animation library
Stars: ✭ 2,019 (+997.28%)
Mutual labels: timeline
Post Scheduler
Schedule posts & content updates for static websites (Jekyll, Hugo, Gatsby, Phenomic etc)
Stars: ✭ 184 (+0%)
Mutual labels: scheduler
Jquery.timeline
You can easily create the horizontal timeline with two types by using this jQuery plugin.
Stars: ✭ 179 (-2.72%)
Mutual labels: timeline
Ej2 React Ui Components
Syncfusion React UI components library offer more than 50+ cross-browser, responsive, and lightweight react UI controls for building modern web applications.
Stars: ✭ 166 (-9.78%)
Mutual labels: scheduler
Phive Queue
$queue->push('I can be popped off after', '10 minutes');
Stars: ✭ 161 (-12.5%)
Mutual labels: scheduler
Kvkcalendar
A most fully customization calendar and timeline library for iOS 📅
Stars: ✭ 160 (-13.04%)
Mutual labels: timeline
Ej2 Vue Ui Components
Syncfusion Vue UI component library offer more than 50+ cross-browser, responsive, and lightweight vue UI controls for building modern web applications.
Stars: ✭ 182 (-1.09%)
Mutual labels: scheduler
Covid 19 Timeline
以 社会学年鉴模式体例规范地统编自2019年末起新冠肺炎疫情进展的时间线。
Stars: ✭ 1,887 (+925.54%)
Mutual labels: timeline
React Timeline 9000
A performance focused timeline component in react
Build Status
Demo
Documentation
Getting Started
| Action | Command |
|---|---|
| Build | $ make |
| Test |
$ make test or $ make test-watch
|
| Run dev server | $ make run |
- Add
import react-timeline-9000/lib/style.css(or use your own styles based on this file)
Contributing
Feel free to make a PR :)
Interaction
Default interaction for multiple selection is largely governed by the leading item, which is defined as the item that is directly interacted with when multiple items are selected.
Dragging
All items will move by the same horizontal delta and row changes will be calculated by the row delta of the leading item
Resizing
All items will gain the resize delta from the leading item.
Overriding the default behaviour
TBA
onInteraction(type, changes, leadTimeDelta, leaderGroupDelta,selectedItems)
Props Summary
See http://bhp-react-timeline-9k.s3-website-ap-southeast-2.amazonaws.com/docs for detailed docs
Props
| Name | Default | Description |
|---|---|---|
| groupOffset | ||
| startDate | ||
| endDate | ||
| snapMinutes | ||
| showCursorTime | ||
| cursorTimeFormat | ||
| itemHeight | ||
| timelineMode | ||
| timebarFormat | ||
| itemRenderer | ||
| groupRenderer | ||
| shallowUpdateCheck | False | If true timeline will try to minimize re-renders . Set to false if items don't show up/update on prop change |
| forceRedrawFunc | () => False | Function called when shallowUpdateCheck==true. If returns true the timeline will be redrawn. If false the library will decide if redrawing is required |
Data
| Name |
|---|
| items |
| groups |
| selectedItems |
Callbacks
| Name |
|---|
| onItemClick |
| onItemDoubleClick |
| onItemContext |
| onInteraction |
| onRowClick |
| onRowContext |
| onRowDoubleClick |
| onItemHover |
| onItemLeave |
Styling
- View
src/style.cssfor styling examples. - For the default styles, import
react-timeline-9000/lib/style.css
Default Z-indexes
| Item | Index |
|---|---|
| Row Layers | 1 |
| Vertical markers | 2 |
| Timeline items | 3 |
| Timeline items when dragging/resizing | 4 |
| Selection box (for multi-select) | 5 |
| Group column | 6 |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].