# react-week-scheduler

> simple graphical weekly scheduler component with drag/expand functionality

Latest version **0.1.13** (published 2017-10-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-week-scheduler
pnpm add react-week-scheduler
yarn add react-week-scheduler
bun add react-week-scheduler
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.13 |
| Published | 2017-10-15 |
| First published | 2016-12-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | William Leskovec |
| Maintainers | wrleskovec |

## Links

- npm: https://www.npmjs.com/package/react-week-scheduler
- Repository: https://github.com/wrleskovec/react-week-scheduler
- Homepage: https://github.com/wrleskovec/react-week-scheduler#readme
- Issues: https://github.com/wrleskovec/react-week-scheduler/issues
- npm.io page: https://npm.io/package/react-week-scheduler

## Dependencies (2)

- [color](https://npm.io/package/color.md) ^1.0.3
- [lodash](https://npm.io/package/lodash.md) ^4.17.4

## Recent versions

- 0.1.13 (latest) — 2017-10-15
- 0.1.12 — 2017-02-14
- 0.1.11 — 2017-02-13
- 0.1.10 — 2016-12-31
- 0.1.9 — 2016-12-21
- 0.1.8 — 2016-12-20
- 0.1.7 — 2016-12-20
- 0.1.6 — 2016-12-20
- 0.1.5 — 2016-12-20
- 0.1.4 — 2016-12-20
- 0.1.3 — 2016-12-20
- 0.1.2 — 2016-12-20
- 0.1.1 — 2016-12-19
- 0.1.0 — 2016-12-19

## README

# react-week-scheduler
> responsive graphical weekly scheduler component with drag/expand functionality to fill time blocks

## Install

```console
$ npm install react-week-scheduler
```

## Usage

```js
import WeeklyScheduler from 'react-week-scheduler';
import 'react-week-scheduler/react-week-scheduler.css';
```

### Properties

```js
return (
  <div>
    <WeeklyScheduler
      defaultEvent={startingDefault} selectedEvent={blockingEvent} events={eventList}
      currentSchedule={currentSchedule}
      ref={(scheduler) => { this.scheduler = scheduler; }}
    />
  </div>
);
```
Event objects follow the format: { event: 'myEventName', color '#999'}. Any format of CSS color string including hsl should be valid.

`defaultEvent` - event that by default will fill the week

`selectedEvent` - default event selected for filling scheduler

`events` - array of events to select from to fill scheduler

`currentSchedule` - 7 x 96 timeblock matrix corresponding to 7 weekdays and 96 15-minute blocks per day. Stores Event objects.

### Accessing Scheduler state

To access and return current Scheduler state just use a `ref` callback:

  `ref={(scheduler) => { this.scheduler = scheduler }}`

Current timeblock matrix will be stored in `this.scheduler.state.days` corresponding to above ref

##Demo

[https://wrleskovec.github.io/react-week-scheduler/](https://wrleskovec.github.io/react-week-scheduler/)

---
_Source: https://npm.io/package/react-week-scheduler · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._