{"_id":"@1thomas13/react-scheduler","_rev":"2-69a35aeddfbe1a529af7d753685bddb2","name":"@1thomas13/react-scheduler","dist-tags":{"latest":"0.1.5"},"versions":{"0.1.2":{"name":"@1thomas13/react-scheduler","version":"0.1.2","type":"module","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Bitnoise/react-scheduler.git"},"keywords":["scheduler","gantt","gantt chart","react","timeline","calendar"],"author":{"name":"Bitnoise","url":"https://scheduler.bitnoise.pl/"},"scripts":{"dev":"vite","build":"tsc && vite build","preview":"vite preview","lint":"eslint .","lint:fix":"eslint --fix .","format":"prettier --write .","typecheck":"tsc -b","prepare":"husky install"},"main":"dist/index.umd.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.js","require":"./dist/index.umd.cjs"},"./dist/style.css":{"import":"./dist/style.css","require":"./dist/style.css"}},"publishConfig":{"access":"public"},"lint-staged":{"**/*.{ts,tsx}":["yarn run lint"]},"dependencies":{"dayjs":"1.11.7","lodash.debounce":"4.0.8","path":"0.12.7","react":"18.2.0","react-dom":"18.2.0","styled-components":"5.3.8","styled-normalize":"8.0.7"},"devDependencies":{"@faker-js/faker":"7.6.0","@types/datejs":"0.0.32","@types/lodash.debounce":"4.0.7","@types/node":"18.15.11","@types/react":"18.0.27","@types/react-dom":"18.0.10","@types/styled-components":"5.1.26","@typescript-eslint/eslint-plugin":"5.57.1","@typescript-eslint/parser":"5.57.1","@vitejs/plugin-react":"3.1.0","babel-plugin-styled-components":"2.0.7","eslint":"8.37.0","eslint-config-prettier":"8.8.0","eslint-import-resolver-typescript":"3.5.5","eslint-plugin-filenames":"1.3.2","eslint-plugin-import":"2.27.5","eslint-plugin-prettier":"4.2.1","eslint-plugin-react":"7.32.2","eslint-plugin-react-hooks":"4.6.0","husky":"8.0.0","lint-staged":"13.2.0","prettier":"2.8.7","rollup-plugin-visualizer":"5.9.0","typescript":"4.9.3","vite":"4.1.0","vite-plugin-dts":"2.2.0","vite-plugin-svgr":"2.4.0"},"gitHead":"1b137ba2b506d5f3a6448b7f0d8ae098c9173b42","description":"
\r \"@bitnoise/react-scheduler\"\r
\r

\r ✨ https://scheduler.bitnoise.pl/ ✨\r
\r Open sourced, typescript","bugs":{"url":"https://github.com/Bitnoise/react-scheduler/issues"},"homepage":"https://github.com/Bitnoise/react-scheduler#readme","_id":"@1thomas13/react-scheduler@0.1.2","_nodeVersion":"18.15.0","_npmVersion":"9.6.2","dist":{"integrity":"sha512-lQV6LyQafVWSZpR7GlhBRqW832BRTFLTSNT3GZHH3vXn2eilhliTaKJ6f4CNtC+xgTHjUI8Gh5nHoqOjR0e5qg==","shasum":"45226550601a4a194adcda533d820821d0429893","tarball":"https://registry.npmjs.org/@1thomas13/react-scheduler/-/react-scheduler-0.1.2.tgz","fileCount":7,"unpackedSize":321267,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBRVUqqnF3XyCQcJkJzAxG0Yiu1wOq/41E4km051CeF/AiEA4mgKSfJjVsqpxH888FxlLWUPQFW1N8LUb79fVDgkMmA="}]},"_npmUser":{"name":"1thomas13","email":"thomi.b137@gmail.com"},"directories":{},"maintainers":[{"name":"1thomas13","email":"thomi.b137@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-scheduler_0.1.2_1703669811300_0.6519391343632233"},"_hasShrinkwrap":false},"0.1.3":{"name":"@1thomas13/react-scheduler","version":"0.1.3","type":"module","license":"MIT","repository":{"type":"git","url":"git+https://github.com/1thomas13/react-scheduler.git"},"keywords":["scheduler","gantt","gantt chart","react","timeline","calendar"],"author":{"name":"Bitnoise","url":"https://scheduler.bitnoise.pl/"},"scripts":{"dev":"vite","build":"tsc && vite build","preview":"vite preview","lint":"eslint .","lint:fix":"eslint --fix .","format":"prettier --write .","typecheck":"tsc -b","prepare":"husky install"},"main":"dist/index.umd.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.js","require":"./dist/index.umd.cjs"},"./dist/style.css":{"import":"./dist/style.css","require":"./dist/style.css"}},"publishConfig":{"access":"public"},"lint-staged":{"**/*.{ts,tsx}":["yarn run lint"]},"dependencies":{"dayjs":"1.11.7","lodash.debounce":"4.0.8","path":"0.12.7","react":"18.2.0","react-dom":"18.2.0","styled-components":"5.3.8","styled-normalize":"8.0.7"},"devDependencies":{"@faker-js/faker":"7.6.0","@types/datejs":"0.0.32","@types/lodash.debounce":"4.0.7","@types/node":"18.15.11","@types/react":"18.0.27","@types/react-dom":"18.0.10","@types/styled-components":"5.1.26","@typescript-eslint/eslint-plugin":"5.57.1","@typescript-eslint/parser":"5.57.1","@vitejs/plugin-react":"3.1.0","babel-plugin-styled-components":"2.0.7","eslint":"8.37.0","eslint-config-prettier":"8.8.0","eslint-import-resolver-typescript":"3.5.5","eslint-plugin-filenames":"1.3.2","eslint-plugin-import":"2.27.5","eslint-plugin-prettier":"4.2.1","eslint-plugin-react":"7.32.2","eslint-plugin-react-hooks":"4.6.0","husky":"8.0.0","lint-staged":"13.2.0","prettier":"2.8.7","rollup-plugin-visualizer":"5.9.0","typescript":"4.9.3","vite":"4.1.0","vite-plugin-dts":"2.2.0","vite-plugin-svgr":"2.4.0"},"gitHead":"52161049ed12a5991fc33f13af1c948d1a2daa5c","description":"

\r \"@bitnoise/react-scheduler\"\r
\r

\r ✨ https://scheduler.bitnoise.pl/ ✨\r
\r Open sourced, typescript","bugs":{"url":"https://github.com/1thomas13/react-scheduler/issues"},"homepage":"https://github.com/1thomas13/react-scheduler#readme","_id":"@1thomas13/react-scheduler@0.1.3","_nodeVersion":"18.15.0","_npmVersion":"9.6.2","dist":{"integrity":"sha512-dKZYUWxrl/X7mf9DBrW+8PyMFcrtymXZFPAzzuJEmhI1daSG3TuBPoe7bWQzZlYsCeeyWeLtqTrR1R0+0Y2Bmw==","shasum":"06f3536be51ada4dd99b04583f3dfd6de91887ef","tarball":"https://registry.npmjs.org/@1thomas13/react-scheduler/-/react-scheduler-0.1.3.tgz","fileCount":7,"unpackedSize":321307,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDa+Qf0Nmlqz2crwwj5S/O8uI5KcAWUGUNzouPoLI7J8QIhAKvmXcar0WMV8RRxh0hpVq6yMShkUwzEAPu3wqC+gHSc"}]},"_npmUser":{"name":"1thomas13","email":"thomi.b137@gmail.com"},"directories":{},"maintainers":[{"name":"1thomas13","email":"thomi.b137@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-scheduler_0.1.3_1703670051127_0.40655326094659183"},"_hasShrinkwrap":false},"0.1.5":{"name":"@1thomas13/react-scheduler","version":"0.1.5","type":"module","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Bitnoise/react-scheduler.git"},"keywords":["scheduler","gantt","gantt chart","react","timeline","calendar"],"author":{"name":"Bitnoise","url":"https://scheduler.bitnoise.pl/"},"scripts":{"dev":"vite","build":"tsc && vite build","preview":"vite preview","lint":"eslint .","lint:fix":"eslint --fix .","format":"prettier --write .","typecheck":"tsc -b","prepare":"husky install"},"main":"dist/index.umd.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.js","require":"./dist/index.umd.cjs"},"./dist/style.css":{"import":"./dist/style.css","require":"./dist/style.css"}},"publishConfig":{"access":"public"},"lint-staged":{"**/*.{ts,tsx}":["yarn run lint"]},"dependencies":{"dayjs":"1.11.7","lodash.debounce":"4.0.8","path":"0.12.7","react":"18.2.0","react-dom":"18.2.0","styled-components":"5.3.8","styled-normalize":"8.0.7"},"devDependencies":{"@faker-js/faker":"7.6.0","@types/datejs":"0.0.32","@types/lodash.debounce":"4.0.7","@types/node":"18.15.11","@types/react":"18.0.27","@types/react-dom":"18.0.10","@types/styled-components":"5.1.26","@typescript-eslint/eslint-plugin":"5.57.1","@typescript-eslint/parser":"5.57.1","@vitejs/plugin-react":"3.1.0","babel-plugin-styled-components":"2.0.7","eslint":"8.37.0","eslint-config-prettier":"8.8.0","eslint-import-resolver-typescript":"3.5.5","eslint-plugin-filenames":"1.3.2","eslint-plugin-import":"2.27.5","eslint-plugin-prettier":"4.2.1","eslint-plugin-react":"7.32.2","eslint-plugin-react-hooks":"4.6.0","husky":"8.0.0","lint-staged":"13.2.0","prettier":"2.8.7","rollup-plugin-visualizer":"5.9.0","typescript":"4.9.3","vite":"4.1.0","vite-plugin-dts":"2.2.0","vite-plugin-svgr":"2.4.0"},"gitHead":"09accc29404a5c450af5c1972465193452d42fed","description":"

\r \"@bitnoise/react-scheduler\"\r
\r

\r ✨ https://scheduler.bitnoise.pl/ ✨\r
\r Open sourced, typescript","bugs":{"url":"https://github.com/Bitnoise/react-scheduler/issues"},"homepage":"https://github.com/Bitnoise/react-scheduler#readme","_id":"@1thomas13/react-scheduler@0.1.5","_nodeVersion":"18.15.0","_npmVersion":"9.6.2","dist":{"integrity":"sha512-wd2RGLiqRqu2Sp22LRKYTZfYJZYzcGNrPm6gqV84HMHRIJ3TMhsCm0dAJfzWb3S0ZiWFSVhYfgYfKbq+5yQ3Tw==","shasum":"9cf4d637ca2d7d347a583516400517a9168035fb","tarball":"https://registry.npmjs.org/@1thomas13/react-scheduler/-/react-scheduler-0.1.5.tgz","fileCount":3,"unpackedSize":14860,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCr4MoO5PFtrMNSdazvjd93e+gHCdTZ+7BoSSENepEB4gIhAIN/Lc0LnjuTyS0mY2XadtDNc4RL9cjf0xNMUe5NNHe3"}]},"_npmUser":{"name":"1thomas13","email":"thomi.b137@gmail.com"},"directories":{},"maintainers":[{"name":"1thomas13","email":"thomi.b137@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-scheduler_0.1.5_1707409414648_0.546523308845267"},"_hasShrinkwrap":false}},"time":{"created":"2023-12-27T09:36:51.195Z","0.1.2":"2023-12-27T09:36:51.418Z","modified":"2024-02-08T16:23:34.996Z","0.1.3":"2023-12-27T09:40:51.296Z","0.1.5":"2024-02-08T16:23:34.813Z"},"maintainers":[{"name":"1thomas13","email":"thomi.b137@gmail.com"}],"description":"

\r \"@bitnoise/react-scheduler\"\r
\r

\r ✨ https://scheduler.bitnoise.pl/ ✨\r
\r Open sourced, typescript","homepage":"https://github.com/Bitnoise/react-scheduler#readme","keywords":["scheduler","gantt","gantt chart","react","timeline","calendar"],"repository":{"type":"git","url":"git+https://github.com/Bitnoise/react-scheduler.git"},"author":{"name":"Bitnoise","url":"https://scheduler.bitnoise.pl/"},"bugs":{"url":"https://github.com/Bitnoise/react-scheduler/issues"},"license":"MIT","readme":"

\r\n \"@bitnoise/react-scheduler\"\r\n
\r\n

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

\r\n
\r\n Youtube Tutorial\r\n   •  \r\n npm\r\n   •  \r\n Report an issue\r\n
\r\n
\r\n
\r\n\r\n### Installation\r\n\r\n```bash\r\n# yarn\r\nyarn add '@bitnoi.se/react-scheduler'\r\n# npm\r\nnpm install '@bitnoi.se/react-scheduler'\r\n```\r\n\r\n### Example usage\r\n\r\n1. import required styles for scheduler\r\n\r\n```ts\r\nimport \"@bitnoi.se/react-scheduler/dist/style.css\";\r\n```\r\n\r\n2. Import Scheduler component into your project\r\n\r\n```ts\r\nimport { Scheduler, SchedulerData } from \"@bitnoi.se/react-scheduler\";\r\n\r\ndefault export function Component() {\r\n const [filterButtonState, setFilterButtonState] = useState(0);\r\n\r\n return (\r\n
\r\n console.log(newRange)}\r\n onTileClick={(clickedResource) => console.log(clickedResource)}\r\n onItemClick={(item) => console.log(item)}\r\n onFilterData={() => {\r\n // Some filtering logic...\r\n setFilterButtonState(1);\r\n }}\r\n onClearFilterData={() => {\r\n // Some clearing filters logic...\r\n setFilterButtonState(0)\r\n }}\r\n config={{\r\n zoom: 0,\r\n filterButtonState,\r\n }}\r\n />\r\n
\r\n );\r\n}\r\n\r\nconst mockedSchedulerData: SchedulerData = [\r\n {\r\n id: \"070ac5b5-8369-4cd2-8ba2-0a209130cc60\",\r\n label: {\r\n icon: \"https://picsum.photos/24\",\r\n title: \"Joe Doe\",\r\n subtitle: \"Frontend Developer\"\r\n },\r\n data: [\r\n {\r\n id: \"8b71a8a5-33dd-4fc8-9caa-b4a584ba3762\",\r\n startDate: new Date(\"2023-04-13T15:31:24.272Z\"),\r\n endDate: new Date(\"2023-08-28T10:28:22.649Z\"),\r\n occupancy: 3600,\r\n title: \"Project A\",\r\n subtitle: \"Subtitle A\",\r\n description: \"array indexing Salad West Account\",\r\n bgColor: \"rgb(254,165,177)\"\r\n },\r\n {\r\n id: \"22fbe237-6344-4c8e-affb-64a1750f33bd\",\r\n startDate: new Date(\"2023-10-07T08:16:31.123Z\"),\r\n endDate: new Date(\"2023-11-15T21:55:23.582Z\"),\r\n occupancy: 2852,\r\n title: \"Project B\",\r\n subtitle: \"Subtitle B\",\r\n description: \"Tuna Home pascal IP drive\",\r\n bgColor: \"rgb(254,165,177)\"\r\n },\r\n {\r\n id: \"3601c1cd-f4b5-46bc-8564-8c983919e3f5\",\r\n startDate: new Date(\"2023-03-30T22:25:14.377Z\"),\r\n endDate: new Date(\"2023-09-01T07:20:50.526Z\"),\r\n occupancy: 1800,\r\n title: \"Project C\",\r\n subtitle: \"Subtitle C\",\r\n bgColor: \"rgb(254,165,177)\"\r\n },\r\n {\r\n id: \"b088e4ac-9911-426f-aef3-843d75e714c2\",\r\n startDate: new Date(\"2023-10-28T10:08:22.986Z\"),\r\n endDate: new Date(\"2023-10-30T12:30:30.150Z\"),\r\n occupancy: 11111,\r\n title: \"Project D\",\r\n subtitle: \"Subtitle D\",\r\n description: \"Garden heavy an software Metal\",\r\n bgColor: \"rgb(254,165,177)\"\r\n }\r\n ]\r\n }\r\n];\r\n\r\n```\r\n\r\n3. If some problems occur, please see our troubleshooting section below.\r\n\r\n### Scheduler API\r\n\r\n##### Scheduler Component Props\r\n\r\n| Property Name | Type | Arguments | Description |\r\n| ----------------- | ---------- | --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |\r\n| isLoading | `boolean` | - | shows loading indicators on scheduler |\r\n| onRangeChange | `function` | updated `startDate` and `endDate` | runs whenever user reaches end of currently rendered canvas |\r\n| onTileClick | `function` | clicked resource data | detects resource click |\r\n| onItemClick | `function` | clicked left column item data | detects item click on left column |\r\n| onFilterData | `function` | - | callback firing when filter button was clicked |\r\n| onClearFilterData | `function` | - | callback firing when clear filters button was clicked (clearing button is visible **only** when filterButtonState is set to `>0`) |\r\n| config | `Config` | - | object with scheduler config properties |\r\n\r\n##### Scheduler Config Object\r\n\r\n| Property Name | Type | Default | Description |\r\n| ------------------------------------ | ------------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| zoom | `0` or `1` | 0 | `0` - display grid divided into weeks `1` - display grid divided into days |\r\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) |\r\n| maxRecordsPerPage | `number` | 50 | number of items from `SchedulerData` visible per page |\r\n| lang | `en` or `pl` | en | scheduler's language |\r\n| includeTakenHoursOnWeekendsInDayView | `boolean` | `false` | show weekends as taken when given resource is longer than a week |\r\n\r\n##### Scheduler Data\r\n\r\narray of chart rows with shape of\r\n| Property Name | Type | Description |\r\n| -------- | --------------------- | -------------------------------- |\r\n| id | `string` | unique row id |\r\n| label | `string` | row's label, `e.g person's name` |\r\n| data | `Array` | array of `resources` |\r\n\r\n##### Left Colum Item Data\r\n\r\ndata that is accessible as argument of `onItemClick` callback\r\n| Property Name | Type | Description |\r\n| -------- | --------------------- | -------------------------------- |\r\n| id | `string` | unique row id |\r\n| label | `string` | row's label, `e.g person's name` |\r\n\r\n##### Resource Item\r\n\r\nitem that will be visible on the grid as tile and that will be accessible as argument of `onTileClick` event\r\n| Property Name | Type | Description |\r\n| ----------- | ----------------- | ------------------------------------------------------------------------------------------------------- |\r\n| id | `string` | unique resource id |\r\n| title | `string` | resource title that will be displayed on resource tile |\r\n| subtitle | `string (optional)` | resource subtitle that will be displayed on resource tile |\r\n| description | `string (optional)` | resource description that will be displayed on resource tile |\r\n| startDate | `Date` | date for calculating start position for resource |\r\n| endDate | `Date` | date for calculating end position for resource |\r\n| occupancy | `number` | number of seconds resource takes up for given row that will be visible on resource tooltip when hovered |\r\n| bgColor | `string (optional)` | tile color |\r\n\r\n### Troubleshooting\r\n\r\n- For using Scheduler with RemixJS make sure to add `@bitnoi.se/react-scheduler` to `serverDependenciesToBundle` in `remix.config.js` like so:\r\n\r\n```js\r\n// remix.config.js\r\n/** @type {import('@remix-run/dev').AppConfig} */\r\nmodule.exports = {\r\n\t// ...\r\n\tserverDependenciesToBundle: [..., \"@bitnoi.se/react-scheduler\"],\r\n};\r\n```\r\n\r\n- When using with NextJS (app router) Scheduler needs to be wrapped with component with `use client`\r\n\r\n```ts\r\n\"use client\"\r\nimport { Scheduler, SchedulerProps } from \"@bitnoi.se/react-scheduler\";\r\n\r\ndefault export function SchedulerClient(props: SchedulerProps) {\r\n\treturn ;\r\n}\r\n\r\n```\r\n\r\n- When using with NextJS (pages router) it needs to be imported using `dynamic`:\r\n\r\n```ts\r\nimport dynamic from \"next/dynamic\";\r\nconst Scheduler = dynamic(() => import(\"@bitnoi.se/react-scheduler\").then((mod) => mod.Scheduler), {\r\n ssr: false\r\n});\r\n```\r\n\r\n### Known Issues\r\n\r\n1. No responsiveness\r\n2. Slower performance on Firefox when working with big set of data due to Firefox being slower working with canvas\r\n\r\n### How to contribute\r\n\r\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.\r\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.\r\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:\r\n - Clone the repository and create your own branch: `git checkout -b feat/your-branch-name`.\r\n - Implement your changes, following the **code style and guidelines** from [development.md](development.md).\r\n - Test your changes to ensure they work as expected.\r\n - Commit your changes and push to your forked repository.\r\n - Open a pull request against our main repository's `master` branch.\r\n - add at least 1 reviewer\r\n - link correct issue\r\n\r\n### Contact\r\n\r\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!\r\n\r\n### License\r\n\r\nMIT Licensed. Copyright (c) Bitnoise 2023.\r\n","readmeFilename":"readme.md"}