{"_id":"@code-rhapsodie/react-scheduler","_rev":"3-12256075ecb27c415cce2ed01cff633d","name":"@code-rhapsodie/react-scheduler","dist-tags":{"latest":"0.4.1"},"versions":{"0.4.0":{"name":"@code-rhapsodie/react-scheduler","version":"0.4.0","keywords":["scheduler","gantt","gantt chart","react","timeline","calendar"],"author":{"url":"https://scheduler.bitnoise.pl/","name":"Bitnoise"},"license":"MIT","_id":"@code-rhapsodie/react-scheduler@0.4.0","maintainers":[{"name":"audul","email":"loic@code-rhapsodie.fr"},{"name":"jeremycr","email":"jeremy@code-rhapsodie.fr"}],"homepage":"https://github.com/code-rhapsodie/react-scheduler#readme","bugs":{"url":"https://github.com/code-rhapsodie/react-scheduler/issues"},"dist":{"shasum":"b36f8265b110d076e3071f14fe20618148f1b981","tarball":"https://registry.npmjs.org/@code-rhapsodie/react-scheduler/-/react-scheduler-0.4.0.tgz","fileCount":142,"integrity":"sha512-Us4Vh/KAbEbFoIWKRjNW9YfjU1E//DdgyhH0/3+Jb+hML8f4vWh/Kzqu/nOSmINOEuK5PbTNwtX93TQtqQv3wQ==","signatures":[{"sig":"MEYCIQDk7B6H0HvLZ2BAhfhe+dpiXQvZXjKkmnZit3JXVFvqygIhAOSKGdjP6gV2W5QW/N7mIOpk0ElJtAi5c0eTXCY/Y96J","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":379269},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./index.css":"./dist/index.css","./style.css":"./dist/index.css","./dist/index.css":"./dist/index.css","./dist/style.css":"./dist/index.css"},"gitHead":"b4c4fea96122092b5a46ed298cc0828eb4347242","scripts":{"dev":"vite","lint":"typescript_eslint_allow_unsupported_typescript_version=true eslint .","build":"vite build && tsc","format":"prettier --write .","prepare":"husky install","preview":"vite preview","lint:fix":"eslint --fix .","typecheck":"tsc -b"},"_npmUser":{"name":"audul","email":"loic@code-rhapsodie.fr"},"repository":{"url":"git+https://github.com/code-rhapsodie/react-scheduler.git","type":"git"},"_npmVersion":"11.17.0","description":"
\"@code-rhapsodie/react-scheduler/react-scheduler\"

✨ https://scheduler.bitnoise.pl/ ✨
Open sou","directories":{},"lint-staged":{"**/*.{ts,tsx}":["yarn run lint"]},"_nodeVersion":"24.19.0","dependencies":{"dayjs":"1.11.21","lodash.debounce":"4.0.8","eslint-plugin-import-x":"^4.17.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"8.2.1","husky":"9.1.7","react":"^19.0.0","eslint":"10.8.1","globals":"^17.9.0","prettier":"3.9.6","react-dom":"^19.0.0","@eslint/js":"^10.0.1","typescript":"7.0.2","@types/node":"24.13.3","lint-staged":"17.3.0","@types/react":"^19.0.0","@faker-js/faker":"10.5.0","@types/react-dom":"^19.0.0","vite-plugin-svgr":"5.2.0","styled-components":"6.5.1","typescript-eslint":"^8.66.0","eslint-plugin-react":"7.37.5","@vitejs/plugin-react":"6.0.5","eslint-plugin-import":"2.32.0","@types/lodash.debounce":"4.0.9","eslint-config-prettier":"10.1.8","eslint-plugin-prettier":"^5.5.6","eslint-plugin-filenames":"^1.3.2","rollup-plugin-visualizer":"7.0.1","@typescript-eslint/parser":"8.66.0","eslint-plugin-react-hooks":"7.1.1","@typescript-eslint/eslint-plugin":"8.66.0","eslint-import-resolver-typescript":"4.4.5"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","styled-components":"^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-scheduler_0.4.0_1786369841267_0.9464619839235702","host":"s3://npm-registry-packages-npm-production"}},"0.4.1":{"name":"@code-rhapsodie/react-scheduler","version":"0.4.1","keywords":["scheduler","gantt","gantt chart","react","timeline","calendar"],"author":{"url":"https://scheduler.bitnoise.pl/","name":"Bitnoise"},"license":"MIT","_id":"@code-rhapsodie/react-scheduler@0.4.1","maintainers":[{"name":"audul","email":"loic@code-rhapsodie.fr"},{"name":"jeremycr","email":"jeremy@code-rhapsodie.fr"}],"homepage":"https://github.com/code-rhapsodie/react-scheduler#readme","bugs":{"url":"https://github.com/code-rhapsodie/react-scheduler/issues"},"dist":{"shasum":"8a76bc08aa8ff4f9733b6eb95b47574286390f38","tarball":"https://registry.npmjs.org/@code-rhapsodie/react-scheduler/-/react-scheduler-0.4.1.tgz","fileCount":142,"integrity":"sha512-j/aKv1ooieL61UXbOfgD8eKZchftPNu6L3qdkYgCFIBxLgceIYUUYNGY3q16hPj01qfOxyc86EgA2z+G6fmyVg==","signatures":[{"sig":"MEUCIQDBP9JNqYNRyCzVSGvCxr3UqWr+aye+A0/FsWcYKS6u3QIgWsQnih8dSGZXDJ/3LnmuMKFIBRwIsvZN6XG1Pa6Ir+0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":379088},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./index.css":"./dist/index.css","./style.css":"./dist/index.css","./dist/index.css":"./dist/index.css","./dist/style.css":"./dist/index.css"},"gitHead":"02b2f2932b033a2b7bbaf8a78c5283959f7f770a","scripts":{"dev":"vite","lint":"typescript_eslint_allow_unsupported_typescript_version=true eslint .","build":"vite build && tsc","format":"prettier --write .","prepare":"husky install","preview":"vite preview","lint:fix":"eslint --fix .","typecheck":"tsc -b"},"_npmUser":{"name":"audul","email":"loic@code-rhapsodie.fr"},"repository":{"url":"git+https://github.com/code-rhapsodie/react-scheduler.git","type":"git"},"_npmVersion":"11.17.0","description":"

\"@code-rhapsodie/react-scheduler/react-scheduler\"

✨ https://scheduler.bitnoise.pl/ ✨
Open sou","directories":{},"lint-staged":{"**/*.{ts,tsx}":["yarn run lint"]},"_nodeVersion":"24.19.0","dependencies":{"dayjs":"1.11.21","lodash.debounce":"4.0.8","eslint-plugin-import-x":"^4.17.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"8.2.1","husky":"9.1.7","react":"^19.0.0","eslint":"10.8.1","globals":"^17.9.0","prettier":"3.9.6","react-dom":"^19.0.0","@eslint/js":"^10.0.1","typescript":"7.0.2","@types/node":"24.13.3","lint-staged":"17.3.0","@types/react":"^19.0.0","@faker-js/faker":"10.5.0","@types/react-dom":"^19.0.0","vite-plugin-svgr":"5.2.0","styled-components":"6.5.1","typescript-eslint":"^8.66.0","eslint-plugin-react":"7.37.5","@vitejs/plugin-react":"6.0.5","eslint-plugin-import":"2.32.0","@types/lodash.debounce":"4.0.9","eslint-config-prettier":"10.1.8","eslint-plugin-prettier":"^5.5.6","eslint-plugin-filenames":"^1.3.2","rollup-plugin-visualizer":"7.0.1","@typescript-eslint/parser":"8.66.0","eslint-plugin-react-hooks":"7.1.1","@typescript-eslint/eslint-plugin":"8.66.0","eslint-import-resolver-typescript":"4.4.5"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","styled-components":"^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-scheduler_0.4.1_1786446661253_0.952442756552561","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2026-08-10T13:50:41.111Z","modified":"2026-08-31T07:58:02.393Z","0.4.0":"2026-08-10T13:50:41.398Z","0.4.1":"2026-08-11T11:11:01.374Z"},"bugs":{"url":"https://github.com/code-rhapsodie/react-scheduler/issues"},"author":{"url":"https://scheduler.bitnoise.pl/","name":"Bitnoise"},"license":"MIT","homepage":"https://github.com/code-rhapsodie/react-scheduler#readme","keywords":["scheduler","gantt","gantt chart","react","timeline","calendar"],"repository":{"url":"git+https://github.com/code-rhapsodie/react-scheduler.git","type":"git"},"description":"

\"@code-rhapsodie/react-scheduler/react-scheduler\"

✨ https://scheduler.bitnoise.pl/ ✨
Open sou","maintainers":[{"email":"loic@code-rhapsodie.fr","name":"audul"},{"email":"jean-baptiste@code-rhapsodie.fr","name":"macintoshplus"},{"email":"jeremy@code-rhapsodie.fr","name":"jeremycr"}],"readme":"

\n \"@code-rhapsodie/react-scheduler/react-scheduler\"\n
\n

\n ✨ https://scheduler.bitnoise.pl/ ✨\n
\n Open sourced, typescript oriented, light-weight, and ultra fast React Component for creating gantt charts.\n

\n
\n Youtube Tutorial\n   •  \n npm\n   •  \n Report an issue\n
\n
\n
\n\n## About this fork\n\n`@code-rhapsodie/react-scheduler` is a maintained fork of Bitnoise/react-scheduler, published by Code Rhapsodie with ongoing fixes and updates. Credit for the original library goes to the Bitnoise team.\n\n### Installation\n\n```bash\n# yarn\nyarn add '@code-rhapsodie/react-scheduler'\n# npm\nnpm install '@code-rhapsodie/react-scheduler'\n```\n\n### Example usage\n\n1. import required styles for scheduler\n\n```ts\nimport \"@code-rhapsodie/react-scheduler/dist/style.css\";\n```\n\n2. Import Scheduler component into your project\n\n```ts\nimport { Scheduler, SchedulerData } from \"@code-rhapsodie/react-scheduler\";\nimport dayjs from \"dayjs\";\n\ndefault export function Component() {\n const [filterButtonState, setFilterButtonState] = useState(0);\n\n const [range, setRange] = useState({\n startDate: new Date(),\n endDate: new Date()\n });\n\n const handleRangeChange = useCallback((range) => {\n setRange(range);\n }, []);\n\n // Filtering events that are included in current date range\n // Example can be also found on video https://youtu.be/9oy4rTVEfBQ?t=118&si=52BGKSIYz6bTZ7fx\n // and in the react-scheduler repo App.tsx file https://github.com/Bitnoise/react-scheduler/blob/master/src/App.tsx\n const filteredMockedSchedulerData = mockedSchedulerData.map((person) => ({\n ...person,\n data: person.data.filter(\n (project) =>\n // we use \"dayjs\" for date calculations, but feel free to use library of your choice\n dayjs(project.startDate).isBetween(range.startDate, range.endDate) ||\n dayjs(project.endDate).isBetween(range.startDate, range.endDate) ||\n (dayjs(project.startDate).isBefore(range.startDate, \"day\") &&\n dayjs(project.endDate).isAfter(range.endDate, \"day\"))\n )\n }))\n\n return (\n
\n console.log(clickedResource)}\n onItemClick={(item) => console.log(item)}\n onFilterData={() => {\n // Some filtering logic...\n setFilterButtonState(1);\n }}\n onClearFilterData={() => {\n // Some clearing filters logic...\n setFilterButtonState(0)\n }}\n config={{\n zoom: 0,\n filterButtonState,\n }}\n />\n
\n );\n}\n\nconst mockedSchedulerData: SchedulerData = [\n {\n id: \"070ac5b5-8369-4cd2-8ba2-0a209130cc60\",\n label: {\n icon: \"https://picsum.photos/24\",\n title: \"Joe Doe\",\n subtitle: \"Frontend Developer\"\n },\n data: [\n {\n id: \"8b71a8a5-33dd-4fc8-9caa-b4a584ba3762\",\n startDate: new Date(\"2023-04-13T15:31:24.272Z\"),\n endDate: new Date(\"2023-08-28T10:28:22.649Z\"),\n occupancy: 3600,\n title: \"Project A\",\n subtitle: \"Subtitle A\",\n description: \"array indexing Salad West Account\",\n bgColor: \"rgb(254,165,177)\"\n },\n {\n id: \"22fbe237-6344-4c8e-affb-64a1750f33bd\",\n startDate: new Date(\"2023-10-07T08:16:31.123Z\"),\n endDate: new Date(\"2023-11-15T21:55:23.582Z\"),\n occupancy: 2852,\n title: \"Project B\",\n subtitle: \"Subtitle B\",\n description: \"Tuna Home pascal IP drive\",\n bgColor: \"rgb(254,165,177)\"\n },\n {\n id: \"3601c1cd-f4b5-46bc-8564-8c983919e3f5\",\n startDate: new Date(\"2023-03-30T22:25:14.377Z\"),\n endDate: new Date(\"2023-09-01T07:20:50.526Z\"),\n occupancy: 1800,\n title: \"Project C\",\n subtitle: \"Subtitle C\",\n bgColor: \"rgb(254,165,177)\"\n },\n {\n id: \"b088e4ac-9911-426f-aef3-843d75e714c2\",\n startDate: new Date(\"2023-10-28T10:08:22.986Z\"),\n endDate: new Date(\"2023-10-30T12:30:30.150Z\"),\n occupancy: 11111,\n title: \"Project D\",\n subtitle: \"Subtitle D\",\n description: \"Garden heavy an software Metal\",\n bgColor: \"rgb(254,165,177)\"\n }\n ]\n }\n];\n\n```\n\n3. If some problems occur, please see our troubleshooting section below.\n\n### Scheduler API\n\n##### Scheduler Component Props\n\n| Property Name | Type | Arguments | Description |\n| ----------------- | ---------- | --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |\n| isLoading | `boolean` | - | shows loading indicators on scheduler |\n| onRangeChange | `function` | updated `startDate` and `endDate` | runs whenever user reaches end of currently rendered canvas |\n| onTileClick | `function` | clicked resource data | detects resource click |\n| onItemClick | `function` | clicked left column item data | detects item click on left column |\n| onFilterData | `function` | - | callback firing when filter button was clicked |\n| onClearFilterData | `function` | - | callback firing when clear filters button was clicked (clearing button is visible **only** when filterButtonState is set to `>0`) |\n| config | `Config` | - | object with scheduler config properties |\n\n##### Scheduler Config Object\n\n---\n\n| Property Name | Type | Default | Description |\n| ------------------------------------ | ---------------------------------------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| zoom | `0` or `1` or `2` | 0 | `0` - display grid divided into weeks `1` - display grid divided into days `2` - display grid divided into hours |\n| filterButtonState | `number` | 0 | `< 0` - hides filter button, `0` - state for when filters were not set, `> 0` - state for when some filters were set (allows to also handle `onClearFilterData` event) |\n| maxRecordsPerPage | `number` | 50 | number of items from `SchedulerData` visible per page |\n| lang | `en`, `es`, `lt`, `de`, `fr`, `it`, `pt-BR`, `he` , `ro` or `pl` | en | scheduler's language |\n| includeTakenHoursOnWeekendsInDayView | `boolean` | `false` | show weekends as taken when given resource is longer than a week |\n| showTooltip | `boolean` | `true` | show tooltip when hovering over tiles |\n| translations | `LocaleType[]` | `undefined` | option to add specific langs translations |\n| showThemeToggle | `boolean` | `false` | show toggle button to switch between light/dark mode |\n| defaultTheme | `light` or `dark` | `light` | scheduler's default theme |\n\n#### Translation object example\n\n```ts\nimport enDayjsTranslations from \"dayjs/locale/en\";\n\nconst langs: LocaleType[] = [\n {\n id: \"en\",\n lang: {\n feelingEmpty: \"I feel so empty...\",\n free: \"Free\",\n loadNext: \"Next\",\n loadPrevious: \"Previous\",\n over: \"over\",\n taken: \"Taken\",\n topbar: {\n filters: \"Filters\",\n next: \"next\",\n prev: \"prev\",\n today: \"Today\",\n view: \"View\"\n },\n search: \"search\",\n week: \"week\"\n },\n translateCode: \"en-EN\",\n dayjsTranslations: enDayjsTranslations\n }\n];\n\n;\n```\n\n#### Scheduler LocaleType Object\n\n| Property Name | Type | Description |\n| ----------------- | -------------------------- | ---------------------------------- |\n| id | `string` | key is needed for selecting lang |\n| lang | `Translation` | object with translations |\n| translateCode | `string` | code that is saved in localStorage |\n| dayjsTranslations | `string ILocale undefined` | object with translation from dayjs |\n\n#### Scheduler Translation Object\n\n| Property Name | Type |\n| ------------- | -------- |\n| feelingEmpty | `string` |\n| free | `string` |\n| loadNext | `string` |\n| loadPrevious | `string` |\n| over | `string` |\n| taken | `string` |\n| search | `string` |\n| week | `string` |\n| topbar | `Topbar` |\n\n##### Scheduler Topbar Object\n\n| Property Name | Type |\n| ------------- | -------- |\n| filters | `string` |\n| next | `string` |\n| prev | `string` |\n| today | `string` |\n| view | `string` |\n\n##### Scheduler Data\n\narray of chart rows with shape of\n\n| Property Name | Type | Description |\n| ------------- | --------------------- | ----------------------------------------------- |\n| id | `string` | unique row id |\n| label | `SchedulerRowLabel` | row's label, `e.g person's name, surname, icon` |\n| data | `Array` | array of `resources` |\n\n##### Left Colum Item Data\n\ndata that is accessible as argument of `onItemClick` callback\n\n| Property Name | Type | Description |\n| ------------- | ------------------- | ----------------------------------------------- |\n| id | `string` | unique row id |\n| label | `SchedulerRowLabel` | row's label, `e.g person's name, surname, icon` |\n\n##### Resource Item\n\nitem that will be visible on the grid as tile and that will be accessible as argument of `onTileClick` event\n\n| Property Name | Type | Description |\n| ------------- | ------------------- | ------------------------------------------------------------------------------------------------------- |\n| id | `string` | unique resource id |\n| title | `string` | resource title that will be displayed on resource tile |\n| subtitle | `string (optional)` | resource subtitle that will be displayed on resource tile |\n| description | `string (optional)` | resource description that will be displayed on resource tile |\n| startDate | `Date` | date for calculating start position for resource |\n| endDate | `Date` | date for calculating end position for resource |\n| occupancy | `number` | number of seconds resource takes up for given row that will be visible on resource tooltip when hovered |\n| bgColor | `string (optional)` | tile color |\n\n### Troubleshooting\n\n- For using Scheduler with RemixJS make sure to add `@code-rhapsodie/react-scheduler` to `serverDependenciesToBundle` in `remix.config.js` like so:\n\n```js\n// remix.config.js\n/** @type {import('@remix-run/dev').AppConfig} */\nmodule.exports = {\n\t// ...\n\tserverDependenciesToBundle: [..., \"@code-rhapsodie/react-scheduler\"],\n};\n```\n\n- When using with NextJS (app router) Scheduler needs to be wrapped with component with `use client`\n\n```ts\n\"use client\"\nimport { Scheduler, SchedulerProps } from \"@code-rhapsodie/react-scheduler\";\n\ndefault export function SchedulerClient(props: SchedulerProps) {\n\treturn ;\n}\n\n```\n\n- When using with NextJS (pages router) it needs to be imported using `dynamic`:\n\n```ts\nimport dynamic from \"next/dynamic\";\nconst Scheduler = dynamic(\n () => import(\"@code-rhapsodie/react-scheduler\").then((mod) => mod.Scheduler),\n {\n ssr: false\n }\n);\n```\n\n- How to customize Scheduler dimensions\n\nScheduler is position absolutely to take all available space. If you want to have fixed dimensions wrap Scheduler inside a div with position set to relative.\n\nExample using styled components:\n\n```ts\nexport const StyledSchedulerFrame = styled.div`\n position: relative;\n height: 40vh;\n width: 40vw;\n`;\n\n\n \n\n```\n\n### Known Issues\n\n1. No responsiveness\n2. Slower performance on Firefox when working with big set of data due to Firefox being slower working with canvas\n\n### How to contribute\n\n- **Reporting Issues**: If you come across any bugs, glitches, or have any suggestions for improvements, please [open an issue](https://github.com/Bitnoise/react-scheduler/issues) on our GitHub repository. Provide as much detail as possible, including steps to reproduce the issue.\n- **Suggesting Enhancements**: If you have ideas for new features or enhancements, we would love to hear them! You can [open an issue](https://github.com/Bitnoise/react-scheduler/issues) on our GitHub repository and clearly describe your suggestion.\n- **Submitting Pull Requests**: If you have developed a fix or a new feature that you would like to contribute, you can submit a pull request. Here's a quick overview of the process:\n - Clone the repository and create your own branch: `git checkout -b feat/your-branch-name`.\n - Implement your changes, following the **code style and guidelines** from [development.md](development.md).\n - Test your changes to ensure they work as expected.\n - Commit your changes and push to your forked repository.\n - Open a pull request against our main repository's `master` branch.\n - add at least 1 reviewer\n - link correct issue\n\n### Contact\n\nIf you have any questions or need further assistance, feel free to reach out to us at [scheduler@bitnoi.se](mailto:scheduler@bitnoi.se). We appreciate your contributions and thank you for helping us improve this project!\n\n### License\n\nMIT Licensed. Copyright (c) Bitnoise 2023.\n","readmeFilename":"readme.md"}