@isma91/react-scheduler 4.0.0 → 4.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +4 -76
- package/.github/workflows/publish.yml +0 -29
- package/.github/workflows/tests.yml +0 -35
- package/.gitignore +0 -32
- package/.husky/pre-commit +0 -2
- package/.prettierignore +0 -1
- package/.prettierrc.json +0 -7
- package/.yarnrc.yml +0 -1
- package/dist/LICENSE +0 -24
- package/dist/README.md +0 -172
- package/dist/package.json +0 -65
- package/eslint.config.js +0 -79
- package/index.html +0 -41
- package/jest.config.ts +0 -194
- package/public/favicon.ico +0 -0
- package/public/logo192.png +0 -0
- package/public/logo512.png +0 -0
- package/public/manifest.json +0 -25
- package/public/robots.txt +0 -3
- package/scripts/post-pack.js +0 -34
- package/src/App.tsx +0 -25
- package/src/Page1.tsx +0 -67
- package/src/events.tsx +0 -227
- package/src/index.tsx +0 -21
- package/src/lib/SchedulerComponent.tsx +0 -78
- package/src/lib/__tests__/index.test.tsx +0 -24
- package/src/lib/components/common/Cell.tsx +0 -52
- package/src/lib/components/common/LocaleArrow.tsx +0 -38
- package/src/lib/components/common/ResourceHeader.tsx +0 -73
- package/src/lib/components/common/Tabs.tsx +0 -119
- package/src/lib/components/common/TodayTypo.tsx +0 -44
- package/src/lib/components/common/WithResources.tsx +0 -98
- package/src/lib/components/events/Actions.tsx +0 -65
- package/src/lib/components/events/AgendaEventsList.tsx +0 -115
- package/src/lib/components/events/CurrentTimeBar.tsx +0 -59
- package/src/lib/components/events/EmptyAgenda.tsx +0 -27
- package/src/lib/components/events/EventItem.tsx +0 -180
- package/src/lib/components/events/EventItemPopover.tsx +0 -179
- package/src/lib/components/events/MonthEvents.tsx +0 -141
- package/src/lib/components/events/TodayEvents.tsx +0 -99
- package/src/lib/components/hoc/DateProvider.tsx +0 -19
- package/src/lib/components/inputs/DatePicker.tsx +0 -95
- package/src/lib/components/inputs/Input.tsx +0 -113
- package/src/lib/components/inputs/SelectInput.tsx +0 -164
- package/src/lib/components/month/MonthTable.tsx +0 -207
- package/src/lib/components/nav/DayDateBtn.tsx +0 -77
- package/src/lib/components/nav/MonthDateBtn.tsx +0 -80
- package/src/lib/components/nav/Navigation.tsx +0 -201
- package/src/lib/components/nav/WeekDateBtn.tsx +0 -89
- package/src/lib/components/week/WeekTable.tsx +0 -229
- package/src/lib/helpers/constants.ts +0 -4
- package/src/lib/helpers/generals.tsx +0 -354
- package/src/lib/hooks/useArrowDisable.ts +0 -26
- package/src/lib/hooks/useCellAttributes.ts +0 -67
- package/src/lib/hooks/useDragAttributes.ts +0 -31
- package/src/lib/hooks/useEventPermissions.ts +0 -42
- package/src/lib/hooks/useStore.ts +0 -8
- package/src/lib/hooks/useSyncScroll.ts +0 -31
- package/src/lib/hooks/useWindowResize.ts +0 -37
- package/src/lib/index.tsx +0 -14
- package/src/lib/positionManger/context.ts +0 -14
- package/src/lib/positionManger/provider.tsx +0 -113
- package/src/lib/positionManger/usePosition.ts +0 -8
- package/src/lib/store/context.ts +0 -5
- package/src/lib/store/default.ts +0 -157
- package/src/lib/store/provider.tsx +0 -211
- package/src/lib/store/types.ts +0 -33
- package/src/lib/styles/styles.ts +0 -256
- package/src/lib/types.ts +0 -423
- package/src/lib/views/Day.tsx +0 -265
- package/src/lib/views/DayAgenda.tsx +0 -57
- package/src/lib/views/Editor.tsx +0 -258
- package/src/lib/views/Month.tsx +0 -82
- package/src/lib/views/MonthAgenda.tsx +0 -84
- package/src/lib/views/Week.tsx +0 -92
- package/src/lib/views/WeekAgenda.tsx +0 -81
- package/src/vite-env.d.ts +0 -3
- package/tsconfig.build.json +0 -5
- package/tsconfig.json +0 -27
- package/vite.config.js +0 -40
- /package/{dist/SchedulerComponent.d.ts → SchedulerComponent.d.ts} +0 -0
- /package/{dist/components → components}/common/Cell.d.ts +0 -0
- /package/{dist/components → components}/common/LocaleArrow.d.ts +0 -0
- /package/{dist/components → components}/common/ResourceHeader.d.ts +0 -0
- /package/{dist/components → components}/common/Tabs.d.ts +0 -0
- /package/{dist/components → components}/common/TodayTypo.d.ts +0 -0
- /package/{dist/components → components}/common/WithResources.d.ts +0 -0
- /package/{dist/components → components}/events/Actions.d.ts +0 -0
- /package/{dist/components → components}/events/AgendaEventsList.d.ts +0 -0
- /package/{dist/components → components}/events/CurrentTimeBar.d.ts +0 -0
- /package/{dist/components → components}/events/EmptyAgenda.d.ts +0 -0
- /package/{dist/components → components}/events/EventItem.d.ts +0 -0
- /package/{dist/components → components}/events/EventItemPopover.d.ts +0 -0
- /package/{dist/components → components}/events/MonthEvents.d.ts +0 -0
- /package/{dist/components → components}/events/TodayEvents.d.ts +0 -0
- /package/{dist/components → components}/hoc/DateProvider.d.ts +0 -0
- /package/{dist/components → components}/inputs/DatePicker.d.ts +0 -0
- /package/{dist/components → components}/inputs/Input.d.ts +0 -0
- /package/{dist/components → components}/inputs/SelectInput.d.ts +0 -0
- /package/{dist/components → components}/month/MonthTable.d.ts +0 -0
- /package/{dist/components → components}/nav/DayDateBtn.d.ts +0 -0
- /package/{dist/components → components}/nav/MonthDateBtn.d.ts +0 -0
- /package/{dist/components → components}/nav/Navigation.d.ts +0 -0
- /package/{dist/components → components}/nav/WeekDateBtn.d.ts +0 -0
- /package/{dist/components → components}/week/WeekTable.d.ts +0 -0
- /package/{dist/helpers → helpers}/constants.d.ts +0 -0
- /package/{dist/helpers → helpers}/generals.d.ts +0 -0
- /package/{dist/hooks → hooks}/useArrowDisable.d.ts +0 -0
- /package/{dist/hooks → hooks}/useCellAttributes.d.ts +0 -0
- /package/{dist/hooks → hooks}/useDragAttributes.d.ts +0 -0
- /package/{dist/hooks → hooks}/useEventPermissions.d.ts +0 -0
- /package/{dist/hooks → hooks}/useStore.d.ts +0 -0
- /package/{dist/hooks → hooks}/useSyncScroll.d.ts +0 -0
- /package/{dist/hooks → hooks}/useWindowResize.d.ts +0 -0
- /package/{dist/index.d.ts → index.d.ts} +0 -0
- /package/{dist/index.js → index.js} +0 -0
- /package/{dist/positionManger → positionManger}/context.d.ts +0 -0
- /package/{dist/positionManger → positionManger}/provider.d.ts +0 -0
- /package/{dist/positionManger → positionManger}/usePosition.d.ts +0 -0
- /package/{dist/store → store}/context.d.ts +0 -0
- /package/{dist/store → store}/default.d.ts +0 -0
- /package/{dist/store → store}/provider.d.ts +0 -0
- /package/{dist/store → store}/types.d.ts +0 -0
- /package/{dist/styles → styles}/styles.d.ts +0 -0
- /package/{dist/types.d.ts → types.d.ts} +0 -0
- /package/{dist/views → views}/Day.d.ts +0 -0
- /package/{dist/views → views}/DayAgenda.d.ts +0 -0
- /package/{dist/views → views}/Editor.d.ts +0 -0
- /package/{dist/views → views}/Month.d.ts +0 -0
- /package/{dist/views → views}/MonthAgenda.d.ts +0 -0
- /package/{dist/views → views}/Week.d.ts +0 -0
- /package/{dist/views → views}/WeekAgenda.d.ts +0 -0
package/package.json
CHANGED
|
@@ -1,27 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@isma91/react-scheduler",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.1",
|
|
4
4
|
"description": "React scheduler component based on Material-UI & date-fns",
|
|
5
5
|
"files": [
|
|
6
6
|
"*"
|
|
7
7
|
],
|
|
8
8
|
"type": "module",
|
|
9
|
-
"scripts": {
|
|
10
|
-
"start": "vite serve",
|
|
11
|
-
"build": "vite build --mode production",
|
|
12
|
-
"postbuild": "node ./scripts/post-pack.js",
|
|
13
|
-
"local:pack": "npm run build && cd dist && npm pack && mv *.tgz ../",
|
|
14
|
-
"format": "prettier --check \"**/*.{js,jsx,ts,tsx,json}\"",
|
|
15
|
-
"format:write": "prettier --write \"**/*.{js,jsx,ts,tsx,json}\"",
|
|
16
|
-
"lint": "npm run types && eslint .",
|
|
17
|
-
"lint:fix": "eslint . --fix",
|
|
18
|
-
"types": "tsc --noEmit",
|
|
19
|
-
"prepare": "husky install",
|
|
20
|
-
"pre:commit": "lint-staged",
|
|
21
|
-
"test": "jest",
|
|
22
|
-
"test:watch": "jest --watch",
|
|
23
|
-
"test:ci": "jest --ci"
|
|
24
|
-
},
|
|
25
9
|
"exports": {
|
|
26
10
|
"./types": {
|
|
27
11
|
"import": "./types.d.ts"
|
|
@@ -30,14 +14,6 @@
|
|
|
30
14
|
"import": "./index.js"
|
|
31
15
|
}
|
|
32
16
|
},
|
|
33
|
-
"lint-staged": {
|
|
34
|
-
"**/*.{ts,js,tsx,jsx}": [
|
|
35
|
-
"npm run lint"
|
|
36
|
-
],
|
|
37
|
-
"**/*.{ts,js,tsx,jsx,json,yml}": [
|
|
38
|
-
"npm run format:write"
|
|
39
|
-
]
|
|
40
|
-
},
|
|
41
17
|
"repository": {
|
|
42
18
|
"type": "git",
|
|
43
19
|
"url": "https://github.com/isma91/react-scheduler.git"
|
|
@@ -53,55 +29,6 @@
|
|
|
53
29
|
"scheduler"
|
|
54
30
|
],
|
|
55
31
|
"license": "MIT",
|
|
56
|
-
"devDependencies": {
|
|
57
|
-
"@emotion/react": "^11.14.0",
|
|
58
|
-
"@emotion/styled": "^11.14.0",
|
|
59
|
-
"@eslint/compat": "^1.2.6",
|
|
60
|
-
"@eslint/eslintrc": "^3.2.0",
|
|
61
|
-
"@eslint/js": "^9.20.0",
|
|
62
|
-
"@mui/icons-material": ">=7.0.2",
|
|
63
|
-
"@mui/material": ">=7.0.2",
|
|
64
|
-
"@mui/x-date-pickers": ">=8.0.0",
|
|
65
|
-
"@testing-library/dom": "^10.4.0",
|
|
66
|
-
"@testing-library/jest-dom": "^6.6.3",
|
|
67
|
-
"@testing-library/react": "^16.2.0",
|
|
68
|
-
"@testing-library/user-event": "^14.6.1",
|
|
69
|
-
"@types/jest": "^29.5.14",
|
|
70
|
-
"@types/react": "^19.0.10",
|
|
71
|
-
"@types/react-dom": "^19.0.4",
|
|
72
|
-
"@types/rollup-plugin-peer-deps-external": "^2",
|
|
73
|
-
"@typescript-eslint/parser": "^8.24.1",
|
|
74
|
-
"@vitejs/plugin-react": "^4.3.4",
|
|
75
|
-
"date-fns": ">=4.1.0",
|
|
76
|
-
"eslint": "^9.20.1",
|
|
77
|
-
"eslint-import-resolver-typescript": "^3.8.3",
|
|
78
|
-
"eslint-plugin-import": "^2.31.0",
|
|
79
|
-
"eslint-plugin-jsx-a11y": "^6.10.2",
|
|
80
|
-
"eslint-plugin-promise": "^7.2.1",
|
|
81
|
-
"eslint-plugin-react": "^7.37.4",
|
|
82
|
-
"eslint-plugin-react-hooks": "^5.2.0",
|
|
83
|
-
"eslint-plugin-react-refresh": "^0.4.19",
|
|
84
|
-
"globals": "^16.0.0",
|
|
85
|
-
"husky": "^9.1.7",
|
|
86
|
-
"jest": "^29.7.0",
|
|
87
|
-
"jest-environment-jsdom": "^29.7.0",
|
|
88
|
-
"lint-staged": "^15.4.3",
|
|
89
|
-
"prettier": "^3.5.1",
|
|
90
|
-
"react": ">=19.0.0",
|
|
91
|
-
"react-dom": "^19.0.0",
|
|
92
|
-
"react-router-dom": "^7.3.0",
|
|
93
|
-
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
94
|
-
"rrule": "^2.8.1",
|
|
95
|
-
"ts-jest": "^29.2.5",
|
|
96
|
-
"ts-node": "^10.9.2",
|
|
97
|
-
"typescript": "^5.7.3",
|
|
98
|
-
"typescript-eslint": "^8.24.1",
|
|
99
|
-
"vite": "^6.1.1",
|
|
100
|
-
"vite-plugin-checker": "^0.9.0",
|
|
101
|
-
"vite-plugin-dts": "^4.5.0",
|
|
102
|
-
"vite-plugin-svgr": "^4.3.0",
|
|
103
|
-
"vite-tsconfig-paths": "^5.1.4"
|
|
104
|
-
},
|
|
105
32
|
"peerDependencies": {
|
|
106
33
|
"@mui/icons-material": ">=7.0.0",
|
|
107
34
|
"@mui/material": ">=7.0.0",
|
|
@@ -133,5 +60,6 @@
|
|
|
133
60
|
"last 1 firefox version",
|
|
134
61
|
"last 1 safari version"
|
|
135
62
|
]
|
|
136
|
-
}
|
|
137
|
-
|
|
63
|
+
},
|
|
64
|
+
"homepage": "https://github.com/aldabil21/react-scheduler#readme"
|
|
65
|
+
}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
name: npm publish
|
|
2
|
-
on:
|
|
3
|
-
release:
|
|
4
|
-
types: [created]
|
|
5
|
-
jobs:
|
|
6
|
-
publish:
|
|
7
|
-
runs-on: ubuntu-latest
|
|
8
|
-
steps:
|
|
9
|
-
- name: Checkout
|
|
10
|
-
uses: actions/checkout@v4
|
|
11
|
-
|
|
12
|
-
- name: Setup Node
|
|
13
|
-
uses: actions/setup-node@v4
|
|
14
|
-
with:
|
|
15
|
-
node-version: 20
|
|
16
|
-
registry-url: https://registry.npmjs.org/
|
|
17
|
-
|
|
18
|
-
- name: Install
|
|
19
|
-
run: npm install
|
|
20
|
-
|
|
21
|
-
- name: Pack
|
|
22
|
-
run: npm run build
|
|
23
|
-
|
|
24
|
-
- name: Publish
|
|
25
|
-
run: |
|
|
26
|
-
cd dist
|
|
27
|
-
npm publish
|
|
28
|
-
env:
|
|
29
|
-
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
name: Tests
|
|
2
|
-
on:
|
|
3
|
-
pull_request:
|
|
4
|
-
branches: ["master"]
|
|
5
|
-
jobs:
|
|
6
|
-
Install:
|
|
7
|
-
runs-on: ubuntu-latest
|
|
8
|
-
strategy:
|
|
9
|
-
matrix:
|
|
10
|
-
node-version: [20.x, 22.x]
|
|
11
|
-
|
|
12
|
-
steps:
|
|
13
|
-
- name: Checkout
|
|
14
|
-
uses: actions/checkout@v4
|
|
15
|
-
|
|
16
|
-
- name: Create lock file
|
|
17
|
-
run: touch package-lock.json
|
|
18
|
-
|
|
19
|
-
- name: Use Node.js ${{ matrix.node-version }}
|
|
20
|
-
uses: actions/setup-node@v4
|
|
21
|
-
with:
|
|
22
|
-
node-version: ${{ matrix.node-version }}
|
|
23
|
-
cache: "npm"
|
|
24
|
-
|
|
25
|
-
- name: Install
|
|
26
|
-
run: npm install
|
|
27
|
-
|
|
28
|
-
- name: Format
|
|
29
|
-
run: npm run format:write
|
|
30
|
-
|
|
31
|
-
- name: Lint
|
|
32
|
-
run: npm run lint
|
|
33
|
-
|
|
34
|
-
- name: Test
|
|
35
|
-
run: npm run test:ci
|
package/.gitignore
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
#
|
|
2
|
-
dist
|
|
3
|
-
.vscode
|
|
4
|
-
examples
|
|
5
|
-
|
|
6
|
-
#yarn
|
|
7
|
-
.yarn
|
|
8
|
-
yarn.lock
|
|
9
|
-
|
|
10
|
-
# dependencies
|
|
11
|
-
/node_modules
|
|
12
|
-
package-lock.json
|
|
13
|
-
/.pnp
|
|
14
|
-
.pnp.js
|
|
15
|
-
|
|
16
|
-
# testing
|
|
17
|
-
/coverage
|
|
18
|
-
*.tgz
|
|
19
|
-
|
|
20
|
-
# production
|
|
21
|
-
/build
|
|
22
|
-
|
|
23
|
-
# misc
|
|
24
|
-
.DS_Store
|
|
25
|
-
.env.local
|
|
26
|
-
.env.development.local
|
|
27
|
-
.env.test.local
|
|
28
|
-
.env.production.local
|
|
29
|
-
|
|
30
|
-
npm-debug.log*
|
|
31
|
-
yarn-debug.log*
|
|
32
|
-
yarn-error.log*
|
package/.husky/pre-commit
DELETED
package/.prettierignore
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
dist
|
package/.prettierrc.json
DELETED
package/.yarnrc.yml
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
nodeLinker: node-modules
|
package/dist/LICENSE
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
This is free and unencumbered software released into the public domain.
|
|
2
|
-
|
|
3
|
-
Anyone is free to copy, modify, publish, use, compile, sell, or
|
|
4
|
-
distribute this software, either in source code form or as a compiled
|
|
5
|
-
binary, for any purpose, commercial or non-commercial, and by any
|
|
6
|
-
means.
|
|
7
|
-
|
|
8
|
-
In jurisdictions that recognize copyright laws, the author or authors
|
|
9
|
-
of this software dedicate any and all copyright interest in the
|
|
10
|
-
software to the public domain. We make this dedication for the benefit
|
|
11
|
-
of the public at large and to the detriment of our heirs and
|
|
12
|
-
successors. We intend this dedication to be an overt act of
|
|
13
|
-
relinquishment in perpetuity of all present and future rights to this
|
|
14
|
-
software under copyright law.
|
|
15
|
-
|
|
16
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
17
|
-
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
|
18
|
-
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
|
19
|
-
IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
|
|
20
|
-
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
|
|
21
|
-
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
|
22
|
-
OTHER DEALINGS IN THE SOFTWARE.
|
|
23
|
-
|
|
24
|
-
For more information, please refer to <https://unlicense.org>
|
package/dist/README.md
DELETED
|
@@ -1,172 +0,0 @@
|
|
|
1
|
-
# React Scheduler Component
|
|
2
|
-
|
|
3
|
-
> :rocket: **Fork Notice**: This is a modernized fork of [@aldabil/react-scheduler](https://github.com/aldabil21/react-scheduler) with:
|
|
4
|
-
> - React 19 support
|
|
5
|
-
> - MUI 7 / @mui/x-date-pickers 8 support
|
|
6
|
-
> - date-fns 4 support
|
|
7
|
-
> - Additional features (see changelog)
|
|
8
|
-
|
|
9
|
-
[](https://www.npmjs.com/package/@isma91/react-scheduler)
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
> :warning: **Notice**: This component uses `mui`/`emotion`/`date-fns`. if your project is not already using these libs, this component may not be suitable.
|
|
13
|
-
|
|
14
|
-
## Installation
|
|
15
|
-
|
|
16
|
-
```jsx
|
|
17
|
-
npm i @isma91/react-scheduler
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
If you plan to use `recurring` events in your scheduler, install `rrule` [package](https://www.npmjs.com/package/rrule)
|
|
21
|
-
|
|
22
|
-
## Usage
|
|
23
|
-
|
|
24
|
-
```jsx
|
|
25
|
-
import { Scheduler } from "@isma91/react-scheduler";
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
## Example
|
|
29
|
-
|
|
30
|
-
```jsx
|
|
31
|
-
<Scheduler
|
|
32
|
-
view="month"
|
|
33
|
-
events={[
|
|
34
|
-
{
|
|
35
|
-
event_id: 1,
|
|
36
|
-
title: "Event 1",
|
|
37
|
-
start: new Date("2021/5/2 09:30"),
|
|
38
|
-
end: new Date("2021/5/2 10:30"),
|
|
39
|
-
},
|
|
40
|
-
{
|
|
41
|
-
event_id: 2,
|
|
42
|
-
title: "Event 2",
|
|
43
|
-
start: new Date("2021/5/4 10:00"),
|
|
44
|
-
end: new Date("2021/5/4 11:00"),
|
|
45
|
-
},
|
|
46
|
-
]}
|
|
47
|
-
/>
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
### Scheduler Props
|
|
51
|
-
|
|
52
|
-
All props are _optional_
|
|
53
|
-
| Prop | Value |
|
|
54
|
-
|----------|-------------|
|
|
55
|
-
| height | number. Min height of table. <br> _Default_: 600
|
|
56
|
-
| view | string. Initial view to load. options: "week", "month", "day". <br> _Default_: "week" (if it's not null)
|
|
57
|
-
| agenda | boolean. Activate agenda view
|
|
58
|
-
| alwaysShowAgendaDays | boolean. if true, day rows without events will be shown
|
|
59
|
-
| month | Object. Month view props. <br> _default_: <pre>{<br>weekDays: [0, 1, 2, 3, 4, 5], <br>weekStartOn: 6, <br>startHour: 9, <br>endHour: 17,<br>cellRenderer?:(props: CellProps) => React.ReactNode,<br>navigation: true,<br>disableGoToDay: false<br>}</pre>
|
|
60
|
-
| week | Object. Week view props. <br> _default_: <pre>{ <br>weekDays: [0, 1, 2, 3, 4, 5], <br>weekStartOn: 6, <br>startHour: 9, <br>endHour: 17,<br>step: 60,<br>cellRenderer?:(props: CellProps) => React.ReactNode,<br>navigation: true,<br>disableGoToDay: false<br>}</pre>
|
|
61
|
-
| day | Object. Day view props. <br> _default_: <pre>{<br>startHour: 9, <br>endHour: 17, <br>step: 60,<br>cellRenderer?:(props: CellProps) => React.ReactNode,<br>hourRenderer?:(hour: string) => React.ReactNode,<br>navigation: true<br>}</pre>
|
|
62
|
-
| selectedDate | Date. Initial selected date. <br>_Default_: `new Date()`
|
|
63
|
-
| navigation | boolean. Show/Hide top bar date navigation. <br>_Default_: `true`
|
|
64
|
-
| navigationPickerProps | CalendarPickerProps for top bar date navigation. Ref [CalendarPicker API](https://mui.com/x/api/date-pickers/calendar-picker/#main-content)
|
|
65
|
-
| disableViewNavigator | boolean. Show/Hide top bar date View navigator. <br>_Default_: `false`
|
|
66
|
-
| events | Array of ProcessedEvent. <br>_Default_: [] <br> <pre>type ProcessedEvent = {<br>event*id: number or string;<br>title: string;<br>subtitle?: string;<br>start: Date;<br>end: Date;<br>disabled?: boolean;<br>recurring: RRule;<br>color?: string or "palette.path";<br>textColor?: string or "palette.path";<br>editable?: boolean;<br>deletable?: boolean;<br>draggable?: boolean;<br>allDay?: boolean;<br>agendaAvatar?: React.ReactElement \| string<br>sx?: Mui sx prop<br>} </pre>
|
|
67
|
-
| eventRenderer | Function(event:ProcessedEvent): React.ReactNode.<br> A function that overrides the event item render function, see demo \_Custom Event Renderer* below
|
|
68
|
-
| editable | boolean. If `true`, the scheduler cell click will not open the editor, and the event item will not show the edit button, this is applied to all events, and can be overridden in each event property, see `ProcessedEvent` type.
|
|
69
|
-
| deletable | boolean. Whether the event item will show the delete button, this is applied to all events, and can be overridden in each event property, see `ProcessedEvent` type.
|
|
70
|
-
| draggable | boolean. Whether activate drag&drop for the events, this is applied to all events, and can be overridden in each event property, see `ProcessedEvent` type.
|
|
71
|
-
| getRemoteEvents | Function(RemoteQuery). Return promise of array of events. Can be used as a callback to fetch events by parent component or fetch.<br><pre>type RemoteQuery = { <br> start: Date;<br> end: Date;<br> view: "day" \| "week" \| "month";<br>}</pre>
|
|
72
|
-
| fields | Array of extra fields with configurations. <br> Example: <pre> { <br> name: "description", <br> type: "input" , <br> config: { label: "Description", required: true, min: 3, email: true, variant: "outlined", ....<br>}</pre>
|
|
73
|
-
| loading | boolean. Loading state of the calendar table
|
|
74
|
-
| loadingComponent | Custom component to override the default `CircularProgress`
|
|
75
|
-
| onConfirm | Function(event, action). Return promise with the new added/edited event use with remote data. <br> _action_: `add` | `edit`
|
|
76
|
-
| onDelete | Function(id) Return promise with the deleted event id to use with remote data.
|
|
77
|
-
| customEditor | Function(scheduler). Override editor modal. <br> Provided prop _scheduler_ object with helper props: <br> <pre>{<br>state: state obj, <br>close(): void<br>loading(status: boolean): void<br>edited?: ProcessedEvent<br>onConfirm(event: ProcessedEvent, action:EventActions): void<br>}</pre>
|
|
78
|
-
| customViewer | Function(event: ProcessedEvent, close: () => void). Used to render fully customized content of the event popper. If used, `viewerExtraComponent` & `viewerTitleComponent` will be ignored
|
|
79
|
-
| viewerExtraComponent | Function(fields, event) OR Component. Additional component in event viewer popper
|
|
80
|
-
| viewerTitleComponent | Function(event). Helper function to render custom title in event popper
|
|
81
|
-
| viewerSubtitleComponent | Function(event). Helper function to render custom subtitle in event popper
|
|
82
|
-
| disableViewer | boolean. If true, the viewer popover will be disabled globally
|
|
83
|
-
| resources | Array. Resources array to split event views with resources <br>_Example_ <pre>{<br>assignee: 1,<br>text: "User One", <br>subtext: "Sales Manager", <br>avatar: "https://picsum.photos/200/300", <br>color: "#ab2d2d",<br> }</pre>
|
|
84
|
-
| resourceFields | Object. Map the resources correct fields. <br>_Example_:<pre>{<br>idField: "admin*id", <br>textField: "title", <br>subTextField: "mobile",<br>avatarField: "title", <br>colorField: "background",<br>}</pre>
|
|
85
|
-
| resourceHeaderComponent | Function(resource). Override header component of resource
|
|
86
|
-
| resourceViewMode | Display resources mode. <br>\_Options*: `default` | `vertical` | `tabs`
|
|
87
|
-
| onResourceChange | Function(resource: Resource): void. Triggered when the resource tabs changes, only applicable when `resourceViewMode="tabs"`
|
|
88
|
-
| direction | string. Table direction. `rtl` | `ltr`
|
|
89
|
-
| dialogMaxWidth | Edito dialog maxWith. Ex: `lg` | `md` | `sm`... _Default_:`md`
|
|
90
|
-
| locale | Locale of date-fns. _Default_: `enUS`
|
|
91
|
-
| hourFormat | Hour format. <br>_Options_: `12` | `24`. _Default_: `12`
|
|
92
|
-
| timeZone| String, time zone [IANA ID](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)
|
|
93
|
-
| translations | Object. Translations view props. <br> _default_: <pre>{<br> navigation: {<br> month: "Month",<br> week: "Week",<br> day: "Day",<br> today: "Today"<br> agenda: "Agenda"<br> },<br> form: {<br> addTitle: "Add Event",<br> editTitle: "Edit Event",<br> confirm: "Confirm",<br> delete: "Delete",<br> cancel: "Cancel"<br> },<br> event: {<br> title: "Title",<br> subtitle: "Subtitle",<br> start: "Start",<br> end: "End",<br> allDay: "All Day"<br>},<br> validation: {<br> required: "Required",<br> invalidEmail: "Invalid Email",<br> onlyNumbers: "Only Numbers Allowed",<br> min: "Minimum {{min}} letters",<br> max: "Maximum {{max}} letters"<br> },<br> moreEvents: "More...",<br> noDataToDisplay: "No data to display",<br> loading: "Loading..."<br>}</pre>
|
|
94
|
-
| onEventDrop | Function(event: DragEvent<HTMLButtonElement>, droppedOn: Date, updatedEvent: ProcessedEvent, originalEvent: ProcessedEvent). Return a promise, used to update remote data of the dropped event. Return an event to update state internally, or void if event state is managed within component
|
|
95
|
-
| onEventClick | Function(event: ProcessedEvent): void. Triggered when an event item is clicked
|
|
96
|
-
| onEventEdit | Function(event: ProcessedEvent): void. Triggered when an event item is being edited from the popover
|
|
97
|
-
| onCellClick | Function(start: Date, end: Date, resourceKey?: string, resourceVal?: string | number): void. Triggered when a cell in the grid is clicked
|
|
98
|
-
| onSelectedDateChange | Function(date: Date): void. Triggered when the `selectedDate` prop changes by navigation date picker or `today` button
|
|
99
|
-
| onViewChange | Function(view: View, agenda?: boolean): void. Triggered when navigation view changes
|
|
100
|
-
| stickyNavigation | If `true`, the navigation controller bar will be sticky
|
|
101
|
-
| onClickMore | Function(date: Date, goToDay: Function(date: Date): void): void. Triggered when the "More..." button is clicked, it receives the date and a `goToDay` function that shows a day view for a specfic date.
|
|
102
|
-
| stickyNavigationOffset | number. Top offset in pixels when sticky navigation is enabled. <br>_Default_: `0` |
|
|
103
|
-
| stickyNavigationHeight | number. Height of the sticky navigation header in pixels. Used to calculate offset for sticky elements below the header. <br>_Default_: `40` |
|
|
104
|
-
| customHeaderContent | Function. Custom content to display in the scheduler header. Wrap with `useCallback` if using state/props to avoid re-renders. <br>_Example_: `() => <Button>Refresh</Button>` |
|
|
105
|
-
| currentTime | Date. Override the current time used for the time indicator bar. Useful when working with different timezones or for testing. <br>_Default_: `new Date()` |
|
|
106
|
-
| showCurrentTimeBar | boolean. Show/hide the current time indicator bar. <br>_Default_: `true` |
|
|
107
|
-
| currentTimeBarColor | string. Color of the current time indicator bar. <br>_Default_: `theme.palette.error.light` (red) |
|
|
108
|
-
| forceInlineMultiDay | boolean. When `true`, events spanning multiple days with `allDay: false` will be displayed in the time grid instead of the all-day header. Events will be split visually at midnight boundaries. <br>_Default_: `false` |
|
|
109
|
-
|
|
110
|
-
### SchedulerRef
|
|
111
|
-
|
|
112
|
-
Used to help manage and control the internal state of the `Scheduler` component from outside of `Scheduler` props, Example:
|
|
113
|
-
|
|
114
|
-
```js
|
|
115
|
-
import { Scheduler } from "@isma91/react-scheduler";
|
|
116
|
-
import type { SchedulerRef } from "@isma91/react-scheduler/types"
|
|
117
|
-
|
|
118
|
-
const SomeComponent = () => {
|
|
119
|
-
const calendarRef = useRef<SchedulerRef>(null);
|
|
120
|
-
|
|
121
|
-
return <Fragment>
|
|
122
|
-
<div>
|
|
123
|
-
<Button onClick={()=>{
|
|
124
|
-
calendarRef.current.scheduler.handleState("day", "view");
|
|
125
|
-
}}>
|
|
126
|
-
Change View
|
|
127
|
-
</Button>
|
|
128
|
-
<Button onClick={()=>{
|
|
129
|
-
calendarRef.current.scheduler.triggerDialog(true, {
|
|
130
|
-
start: /*Put the start date*/,
|
|
131
|
-
end: /*Put the end date*/
|
|
132
|
-
})
|
|
133
|
-
}}>
|
|
134
|
-
Add Event Tomorrow
|
|
135
|
-
</Button>
|
|
136
|
-
</div>
|
|
137
|
-
|
|
138
|
-
<Scheduler
|
|
139
|
-
ref={calendarRef}
|
|
140
|
-
events={EVENTS}
|
|
141
|
-
//...
|
|
142
|
-
/>
|
|
143
|
-
</Fragment>
|
|
144
|
-
};
|
|
145
|
-
```
|
|
146
|
-
|
|
147
|
-
The `calendarRef` holds the entire internal state of the Scheduler component. Perhaps the most useful method inside the `calendarRef` is `handleState`, example:
|
|
148
|
-
|
|
149
|
-
```
|
|
150
|
-
calendarRef.current.scheduler.handleState(value, key);
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
consider looking inside `SchedulerRef` type to see all fields & methods available.
|
|
154
|
-
|
|
155
|
-
### Demos
|
|
156
|
-
|
|
157
|
-
- [Basic](https://codesandbox.io/p/sandbox/standard-x24pqk)
|
|
158
|
-
- [Remote Data](https://codesandbox.io/s/remote-data-j13ei)
|
|
159
|
-
- [Custom Fields](https://codesandbox.io/s/custom-fields-b2kbv)
|
|
160
|
-
- [Editor/Viewer Override](https://codesandbox.io/s/customeditor-tt2pf)
|
|
161
|
-
- [Resources/View Mode](https://codesandbox.io/s/resources-7wlcy)
|
|
162
|
-
- [Custom Cell Action](https://codesandbox.io/s/custom-cell-action-n02dv)
|
|
163
|
-
- [Custom Event Renderer](https://codesandbox.io/s/custom-event-renderer-rkf4xw)
|
|
164
|
-
|
|
165
|
-
### Todos
|
|
166
|
-
|
|
167
|
-
- [ ] Tests
|
|
168
|
-
- [x] Drag&Drop - partially
|
|
169
|
-
- [ ] Resizable
|
|
170
|
-
- [x] Recurring events - partially
|
|
171
|
-
- [x] Localization
|
|
172
|
-
- [x] Hour format 12 | 24
|
package/dist/package.json
DELETED
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@isma91/react-scheduler",
|
|
3
|
-
"version": "4.0.0",
|
|
4
|
-
"description": "React scheduler component based on Material-UI & date-fns",
|
|
5
|
-
"files": [
|
|
6
|
-
"*"
|
|
7
|
-
],
|
|
8
|
-
"type": "module",
|
|
9
|
-
"exports": {
|
|
10
|
-
"./types": {
|
|
11
|
-
"import": "./types.d.ts"
|
|
12
|
-
},
|
|
13
|
-
".": {
|
|
14
|
-
"import": "./index.js"
|
|
15
|
-
}
|
|
16
|
-
},
|
|
17
|
-
"repository": {
|
|
18
|
-
"type": "git",
|
|
19
|
-
"url": "https://github.com/isma91/react-scheduler.git"
|
|
20
|
-
},
|
|
21
|
-
"author": "isma91 (fork of Aldabil)",
|
|
22
|
-
"bugs": {
|
|
23
|
-
"url": "https://github.com/isma91/react-scheduler/issues"
|
|
24
|
-
},
|
|
25
|
-
"keywords": [
|
|
26
|
-
"react",
|
|
27
|
-
"material-ui",
|
|
28
|
-
"calendar",
|
|
29
|
-
"scheduler"
|
|
30
|
-
],
|
|
31
|
-
"license": "MIT",
|
|
32
|
-
"peerDependencies": {
|
|
33
|
-
"@mui/icons-material": ">=7.0.0",
|
|
34
|
-
"@mui/material": ">=7.0.0",
|
|
35
|
-
"@mui/x-date-pickers": ">=7.0.0",
|
|
36
|
-
"date-fns": ">=4.0.0",
|
|
37
|
-
"react": ">=18.0.0",
|
|
38
|
-
"react-dom": ">=18.0.0",
|
|
39
|
-
"rrule": ">=2.8.1"
|
|
40
|
-
},
|
|
41
|
-
"peerDependenciesMeta": {
|
|
42
|
-
"rrule": {
|
|
43
|
-
"optional": true
|
|
44
|
-
}
|
|
45
|
-
},
|
|
46
|
-
"eslintConfig": {
|
|
47
|
-
"extends": [
|
|
48
|
-
"react-app",
|
|
49
|
-
"react-app/jest"
|
|
50
|
-
]
|
|
51
|
-
},
|
|
52
|
-
"browserslist": {
|
|
53
|
-
"production": [
|
|
54
|
-
">0.2%",
|
|
55
|
-
"not dead",
|
|
56
|
-
"not op_mini all"
|
|
57
|
-
],
|
|
58
|
-
"development": [
|
|
59
|
-
"last 1 chrome version",
|
|
60
|
-
"last 1 firefox version",
|
|
61
|
-
"last 1 safari version"
|
|
62
|
-
]
|
|
63
|
-
},
|
|
64
|
-
"homepage": "https://github.com/aldabil21/react-scheduler#readme"
|
|
65
|
-
}
|
package/eslint.config.js
DELETED
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
import react from "eslint-plugin-react";
|
|
2
|
-
import tseslint, { configs as tseslintConfigs } from "typescript-eslint";
|
|
3
|
-
import globals from "globals";
|
|
4
|
-
import js from "@eslint/js";
|
|
5
|
-
import * as reactHooks from "eslint-plugin-react-hooks";
|
|
6
|
-
import reactRefresh from "eslint-plugin-react-refresh";
|
|
7
|
-
import pluginImport from "eslint-plugin-import";
|
|
8
|
-
import pluginJsxA11y from "eslint-plugin-jsx-a11y";
|
|
9
|
-
import pluginPromise from "eslint-plugin-promise";
|
|
10
|
-
|
|
11
|
-
export default tseslint.config(
|
|
12
|
-
{ ignores: ["jest.config.ts", "scripts", "dist", "vite.config.js"] },
|
|
13
|
-
pluginJsxA11y.flatConfigs.recommended,
|
|
14
|
-
pluginPromise.configs["flat/recommended"],
|
|
15
|
-
pluginImport.flatConfigs.recommended,
|
|
16
|
-
{
|
|
17
|
-
extends: [js.configs.recommended, ...tseslintConfigs.recommended],
|
|
18
|
-
plugins: {
|
|
19
|
-
"react-hooks": reactHooks,
|
|
20
|
-
"react-refresh": reactRefresh,
|
|
21
|
-
react,
|
|
22
|
-
},
|
|
23
|
-
files: ["**/*.{ts,tsx}"],
|
|
24
|
-
languageOptions: {
|
|
25
|
-
globals: {
|
|
26
|
-
...globals.browser,
|
|
27
|
-
React: "readonly",
|
|
28
|
-
},
|
|
29
|
-
ecmaVersion: "latest",
|
|
30
|
-
sourceType: "module",
|
|
31
|
-
},
|
|
32
|
-
|
|
33
|
-
settings: {
|
|
34
|
-
react: {
|
|
35
|
-
version: "detect",
|
|
36
|
-
},
|
|
37
|
-
},
|
|
38
|
-
|
|
39
|
-
rules: {
|
|
40
|
-
...reactHooks.configs.recommended.rules,
|
|
41
|
-
"linebreak-style": ["error", "unix"],
|
|
42
|
-
|
|
43
|
-
quotes: [
|
|
44
|
-
"error",
|
|
45
|
-
"double",
|
|
46
|
-
{
|
|
47
|
-
allowTemplateLiterals: true,
|
|
48
|
-
},
|
|
49
|
-
],
|
|
50
|
-
|
|
51
|
-
semi: ["error", "always"],
|
|
52
|
-
"@typescript-eslint/no-non-null-assertion": 0,
|
|
53
|
-
"no-useless-catch": 0,
|
|
54
|
-
"@typescript-eslint/no-explicit-any": 0,
|
|
55
|
-
"@typescript-eslint/no-non-null-asserted-optional-chain": 0,
|
|
56
|
-
"no-case-declarations": 0,
|
|
57
|
-
"@typescript-eslint/no-empty-interface": 0,
|
|
58
|
-
"@typescript-eslint/no-empty-function": 0,
|
|
59
|
-
"@typescript-eslint/no-empty-object-type": [
|
|
60
|
-
"error",
|
|
61
|
-
{ allowInterfaces: "with-single-extends" },
|
|
62
|
-
],
|
|
63
|
-
},
|
|
64
|
-
},
|
|
65
|
-
{
|
|
66
|
-
// Checks importing of different files
|
|
67
|
-
settings: {
|
|
68
|
-
"import/parsers": {
|
|
69
|
-
"@typescript-eslint/parser": [".ts", ".tsx"],
|
|
70
|
-
},
|
|
71
|
-
"import/resolver": {
|
|
72
|
-
typescript: {
|
|
73
|
-
alwaysTryTypes: true,
|
|
74
|
-
project: "./",
|
|
75
|
-
},
|
|
76
|
-
},
|
|
77
|
-
},
|
|
78
|
-
}
|
|
79
|
-
);
|
package/index.html
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en" dir="ltr">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8" />
|
|
5
|
-
<link rel="icon" href="/favicon.ico" />
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
-
<meta name="theme-color" content="#000000" />
|
|
8
|
-
<meta name="description" content="Web site created using create-react-app" />
|
|
9
|
-
<link rel="apple-touch-icon" href="/logo192.png" />
|
|
10
|
-
<!--
|
|
11
|
-
manifest.json provides metadata used when your web app is installed on a
|
|
12
|
-
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
|
13
|
-
-->
|
|
14
|
-
<link rel="manifest" href="/manifest.json" />
|
|
15
|
-
<!--
|
|
16
|
-
Notice the use of in the tags above.
|
|
17
|
-
It will be replaced with the URL of the `public` folder during the build.
|
|
18
|
-
Only files inside the `public` folder can be referenced from the HTML.
|
|
19
|
-
|
|
20
|
-
Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
|
|
21
|
-
work correctly both with client-side routing and a non-root public URL.
|
|
22
|
-
Learn how to configure a non-root public URL by running `npm run build`.
|
|
23
|
-
-->
|
|
24
|
-
<title>React App</title>
|
|
25
|
-
</head>
|
|
26
|
-
<body>
|
|
27
|
-
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
28
|
-
<div id="root"></div>
|
|
29
|
-
<!--
|
|
30
|
-
This HTML file is a template.
|
|
31
|
-
If you open it directly in the browser, you will see an empty page.
|
|
32
|
-
|
|
33
|
-
You can add webfonts, meta tags, or analytics to this file.
|
|
34
|
-
The build step will place the bundled scripts into the <body> tag.
|
|
35
|
-
|
|
36
|
-
To begin the development, run `npm start` or `yarn start`.
|
|
37
|
-
To create a production bundle, use `npm run build` or `yarn build`.
|
|
38
|
-
-->
|
|
39
|
-
<script type="module" src="/src/index.tsx"></script>
|
|
40
|
-
</body>
|
|
41
|
-
</html>
|