现代且响应迅速的React时间轴组件。_JavaScript_SCSS_下载.zip

# ⚠️⚠️⚠️⚠️ HELP WANTED please email me [ahmad.ilaiwi@gmail.com](mailto:ahmad.ilaiwi@gmail.com) and we will setup some time to speak and see if you can help maintain this library. # React Calendar Timeline A modern and responsive React timeline component.  Checkout the [examples here](https://github.com/namespace-ee/react-calendar-timeline/tree/master/examples)! # Contents - [Getting Started](#getting-started) - [Usage](#usage) - [API](#api) - [Timeline Markers](#timeline-markers) - [Timeline Headers](#timeline-headers) - [FAQ](#faq) - [Contribute](#contribute) # Getting started ```bash # via yarn yarn add react-calendar-timeline # via npm npm install --save react-calendar-timeline ``` `react-calendar-timeline` has [react](https://reactjs.org/), [react-dom](https://reactjs.org/docs/react-dom.html), [`moment`](http://momentjs.com/) and [`interactjs`](http://interactjs.io/docs/) as peer dependencies. # Usage At the very minimum: ```jsx import Timeline from 'react-calendar-timeline' // make sure you include the timeline stylesheet or the timeline will not be styled import 'react-calendar-timeline/lib/Timeline.css' import moment from 'moment' const groups = [{ id: 1, title: 'group 1' }, { id: 2, title: 'group 2' }] const items = [ { id: 1, group: 1, title: 'item 1', start_time: moment(), end_time: moment().add(1, 'hour') }, { id: 2, group: 2, title: 'item 2', start_time: moment().add(-0.5, 'hour'), end_time: moment().add(0.5, 'hour') }, { id: 3, group: 1, title: 'item 3', start_time: moment().add(2, 'hour'), end_time: moment().add(3, 'hour') } ] ReactDOM.render( <div> Rendered by react! <Timeline groups={groups} items={items} defaultTimeStart={moment().add(-12, 'hour')} defaultTimeEnd={moment().add(12, 'hour')} /> </div>, document.getElementById('root') ) ``` # API _NB!_ All props need to be immutable. For example, this means if you wish to change the title of one of your items, please pass in a whole new items array instead of changing the title in the old array. [Here's more info.](http://reactkungfu.com/2015/08/pros-and-cons-of-using-immutability-with-react-js/) The component can take many props: ## groups Expects either a vanilla JS array or an immutableJS array, consisting of objects with the following attributes: ```js { id: 1, title: 'group 1', rightTitle: 'title in the right sidebar', stackItems?: true, height?: 30 } ``` If you use the right sidebar, you can pass optional `rightTitle` property here. If you want to overwrite the calculated height with a custom height, you can pass a `height` property as an int in pixels here. This can be very useful for categorized groups. ## items Expects either a vanilla JS array or an immutableJS array, consisting of objects with the following attributes: ```js { id: 1, group: 1, title: 'Random title', start_time: 1457902922261, end_time: 1457902922261 + 86400000, canMove: true, canResize: false, canChangeGroup: false, itemProps: { // these optional attributes are passed to the root <div /> of each item as <div {...itemProps} /> 'data-custom-attribute': 'Random content', 'aria-hidden': true, onDoubleClick: () => { console.log('You clicked double!') }, className: 'weekend', style: { background: 'fuchsia' } } } ``` The preferred (fastest) option is to give Unix timestamps in milliseconds for `start_time` and `end_time`. Objects that convert to them (JavaScript `Date` or `moment()`) will also work, but will be a lot slower. ## defaultTimeStart and defaultTimeEnd Unless overridden by `visibleTimeStart` and `visibleTimeEnd`, specify where the calendar begins and where it ends. This parameter expects a Date or moment object. ## visibleTimeStart and visibleTimeEnd The exact viewport of the calendar. When these are specified, scrolling in the calendar must be orchestrated by the `onTimeChange` function. This parameter expects a Unix timestamp in milliseconds. **Note that you need to provide either `defaultTimeStart/End` or `visibleTimeStart/End` for the timeline to function** ## buffer a number (default to 3) which represents the extra timeline rendered on right and lift of the visible area which the user will scroll through before the time rerenders. more explication in section [behind the scenes](#behind-the-scenes) Note: setting buffer to 1 will disable the scrolling on the timeline ## selected An array with id's corresponding to id's in items (`item.id`). If this prop is set you have to manage the selected items yourself within the `onItemSelect` handler to update the property with new id's and use `onItemDeselect` handler to clear selection. This overwrites the default behaviour of selecting one item on click. ## keys An array specifying keys in the `items` and `groups` objects. Defaults to ```js { groupIdKey: 'id', groupTitleKey: 'title', groupRightTitleKey: 'rightTitle', itemIdKey: 'id', itemTitleKey: 'title', // key for item div content itemDivTitleKey: 'title', // key for item div title (<div title="text"/>) itemGroupKey: 'group', itemTimeStartKey: 'start_time', itemTimeEndKey: 'end_time', } ``` ## className Additional class names as a string for the root Timeline element. ## sidebarWidth Width of the sidebar in pixels. If set to `0`, the sidebar is not rendered. Defaults to `150`. ## sidebarContent Everything passed here will be displayed above the left sidebar. Use this to display small filters or so. Defaults to `null`. ## rightSidebarWidth Width of the right sidebar in pixels. If set to `0`, the right sidebar is not rendered. Defaults to `0`. ## rightSidebarContent Everything passed here will be displayed above the right sidebar. Use this to display small filters or so. Defaults to `null`. ## dragSnap Snapping unit when dragging items. Defaults to `15 * 60 * 1000` or 15min. When so, the items will snap to 15min intervals when dragging. ## minResizeWidth The minimum width, in pixels, of a timeline entry when it's possible to resize. If not reached, you must zoom in to resize more. Default to `20`. ## lineHeight Height of one line in the calendar in pixels. Default `30` ## itemHeightRatio What percentage of the height of the line is taken by the item? Default `0.65` ## minZoom Smallest time the calendar can zoom to in milliseconds. Default `60 * 60 * 1000` (1 hour) __notes__: please note than second won't show up unless you change this to `60 * 1000` ## maxZoom Largest time the calendar can zoom to in milliseconds. Default `5 * 365.24 * 86400 * 1000` (5 years) ## clickTolerance How many pixels we can drag the background for it to be counted as a click on the background. Default `3` ## canMove Can items be dragged around? Can be overridden in the `items` array. Defaults to `true` ## canChangeGroup Can items be moved between groups? Can be overridden in the `items` array. Defaults to `true` ## canResize Can items be resized? Can be overridden in the `items` array. Accepted values: `false`, `"left"`, `"right"`, `"both"`. Defaults to `"right"`. If you pass `true`, it will be treated as `"right"` to not break compatibility with versions 0.9 and below. ## useResizeHandle Append a special `.rct-drag-right` handle to the elements and only resize if dragged from there. Defaults to `false` ### stackItems Stack items under each other, so there is no visual overlap when times collide. Can be overridden in the `groups` array. Defaults to `false`. Requires millisecond or `Moment` timestamps, not native JavaScript `Date` objects. ## traditionalZoom Zoom in when scrolling the mouse up/down. Defaults to `false` ## itemTouchSendsClick Normally tapping (touching) an item selects it. If this is set to true, a tap will have the same effe