react-weekly-table
v1.1.1
Published
React weekly scheduler <br/> By default build time ranges for a week, supports up to 31 days <br/> Can work with different timezones, data always return to UTC+0
Downloads
8
Readme
WEEKLY-TABLE
React weekly scheduler By default build time ranges for a week, supports up to 31 days Can work with different timezones, data always return to UTC+0
Try Demo
NPM package
Quick Start
Parent object must have sizing and relative
prop
Other input props describing by SchedulerInputProps
import React from 'react';
import Scheduler from './Scheduler';
const ref = useRef(null);
<div style={{ width: 1000, heigth: 600, position: 'relative' }} ref={ref}>
<Scheduler parentRef={ref} />
</div>;
About
- react and react-dom ^17.0.2 is a peerDependencies
- component uses PointerLock API
- no prod deps, no polyfills
- tested on latest Chrome-based and Firefox
- component DON'T support controlled state
- don't uses a dates and datetimes
Usage
Recommended to use React.lazy
for component
const Scheduler = React.lazy(() => import('react-weekly-table'));
If you need load state from a database you must use two useState hooks
To clear area pass empty array to defaultValue
const [initValue, setInitValue] = useState<ScheduleGroup[]>([]);
const [output, setOutput] = useState<ScheduleGroup[]>([]);
const clearArea = () => setInitValue([]);
<Scheduler parentRef={ref} defaultValue={initValue} onChange={(values) => setOutput(values)} />
Changing blocks colors by BlockColorsProps
<Scheduler
parentRef={ref}
blockColors={{
common: '#ff5722',
temp: '#c6a700',
draw: '#ff8a50',
hover: '#ff3d00',
}}
/>
Changing sizes of rows and columns headers
<Scheduler
parentRef={ref}
headerHeightProp={80}
helperWidthProp={80}
bottomHeightProp={20}
/>
Changing columns length and descriptions by SchedulerColumnsProps
Note: short field not implemented right now, but it's required
weight - bit mask, your columns must guarantee number sequence (2^0, 2^1, 2^2, ...)
import { schedulerColumns } from 'react-weekly-table';
const myColumns = [{full: 'Name1', short: 'n1', weight: 128}, {full: 'Name2', short: 'n2', weight: 256}]
const extraColumns = [...schedulerColumns].concat(myColumns)
<Scheduler
parentRef={ref}
columns={extraColumns}
/>;
Changing rows descriptions by string[]
import { schedulerRows } from 'react-weekly-table';
<Scheduler
parentRef={ref}
rows={['time1', 'time2', 'time3']}
/>;
We have hotkeys
- delete or backspace when block is hovered
- ctrl+z undo history
See demo folder for examples Default css located also there
Scripts
- build - integration build (as react component)
- demo:prod - demonstration build
- serve - dev server
- test - run tests