@bitnoi.se/react-scheduler

repository·master·Indexed 19 days ago

https://github.com/bitnoise/react-scheduler

A lightweight, TypeScript-oriented, high-performance React component for creating Gantt charts. It features customizable zoom levels (weeks, days, hours), multi-language support via LocaleProvider, and built-in light and dark themes. The library provides a Scheduler component and associated types like SchedulerData and Config for managing resource tiles and grid layouts. Includes integration guides for RemixJS, NextJS App Router, and NextJS Pages Router.

Tokens: 5.6K
Snippets: 22
Records: 26
Agent score: 67%

What's inside @bitnoi.se/react-scheduler

Quickstart: Implement the Scheduler component

master

To use the Scheduler, follow these three steps:

Import required styles: The component requires its CSS to render correctly.
Import the component: Import Scheduler and SchedulerData from @bitnoi.se/react-scheduler.
Provide data and props: Pass your data and event handlers to the <Scheduler /> component.

Note: The example below uses dayjs for date calculations, but you are free to use any date library of your choice.

import "@bitnoi.se/react-scheduler/dist/style.css";
import { Scheduler, SchedulerData } from "@bitnoi.se/react-scheduler";
import dayjs from "dayjs";

export default function Component() {
  // ... implementation logic ...
  return (
    <Scheduler
      data={filteredData}
      isLoading={isLoading}
      onRangeChange={handleRangeChange}
      onTileClick={(clickedResource) => console.log(clickedResource)}
      onItemClick={(item) => console.log(item)}
      onFilterData={() => {}}
      onClearFilterData={() => {}}
      config={{ zoom: 0 }}
    />
  );
}

Install @bitnoi.se/react-scheduler

master

You can install the package using either yarn or npm.

# yarn
yarn add '@bitnoi.se/react-scheduler'

# npm
npm install '@bitnoi.se/react-scheduler'

```bash
# yarn
yarn add '@bitnoi.se/react-scheduler'
# npm
npm install '@bitnoi.se/react-scheduler'
```埋

Set up the development environment
master
To set up the project locally for development and testing, ensure you are using the Node version specified in the .nvmrc file. Follow these steps:
1. Clone the repository.
2. Install dependencies using your preferred package manager (e.g., yarn install).
3. Start the development server.
4. Access the application at http://localhost:5173.
```
git clone git@github.com:Bitnoise/react-scheduler.git
yarn install
yarn dev
```
https://github.com/bitnoise/react-scheduler/blob/master/development.md

Configure the Scheduler via the config object

master

The config prop accepts a Config object to customize the scheduler's behavior and appearance.

Property Name	Type	Default	Description
`zoom`	`0` or `1` or `2`	`0`	`0`: weeks, `1`: days, `2`: hours
`filterButtonState`	`number`	`0`	`< 0`: hide filter button; `0`: no filters set; `> 0`: filters active (enables `onClearFilterData`)
`maxRecordsPerPage`	`number`	`50`	Number of items from `SchedulerData` visible per page
`lang`	`en`, `lt` or `pl`	`en`	Scheduler's language
`includeTakenHoursOnWeekendsInDayView`	`boolean`	`false`	Show weekends as taken when a resource is longer than a week
`showTooltip`	`boolean`	`true`	Show tooltip when hovering over tiles
`translations`	`LocaleType[]`	`undefined`	Option to add specific language translations
`showThemeToggle`	`boolean`	`false`	Show toggle button to switch between light/dark mode
`defaultTheme`	`light` or `dark`	`light`	Scheduler's default theme

Integrate Scheduler with RemixJS
master
When using @bitnoi.se/react-scheduler with RemixJS, you must add the package to serverDependenciesToBundle in your remix.config.js to ensure it is bundled correctly.
```
// remix.config.js
/** @type  {import('@remix-run/dev').AppConfig} */
module.exports = {
	// ...
	serverDependenciesToBundle: [..., "@bitnoi.se/react-scheduler"],
};
```
https://github.com/bitnoise/react-scheduler/blob/master/readme.md
Customize Scheduler dimensions
master
The Scheduler component is positioned absolutely to occupy all available space in its parent. To give it fixed dimensions, wrap it in a container with position: relative.
```
export const StyledSchedulerFrame = styled.div`
  position: relative;
  height: 40vh;
  width: 40vw;
`;

<StyledSchedulerFrame>
    <Scheduler  {...}/>
</StyledSchedulerFrame>
```
https://github.com/bitnoise/react-scheduler/blob/master/readme.md
Integrate Scheduler with NextJS (Pages Router)
master
When using the NextJS Pages Router, you must import the Scheduler component using next/dynamic with ssr: false to prevent server-side rendering issues.
```
import dynamic from "next/dynamic";
const Scheduler = dynamic(() => import("@bitnoi.se/react-scheduler").then((mod) => mod.Scheduler), {
  ssr: false
});
```
https://github.com/bitnoise/react-scheduler/blob/master/readme.md
Integrate Scheduler with NextJS (App Router)
master
When using the NextJS App Router, the Scheduler component must be wrapped in a client component using the use client directive.
```
"use client"
import { Scheduler, SchedulerProps } from "@bitnoi.se/react-scheduler";

export default function SchedulerClient(props: SchedulerProps) {
	return <Scheduler {...props} />;
}
```
https://github.com/bitnoise/react-scheduler/blob/master/readme.md

Customize Scheduler translations

master

You can provide custom translations by passing an array of LocaleType objects to the translations property in the config object. Each object requires an id, a lang (the Translation object), a translateCode (for localStorage), and dayjsTranslations.

import enDayjsTranslations from "dayjs/locale/en";

const langs: LocaleType[] = [
  {
    id: "en",
    lang: {
      feelingEmpty: "I feel so empty...",
      free: "Free",
      loadNext: "Next",
      loadPrevious: "Previous",
      over: "over",
      taken: "Taken",
      topbar: {
        filters: "Filters",
        next: "next",
        prev: "prev",
        today: "Today",
        view: "View"
      },
      search: "search",
      week: "week"
    },
    translateCode: "en-EN",
    dayjsTranslations: enDayjsTranslations
  }
];

<Scheduler
  // ...
  config={{
    lang: "en",
    translations: langs
  }}
/>;

Scheduler Component Props

master

The Scheduler component accepts the following props:

Property Name	Type	Description
`isLoading`	`boolean`	Shows loading indicators on the scheduler
`onRangeChange`	`function`	Runs whenever the user reaches the end of the currently rendered canvas (provides updated `startDate` and `endDate`)
`onTileClick`	`function`	Callback triggered when a resource tile is clicked (provides clicked resource data)
`onItemClick`	`function`	Callback triggered when a left column item is clicked (provides clicked item data)
`onFilterData`	`function`	Callback firing when the filter button is clicked
`onClearFilterData`	`function`	Callback firing when the clear filters button is clicked (visible only when `filterButtonState > 0`)
`config`	`Config`	Object containing scheduler configuration properties

Define SchedulerData structure

master

The SchedulerData is an array of chart rows. Each row follows this shape:

Property Name	Type	Description
`id`	`string`	Unique row ID
`label`	`SchedulerRowLabel`	Row's label (e.g., person's name, icon, etc.)
`data`	`Array<ResourceItem>`	Array of resources (tiles) for this row

Each ResourceItem in the data array represents a tile on the grid:

Property Name	Type	Description
`id`	`string`	Unique resource ID
`title`	`string`	Title displayed on the resource tile
`subtitle`	`string (optional)`	Subtitle displayed on the resource tile
`description`	`string (optional)`	Description displayed on the resource tile
`startDate`	`Date`	Start date for calculating position
`endDate`	`Date`	End date for calculating position
`occupancy`	`number`	Number of seconds the resource takes up (shown in tooltip)
`bgColor`	`string (optional)`	Tile color

Apply GlobalStyle for CSS resets
master
The GlobalStyle component is a createGlobalStyle instance that applies essential CSS resets and typography specifically to the element with the ID defined by prefixId (reactSchedulerOutsideWrapper). This ensures that box-sizing, font-family, and line-height are correctly scoped to the scheduler's container and its children.
```
import { GlobalStyle } from '@bitnoi.se/react-scheduler';

function App() {
  return (
    <>
      <GlobalStyle />
      <div id="reactSchedulerOutsideWrapper">
        {/* Scheduler content */}
      </div>
    </>
  );
}
```
https://github.com/bitnoise/react-scheduler/blob/master/src/styles.ts