Nearsighted Prank Master

    react-weekly-table
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    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

    Install

    npm i react-weekly-table

    DownloadsWeekly Downloads

    10

    Version

    1.1.1

    License

    Apache-2.0

    Unpacked Size

    95.5 kB

    Total Files

    69

    Last publish

    Collaborators

    • imn-d