custom timetable for react
npm install react-custom-timetableReact timetable Component.
The headless component method allows developers to wear the design they want.
In addition, if the time of the elements inside the time table overlaps, it can be rendered appropriately through internal logic.
install
``bash`
npm i react-custom-timetable
`typescript
import "./styles.css";
import "./reset.css";
import useTimeTable from "react-custom-timetable";
import { exampleTaskList } from "./timetableMockData";
import { TaskListItem } from "./TaskListItem";
function App() {
const { taskListWithAutoPosition, timeTableCallbackRef } = useTimeTable({
taskList: exampleTaskList,
});
return (
height: "500px",
border: "1px solid black",
boxSizing: "border-box",
position: "relative",
overflow: "hidden",
}}
ref={timeTableCallbackRef}
>
{taskListWithAutoPosition.map((task, index) => (
))}
API Reference
####
Options:
| Parameter | Type | Description |
| :--------- | :------------------- | :-------------------------- |
|
| UseTimeTableOption | Required. Your TaskList |`typescript
export interface BaseTask {
id: number | string;
startTime: Date;
endTime: Date;
}type UseTimeTableOption = {
taskList: T[];
startTime?: Date;
endTime?: Date;
title?: string;
};
`Return Values:
-
: An automatically sorted task list with size and location attributes additionally according to the start and end times of the to-do - Contains the
style properties added to each Task object.-
timeTableCallbackRef : Ref` to be connected to the DOM element.