https://github.com/nikolasp/react-timetable-events
Timetable Events React component
https://github.com/nikolasp/react-timetable-events
react timetable typescript
Last synced: about 1 year ago
JSON representation
Timetable Events React component
- Host: GitHub
- URL: https://github.com/nikolasp/react-timetable-events
- Owner: nikolasp
- License: mit
- Created: 2018-02-25T14:37:49.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-02-13T07:37:50.000Z (over 2 years ago)
- Last Synced: 2025-04-25T04:03:43.870Z (about 1 year ago)
- Topics: react, timetable, typescript
- Language: TypeScript
- Homepage: https://nikolasp.github.io/react-timetable-events/
- Size: 5.59 MB
- Stars: 25
- Watchers: 1
- Forks: 13
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-timetable-events
[](https://www.npmjs.com/package/react-timetable-events) [](https://standardjs.com)
## Description [(Demo)](https://nikolasp.github.io/react-timetable-events/)
> React Timetable Events - flexible timetable component. Ideal for school timetables.
## Installation
```bash
# with yarn
yarn add react-timetable-events
# with npm
npm install react-timetable-events
```
## Usage
```tsx
import * as React from 'react'
import Timetable from 'react-timetable-events'
export const Example () =>
```
## Available props
```js
TimeTable.propTypes = {
events: PropTypes.object.isRequired, // events object prepared with days and list of events
hoursInterval: PropTypes.shape({
from: PropTypes.number.isRequired,
to: PropTypes.number.isRequired,
}), // displayed hours
renderDayHeader: PropTypes.func, // table header preview component
renderHour: PropTypes.func, // hour preview component
renderEvent: PropTypes.func, // event preview component
getDayLabel: PropTypes.func, // change weekday label
timeLabel: PropTypes.string, // Time label
style: React.CSSProperties, // pass custom wrapper styles like height and width
headerAttributes: PropTypes.object, // table header attributes - HTML attrs can be passed
bodyAttributes: PropTypes.object, // table body attributes - HTML attrs can be passed
};
```
Check [Storybook](./src/stories/Timetable.stories.tsx) for more details about customization.
## Events - the only required prop
```ts
export interface Event {
id: number | string;
name: string;
startTime: Date;
endTime: Date;
type?: string;
[key: string]: unknown;
}
export interface Events {
[day: string]: Event[];
}
const events: Events = {
events: {
monday: [
{
id: 1,
name: "Custom Event 1",
type: "custom",
startTime: new Date("2018-02-23T11:30:00"),
endTime: new Date("2018-02-23T13:30:00"),
},
],
tuesday: [
{
id: 2,
name: "Custom Event 2",
type: "custom",
startTime: new Date("2018-02-22T12:30:00"),
endTime: new Date("2018-02-22T14:30:00"),
},
{
id: 3,
name: "Custom Event 3",
type: "custom",
startTime: new Date("2018-02-22T16:30:00"),
endTime: new Date("2018-02-22T18:45:00"),
},
],
wednesday: [],
thursday: [],
friday: [],
},
};
```
## License
MIT © [Nikola Spalevic](https://github.com/nikolasp) & [Filip Furtula](https://github.com/fujee)