@maximeparriaux/react-timetable

Highly customizable timetable React component

Usage no npm install needed!

<script type="module">
  import maximeparriauxReactTimetable from 'https://cdn.skypack.dev/@maximeparriaux/react-timetable';
</script>

README

react-timetable

Travis npm package Coveralls

React component that implement timetable logic.

Notice

PROJECT IN PROGRESS Actual release is more or less stable. This is not production ready yet.

Installation

NPM
npm install --save @maximeparriaux/react-timetable
Yarn
yarn add @maximeparriaux/react-timetable

API

This component is based on templated inheritance.

// @flow

export {
    TimeTable : React.Component<ViewProps>,
    TimeEvent<T: ITimeEvent> implements Renderable,
    AbstractView : React.Component<ViewProps> implements IView,
    List : AbstractView,
    Table : AbstractView,
    Pagination : React.Component<>
};


// An event is just an object containing 'start' and 'end'

type ITimeEvent = {
    start: Date,
    end: Date,
    creator?: string,
    title?: string,
    _id?: string,
}

interface Renderable {
    renderList: (index: number) => React.Node
    renderTable: (defaultStyle: Object<Style>) => React.Node
}

export type ViewProps = {
    date: Date,
    duration: string,
    events: IListTimeEvent,
    timeStart: number,
    timeEnd: number,
    timeDivision: number
}

type IListTimeEvent = Array<TimeEvent<ITimeEvent>>

export interface IView {
    renderDay(props: ViewProps): React.Node,
    renderWeek(props: ViewProps): React.Node,
    renderMonth(props: ViewProps):React.Node,
}

Examples

Coming soon

FAQ

License

This project is licensed under the terms of the MIT license.