react-weekly-table

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