From 53da201fa6e72b7534e868c83282e2012d910f67 Mon Sep 17 00:00:00 2001 From: Semir Date: Thu, 15 May 2025 08:40:12 +0200 Subject: [PATCH 1/6] feat: Basic Calendar without any functions --- package.json | 3 +- src/app/home/page.tsx | 121 ++++++++++- yarn.lock | 477 ++++++++++++++++++++++++------------------ 3 files changed, 385 insertions(+), 216 deletions(-) diff --git a/package.json b/package.json index 99b975d..8deaf17 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,8 @@ "next": "15.3.3", "next-auth": "^5.0.0-beta.25", "next-themes": "^0.4.6", - "react": "^19.0.0", + "react": "^19.1.0", + "react-calendar": "^5.1.0", "react-dom": "^19.0.0", "react-hook-form": "^7.56.4", "tailwind-merge": "^3.2.0", diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx index 4e6773b..527b231 100644 --- a/src/app/home/page.tsx +++ b/src/app/home/page.tsx @@ -1,15 +1,114 @@ -import { RedirectButton } from '@/components/user/redirect-button'; -import { ThemePicker } from '@/components/user/theme-picker'; +import React from 'react'; + +const Calendar: React.FC = () => { + const today = new Date(); + const currentYear = today.getFullYear(); + const currentMonth = today.getMonth(); + const currentDate = today.getDate(); + + const firstDayMonth = new Date(currentYear, currentMonth, 1); + const lastDayMonth = new Date(currentYear, currentMonth + 1, 0); + const startDay = (firstDayMonth.getDay() + 6) % 7; + const daysMonth = lastDayMonth.getDate(); + + const weeks: (number | null)[][] = []; + let currentDay = 1; + + const firstWeek: (number | null)[] = []; + for (let i = 0; i < 7; i++) { + if (i < startDay) { + firstWeek.push(null); + } else { + firstWeek.push(currentDay); + currentDay++; + } + } + weeks.push(firstWeek); + + while (currentDay <= daysMonth) { + const week: (number | null)[] = []; + for (let i = 0; i < 7; i++) { + if (currentDay <= daysMonth) { + week.push(currentDay); + currentDay++; + } else { + week.push(null); + } + } + weeks.push(week); + } + + const weekdays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; -export default function Home() { return ( -
-
{}
-
-

Home

- - -
+
+

+ {new Date(currentYear, currentMonth).toLocaleString('en-EN', { + month: 'long', + year: 'numeric' + })} +

+ + + + {weekdays.map((day, index) => ( + + ))} + + + + {weeks.map((week, weekIndex) => ( + + {week.map((day, dayIndex) => ( + + ))} + + ))} + +
+ {day} +
+ {day && ( +
+ {day} +
+ )} +
); -} +}; + +export default Calendar; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 8deaa5a..32af57e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -115,9 +115,9 @@ __metadata: linkType: hard "@eslint/config-helpers@npm:^0.2.1": - version: 0.2.2 - resolution: "@eslint/config-helpers@npm:0.2.2" - checksum: 10c0/98f7cefe484bb754674585d9e73cf1414a3ab4fd0783c385465288d13eb1a8d8e7d7b0611259fc52b76b396c11a13517be5036d1f48eeb877f6f0a6b9c4f03ad + version: 0.2.3 + resolution: "@eslint/config-helpers@npm:0.2.3" + checksum: 10c0/8fd36d7f33013628787947c81894807c7498b31eacf6648efa6d7c7a99aac6bf0d59a8a4d14f968ec2aeebefb76a1a7e4fd4cd556a296323d4711b3d7a7cda22 languageName: node linkType: hard @@ -130,6 +130,15 @@ __metadata: languageName: node linkType: hard +"@eslint/core@npm:^0.15.0": + version: 0.15.0 + resolution: "@eslint/core@npm:0.15.0" + dependencies: + "@types/json-schema": "npm:^7.0.15" + checksum: 10c0/9882c69acfe29743ce473a619d5248589c6687561afaabe8ec8d7ffed07592db16edcca3af022f33ea92fe5f6cfbe3545ee53e89292579d22a944ebaeddcf72d + languageName: node + linkType: hard + "@eslint/eslintrc@npm:3.3.1, @eslint/eslintrc@npm:^3.3.1": version: 3.3.1 resolution: "@eslint/eslintrc@npm:3.3.1" @@ -162,12 +171,12 @@ __metadata: linkType: hard "@eslint/plugin-kit@npm:^0.3.1": - version: 0.3.1 - resolution: "@eslint/plugin-kit@npm:0.3.1" + version: 0.3.2 + resolution: "@eslint/plugin-kit@npm:0.3.2" dependencies: - "@eslint/core": "npm:^0.14.0" + "@eslint/core": "npm:^0.15.0" levn: "npm:^0.4.1" - checksum: 10c0/a75f0b5d38430318a551b83e27bee570747eb50beeb76b03f64b0e78c2c27ef3d284cfda3443134df028db3251719bc0850c105f778122f6ad762d5270ec8063 + checksum: 10c0/e069b0a46eb9fa595a1ac7dea4540a9daa493afba88875ee054e9117609c1c41555e779303cb4cff36cf88f603ba6eba2556a927e8ced77002828206ee17fc7e languageName: node linkType: hard @@ -553,14 +562,14 @@ __metadata: languageName: node linkType: hard -"@napi-rs/wasm-runtime@npm:^0.2.10": - version: 0.2.10 - resolution: "@napi-rs/wasm-runtime@npm:0.2.10" +"@napi-rs/wasm-runtime@npm:^0.2.10, @napi-rs/wasm-runtime@npm:^0.2.11": + version: 0.2.11 + resolution: "@napi-rs/wasm-runtime@npm:0.2.11" dependencies: "@emnapi/core": "npm:^1.4.3" "@emnapi/runtime": "npm:^1.4.3" "@tybys/wasm-util": "npm:^0.9.0" - checksum: 10c0/4dce9bbb94a8969805574e1b55fdbeb7623348190265d77f6507ba32e535610deeb53a33ba0bb8b05a6520f379d418b92e8a01c5cd7b9486b136d2c0c26be0bd + checksum: 10c0/049bd14c58b99fbe0967b95e9921c5503df196b59be22948d2155f17652eb305cff6728efd8685338b855da7e476dd2551fbe3a313fc2d810938f0717478441e languageName: node linkType: hard @@ -1687,104 +1696,104 @@ __metadata: linkType: hard "@typescript-eslint/eslint-plugin@npm:^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0": - version: 8.33.1 - resolution: "@typescript-eslint/eslint-plugin@npm:8.33.1" + version: 8.34.1 + resolution: "@typescript-eslint/eslint-plugin@npm:8.34.1" dependencies: "@eslint-community/regexpp": "npm:^4.10.0" - "@typescript-eslint/scope-manager": "npm:8.33.1" - "@typescript-eslint/type-utils": "npm:8.33.1" - "@typescript-eslint/utils": "npm:8.33.1" - "@typescript-eslint/visitor-keys": "npm:8.33.1" + "@typescript-eslint/scope-manager": "npm:8.34.1" + "@typescript-eslint/type-utils": "npm:8.34.1" + "@typescript-eslint/utils": "npm:8.34.1" + "@typescript-eslint/visitor-keys": "npm:8.34.1" graphemer: "npm:^1.4.0" ignore: "npm:^7.0.0" natural-compare: "npm:^1.4.0" ts-api-utils: "npm:^2.1.0" peerDependencies: - "@typescript-eslint/parser": ^8.33.1 + "@typescript-eslint/parser": ^8.34.1 eslint: ^8.57.0 || ^9.0.0 typescript: ">=4.8.4 <5.9.0" - checksum: 10c0/35544068f175ca25296b42d0905065b40653a92c62e55414be68f62ddab580d7d768ee3c1276195fd8b8dd49de738ab7b41b8685e6fe2cd341cfca7320569166 + checksum: 10c0/f1c9f25e4fe4b59622312dfa0ca1e80fa7945296ba5c04362a5fda084a17e23a6b98dac331f5a13bcb1ba34a2b598a3f5c41aa288f0c51fe60196e912954e56a languageName: node linkType: hard "@typescript-eslint/parser@npm:^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0": - version: 8.33.1 - resolution: "@typescript-eslint/parser@npm:8.33.1" + version: 8.34.1 + resolution: "@typescript-eslint/parser@npm:8.34.1" dependencies: - "@typescript-eslint/scope-manager": "npm:8.33.1" - "@typescript-eslint/types": "npm:8.33.1" - "@typescript-eslint/typescript-estree": "npm:8.33.1" - "@typescript-eslint/visitor-keys": "npm:8.33.1" + "@typescript-eslint/scope-manager": "npm:8.34.1" + "@typescript-eslint/types": "npm:8.34.1" + "@typescript-eslint/typescript-estree": "npm:8.34.1" + "@typescript-eslint/visitor-keys": "npm:8.34.1" debug: "npm:^4.3.4" peerDependencies: eslint: ^8.57.0 || ^9.0.0 typescript: ">=4.8.4 <5.9.0" - checksum: 10c0/be1c1313c342d956f5adfbd56f79865894cc9cabf93992515a690559c3758538868270671b222f90e4cabc2dcab82256aeb3ccea7502de9cc69e47b9b17ed45f + checksum: 10c0/bf8070245d53ef6926ff6630bb72f245923f545304e2a61508fb944802a83fed8eab961d9010956d07999d51afdfbbec82aea9d6185295551a7c17c00d759183 languageName: node linkType: hard -"@typescript-eslint/project-service@npm:8.33.1": - version: 8.33.1 - resolution: "@typescript-eslint/project-service@npm:8.33.1" +"@typescript-eslint/project-service@npm:8.34.1": + version: 8.34.1 + resolution: "@typescript-eslint/project-service@npm:8.34.1" dependencies: - "@typescript-eslint/tsconfig-utils": "npm:^8.33.1" - "@typescript-eslint/types": "npm:^8.33.1" + "@typescript-eslint/tsconfig-utils": "npm:^8.34.1" + "@typescript-eslint/types": "npm:^8.34.1" debug: "npm:^4.3.4" peerDependencies: typescript: ">=4.8.4 <5.9.0" - checksum: 10c0/b2ff7653aef4648bdff8aafc69b9de434184827216709f8a36427536ac7082a8adf1c5ac12a0a2bb023b46dfad8f6fee238028acc94af622956af7f22362de6f + checksum: 10c0/9333a890625f6777054db17a6b299281ae7502bb7615261d15b885a75b8cf65fc91591389c93b37ecd14b651d8e94851dac8718e5dcc8ed0600533535dae855c languageName: node linkType: hard -"@typescript-eslint/scope-manager@npm:8.33.1": - version: 8.33.1 - resolution: "@typescript-eslint/scope-manager@npm:8.33.1" +"@typescript-eslint/scope-manager@npm:8.34.1": + version: 8.34.1 + resolution: "@typescript-eslint/scope-manager@npm:8.34.1" dependencies: - "@typescript-eslint/types": "npm:8.33.1" - "@typescript-eslint/visitor-keys": "npm:8.33.1" - checksum: 10c0/03a6fd2b0a8ebeb62083a8f51658f0c42391cbfb632411542569a3a227d53bdb0332026ef4d5adc4780e5350d1d8b89e5b19667ed899afd26506e60c70192692 + "@typescript-eslint/types": "npm:8.34.1" + "@typescript-eslint/visitor-keys": "npm:8.34.1" + checksum: 10c0/2af608fa3900f4726322e33bf4f3a376fdace3ac0f310cf7d9256bbc2905c3896138176a47dd195d2c2229f27fe43f5deb4bc7729db2eb18389926dedea78077 languageName: node linkType: hard -"@typescript-eslint/tsconfig-utils@npm:8.33.1, @typescript-eslint/tsconfig-utils@npm:^8.33.1": - version: 8.33.1 - resolution: "@typescript-eslint/tsconfig-utils@npm:8.33.1" +"@typescript-eslint/tsconfig-utils@npm:8.34.1, @typescript-eslint/tsconfig-utils@npm:^8.34.1": + version: 8.34.1 + resolution: "@typescript-eslint/tsconfig-utils@npm:8.34.1" peerDependencies: typescript: ">=4.8.4 <5.9.0" - checksum: 10c0/242e8f271d2e6e51446d337e1e59e8c91b66c0241da0fb861f536eb86cc3b53d1727c41e12e1ba070fa2451c8bc517c1ec50decaffa92a7c612b2aba29872777 + checksum: 10c0/8d1ead8b7c279b48e2ed96f083ec119a9aeea1ca9cdd40576ec271b996b9fd8cfa0ddb0aafbb4e14bc27fc62c69c5be66d39b1de68eab9ddd7f1861da267423d languageName: node linkType: hard -"@typescript-eslint/type-utils@npm:8.33.1": - version: 8.33.1 - resolution: "@typescript-eslint/type-utils@npm:8.33.1" +"@typescript-eslint/type-utils@npm:8.34.1": + version: 8.34.1 + resolution: "@typescript-eslint/type-utils@npm:8.34.1" dependencies: - "@typescript-eslint/typescript-estree": "npm:8.33.1" - "@typescript-eslint/utils": "npm:8.33.1" + "@typescript-eslint/typescript-estree": "npm:8.34.1" + "@typescript-eslint/utils": "npm:8.34.1" debug: "npm:^4.3.4" ts-api-utils: "npm:^2.1.0" peerDependencies: eslint: ^8.57.0 || ^9.0.0 typescript: ">=4.8.4 <5.9.0" - checksum: 10c0/59843eeb7c652306d130104d7cb0f7dea1cc95a6cf6345609efbae130f24e3c4a9472780332af4247337e152b7955540b15fd9b907c04a5d265b888139818266 + checksum: 10c0/502a2cdfe47f1f34206c747b5a70e0242dd99f570511db3dda9c5f999d9abadfbbb1dfa82a1fa437a1689d232715412e61c97d95f19c9314ba5ad23196b4096d languageName: node linkType: hard -"@typescript-eslint/types@npm:8.33.1, @typescript-eslint/types@npm:^8.33.1": - version: 8.33.1 - resolution: "@typescript-eslint/types@npm:8.33.1" - checksum: 10c0/3083c184c882475eed1f9d1a8961dad30ef834c662bc826ff9a959ff1eed49aad21a73b2b93c4062799feafff5f5f24aebb1df17e198808aa19d4c8de1e64095 +"@typescript-eslint/types@npm:8.34.1, @typescript-eslint/types@npm:^8.34.1": + version: 8.34.1 + resolution: "@typescript-eslint/types@npm:8.34.1" + checksum: 10c0/db1b3dce6a70b28ddb13c76fbb5983240d9395656df5f7cbd99bfd9905e39c0dab2132870f01dbc406b48739c437f7d344a879a824cedaba81b91a53110dc23a languageName: node linkType: hard -"@typescript-eslint/typescript-estree@npm:8.33.1": - version: 8.33.1 - resolution: "@typescript-eslint/typescript-estree@npm:8.33.1" +"@typescript-eslint/typescript-estree@npm:8.34.1": + version: 8.34.1 + resolution: "@typescript-eslint/typescript-estree@npm:8.34.1" dependencies: - "@typescript-eslint/project-service": "npm:8.33.1" - "@typescript-eslint/tsconfig-utils": "npm:8.33.1" - "@typescript-eslint/types": "npm:8.33.1" - "@typescript-eslint/visitor-keys": "npm:8.33.1" + "@typescript-eslint/project-service": "npm:8.34.1" + "@typescript-eslint/tsconfig-utils": "npm:8.34.1" + "@typescript-eslint/types": "npm:8.34.1" + "@typescript-eslint/visitor-keys": "npm:8.34.1" debug: "npm:^4.3.4" fast-glob: "npm:^3.3.2" is-glob: "npm:^4.0.3" @@ -1793,156 +1802,177 @@ __metadata: ts-api-utils: "npm:^2.1.0" peerDependencies: typescript: ">=4.8.4 <5.9.0" - checksum: 10c0/293a93d25046e05fdc3887232191c3f3ee771c0f5b1426d63deaf0541db1cb80b4307a80805c78b092206c9b267884a7e6b5905dc1b3c26f28bb4de47fd9ee8f + checksum: 10c0/4ee7249db91b9840361f34f80b7b6d646a3af159c7298d79a33d8a11c98792fd3a395343e5e17e0fa29529e8f0113bac8baadcef90d1e140bd736a48f0485042 languageName: node linkType: hard -"@typescript-eslint/utils@npm:8.33.1": - version: 8.33.1 - resolution: "@typescript-eslint/utils@npm:8.33.1" +"@typescript-eslint/utils@npm:8.34.1": + version: 8.34.1 + resolution: "@typescript-eslint/utils@npm:8.34.1" dependencies: "@eslint-community/eslint-utils": "npm:^4.7.0" - "@typescript-eslint/scope-manager": "npm:8.33.1" - "@typescript-eslint/types": "npm:8.33.1" - "@typescript-eslint/typescript-estree": "npm:8.33.1" + "@typescript-eslint/scope-manager": "npm:8.34.1" + "@typescript-eslint/types": "npm:8.34.1" + "@typescript-eslint/typescript-estree": "npm:8.34.1" peerDependencies: eslint: ^8.57.0 || ^9.0.0 typescript: ">=4.8.4 <5.9.0" - checksum: 10c0/12263df6eb32e8175236ad899687c062b50cfe4a0e66307d25ad2bf85a3e911faacbfbea4df180a59ebb5913fe1cc1f53fe3914695c7d802dd318bbc846fea26 + checksum: 10c0/e3085877f7940c02a37653e6bc52ac6cde115e755b1f788fe4331202f371b3421cc4d0878c7d3eb054e14e9b3a064496a707a73eac471cb2b73593b9e9d4b998 languageName: node linkType: hard -"@typescript-eslint/visitor-keys@npm:8.33.1": - version: 8.33.1 - resolution: "@typescript-eslint/visitor-keys@npm:8.33.1" +"@typescript-eslint/visitor-keys@npm:8.34.1": + version: 8.34.1 + resolution: "@typescript-eslint/visitor-keys@npm:8.34.1" dependencies: - "@typescript-eslint/types": "npm:8.33.1" - eslint-visitor-keys: "npm:^4.2.0" - checksum: 10c0/3eb99072e7c2741d5dfc38945d1e7617b15ed10d06b24658a6e919e4153983b3d3c5f5f775ce140f83a84dbde219948d187de97defb09c1a91f3cf0a96704a94 + "@typescript-eslint/types": "npm:8.34.1" + eslint-visitor-keys: "npm:^4.2.1" + checksum: 10c0/0e5a9b3d93905d16d3cf8cb5fb346dcc6f760482eb7d0ac209aefc09a32f78ef28a687634df6ad08e81fb3e1083e8805f34472de6bbc501c0105ad654d518f40 languageName: node linkType: hard -"@unrs/resolver-binding-darwin-arm64@npm:1.7.11": - version: 1.7.11 - resolution: "@unrs/resolver-binding-darwin-arm64@npm:1.7.11" +"@unrs/resolver-binding-android-arm-eabi@npm:1.9.0": + version: 1.9.0 + resolution: "@unrs/resolver-binding-android-arm-eabi@npm:1.9.0" + conditions: os=android & cpu=arm + languageName: node + linkType: hard + +"@unrs/resolver-binding-android-arm64@npm:1.9.0": + version: 1.9.0 + resolution: "@unrs/resolver-binding-android-arm64@npm:1.9.0" + conditions: os=android & cpu=arm64 + languageName: node + linkType: hard + +"@unrs/resolver-binding-darwin-arm64@npm:1.9.0": + version: 1.9.0 + resolution: "@unrs/resolver-binding-darwin-arm64@npm:1.9.0" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@unrs/resolver-binding-darwin-x64@npm:1.7.11": - version: 1.7.11 - resolution: "@unrs/resolver-binding-darwin-x64@npm:1.7.11" +"@unrs/resolver-binding-darwin-x64@npm:1.9.0": + version: 1.9.0 + resolution: "@unrs/resolver-binding-darwin-x64@npm:1.9.0" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@unrs/resolver-binding-freebsd-x64@npm:1.7.11": - version: 1.7.11 - resolution: "@unrs/resolver-binding-freebsd-x64@npm:1.7.11" +"@unrs/resolver-binding-freebsd-x64@npm:1.9.0": + version: 1.9.0 + resolution: "@unrs/resolver-binding-freebsd-x64@npm:1.9.0" conditions: os=freebsd & cpu=x64 languageName: node linkType: hard -"@unrs/resolver-binding-linux-arm-gnueabihf@npm:1.7.11": - version: 1.7.11 - resolution: "@unrs/resolver-binding-linux-arm-gnueabihf@npm:1.7.11" +"@unrs/resolver-binding-linux-arm-gnueabihf@npm:1.9.0": + version: 1.9.0 + resolution: "@unrs/resolver-binding-linux-arm-gnueabihf@npm:1.9.0" conditions: os=linux & cpu=arm languageName: node linkType: hard -"@unrs/resolver-binding-linux-arm-musleabihf@npm:1.7.11": - version: 1.7.11 - resolution: "@unrs/resolver-binding-linux-arm-musleabihf@npm:1.7.11" +"@unrs/resolver-binding-linux-arm-musleabihf@npm:1.9.0": + version: 1.9.0 + resolution: "@unrs/resolver-binding-linux-arm-musleabihf@npm:1.9.0" conditions: os=linux & cpu=arm languageName: node linkType: hard -"@unrs/resolver-binding-linux-arm64-gnu@npm:1.7.11": - version: 1.7.11 - resolution: "@unrs/resolver-binding-linux-arm64-gnu@npm:1.7.11" +"@unrs/resolver-binding-linux-arm64-gnu@npm:1.9.0": + version: 1.9.0 + resolution: "@unrs/resolver-binding-linux-arm64-gnu@npm:1.9.0" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@unrs/resolver-binding-linux-arm64-musl@npm:1.7.11": - version: 1.7.11 - resolution: "@unrs/resolver-binding-linux-arm64-musl@npm:1.7.11" +"@unrs/resolver-binding-linux-arm64-musl@npm:1.9.0": + version: 1.9.0 + resolution: "@unrs/resolver-binding-linux-arm64-musl@npm:1.9.0" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@unrs/resolver-binding-linux-ppc64-gnu@npm:1.7.11": - version: 1.7.11 - resolution: "@unrs/resolver-binding-linux-ppc64-gnu@npm:1.7.11" +"@unrs/resolver-binding-linux-ppc64-gnu@npm:1.9.0": + version: 1.9.0 + resolution: "@unrs/resolver-binding-linux-ppc64-gnu@npm:1.9.0" conditions: os=linux & cpu=ppc64 & libc=glibc languageName: node linkType: hard -"@unrs/resolver-binding-linux-riscv64-gnu@npm:1.7.11": - version: 1.7.11 - resolution: "@unrs/resolver-binding-linux-riscv64-gnu@npm:1.7.11" +"@unrs/resolver-binding-linux-riscv64-gnu@npm:1.9.0": + version: 1.9.0 + resolution: "@unrs/resolver-binding-linux-riscv64-gnu@npm:1.9.0" conditions: os=linux & cpu=riscv64 & libc=glibc languageName: node linkType: hard -"@unrs/resolver-binding-linux-riscv64-musl@npm:1.7.11": - version: 1.7.11 - resolution: "@unrs/resolver-binding-linux-riscv64-musl@npm:1.7.11" +"@unrs/resolver-binding-linux-riscv64-musl@npm:1.9.0": + version: 1.9.0 + resolution: "@unrs/resolver-binding-linux-riscv64-musl@npm:1.9.0" conditions: os=linux & cpu=riscv64 & libc=musl languageName: node linkType: hard -"@unrs/resolver-binding-linux-s390x-gnu@npm:1.7.11": - version: 1.7.11 - resolution: "@unrs/resolver-binding-linux-s390x-gnu@npm:1.7.11" +"@unrs/resolver-binding-linux-s390x-gnu@npm:1.9.0": + version: 1.9.0 + resolution: "@unrs/resolver-binding-linux-s390x-gnu@npm:1.9.0" conditions: os=linux & cpu=s390x & libc=glibc languageName: node linkType: hard -"@unrs/resolver-binding-linux-x64-gnu@npm:1.7.11": - version: 1.7.11 - resolution: "@unrs/resolver-binding-linux-x64-gnu@npm:1.7.11" +"@unrs/resolver-binding-linux-x64-gnu@npm:1.9.0": + version: 1.9.0 + resolution: "@unrs/resolver-binding-linux-x64-gnu@npm:1.9.0" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@unrs/resolver-binding-linux-x64-musl@npm:1.7.11": - version: 1.7.11 - resolution: "@unrs/resolver-binding-linux-x64-musl@npm:1.7.11" +"@unrs/resolver-binding-linux-x64-musl@npm:1.9.0": + version: 1.9.0 + resolution: "@unrs/resolver-binding-linux-x64-musl@npm:1.9.0" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@unrs/resolver-binding-wasm32-wasi@npm:1.7.11": - version: 1.7.11 - resolution: "@unrs/resolver-binding-wasm32-wasi@npm:1.7.11" +"@unrs/resolver-binding-wasm32-wasi@npm:1.9.0": + version: 1.9.0 + resolution: "@unrs/resolver-binding-wasm32-wasi@npm:1.9.0" dependencies: - "@napi-rs/wasm-runtime": "npm:^0.2.10" + "@napi-rs/wasm-runtime": "npm:^0.2.11" conditions: cpu=wasm32 languageName: node linkType: hard -"@unrs/resolver-binding-win32-arm64-msvc@npm:1.7.11": - version: 1.7.11 - resolution: "@unrs/resolver-binding-win32-arm64-msvc@npm:1.7.11" +"@unrs/resolver-binding-win32-arm64-msvc@npm:1.9.0": + version: 1.9.0 + resolution: "@unrs/resolver-binding-win32-arm64-msvc@npm:1.9.0" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@unrs/resolver-binding-win32-ia32-msvc@npm:1.7.11": - version: 1.7.11 - resolution: "@unrs/resolver-binding-win32-ia32-msvc@npm:1.7.11" +"@unrs/resolver-binding-win32-ia32-msvc@npm:1.9.0": + version: 1.9.0 + resolution: "@unrs/resolver-binding-win32-ia32-msvc@npm:1.9.0" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@unrs/resolver-binding-win32-x64-msvc@npm:1.7.11": - version: 1.7.11 - resolution: "@unrs/resolver-binding-win32-x64-msvc@npm:1.7.11" +"@unrs/resolver-binding-win32-x64-msvc@npm:1.9.0": + version: 1.9.0 + resolution: "@unrs/resolver-binding-win32-x64-msvc@npm:1.9.0" conditions: os=win32 & cpu=x64 languageName: node linkType: hard +"@wojtekmaj/date-utils@npm:^1.1.3": + version: 1.5.1 + resolution: "@wojtekmaj/date-utils@npm:1.5.1" + checksum: 10c0/7c213cca5ab6b84ef61b9aea2b9fb8a04bf4c9764b28a97ffc4ee46a3e81560532a74d106a6f8aeef4792e1aaa6ea3dfd3c4a639dddbea560eb3f33cd62b8d7d + languageName: node + linkType: hard + "acorn-jsx@npm:^5.3.2": version: 5.3.2 resolution: "acorn-jsx@npm:5.3.2" @@ -1952,15 +1982,6 @@ __metadata: languageName: node linkType: hard -"acorn@npm:^8.14.0": - version: 8.14.1 - resolution: "acorn@npm:8.14.1" - bin: - acorn: bin/acorn - checksum: 10c0/dbd36c1ed1d2fa3550140000371fcf721578095b18777b85a79df231ca093b08edc6858d75d6e48c73e431c174dcf9214edbd7e6fa5911b93bd8abfa54e47123 - languageName: node - linkType: hard - "acorn@npm:^8.15.0": version: 8.15.0 resolution: "acorn@npm:8.15.0" @@ -2175,21 +2196,21 @@ __metadata: linkType: hard "brace-expansion@npm:^1.1.7": - version: 1.1.11 - resolution: "brace-expansion@npm:1.1.11" + version: 1.1.12 + resolution: "brace-expansion@npm:1.1.12" dependencies: balanced-match: "npm:^1.0.0" concat-map: "npm:0.0.1" - checksum: 10c0/695a56cd058096a7cb71fb09d9d6a7070113c7be516699ed361317aca2ec169f618e28b8af352e02ab4233fb54eb0168460a40dc320bab0034b36ab59aaad668 + checksum: 10c0/975fecac2bb7758c062c20d0b3b6288c7cc895219ee25f0a64a9de662dbac981ff0b6e89909c3897c1f84fa353113a721923afdec5f8b2350255b097f12b1f73 languageName: node linkType: hard "brace-expansion@npm:^2.0.1": - version: 2.0.1 - resolution: "brace-expansion@npm:2.0.1" + version: 2.0.2 + resolution: "brace-expansion@npm:2.0.2" dependencies: balanced-match: "npm:^1.0.0" - checksum: 10c0/b358f2fe060e2d7a87aa015979ecea07f3c37d4018f8d6deb5bd4c229ad3a0384fe6029bb76cd8be63c81e516ee52d1a0673edbe2023d53a5191732ae3c3e49f + checksum: 10c0/6d117a4c793488af86b83172deb6af143e94c17bc53b0b3cec259733923b4ca84679d506ac261f4ba3c7ed37c46018e2ff442f9ce453af8643ecd64f4a54e6cf languageName: node linkType: hard @@ -2251,9 +2272,9 @@ __metadata: linkType: hard "caniuse-lite@npm:^1.0.30001579": - version: 1.0.30001721 - resolution: "caniuse-lite@npm:1.0.30001721" - checksum: 10c0/fa3a8926899824b385279f1f886fe34c5efb1321c9ece1b9df25c8d567a2706db8450cc5b4d969e769e641593e08ea644909324aba93636a43e4949a75f81c4c + version: 1.0.30001723 + resolution: "caniuse-lite@npm:1.0.30001723" + checksum: 10c0/e019503061759b96017c4d27ddd7ca1b48533eabcd0431b51d2e3156f99f6b031075e46c279c0db63424cdfc874bba992caec2db51b922a0f945e686246886f6 languageName: node linkType: hard @@ -2290,7 +2311,7 @@ __metadata: languageName: node linkType: hard -"clsx@npm:^2.1.1": +"clsx@npm:^2.0.0, clsx@npm:^2.1.1": version: 2.1.1 resolution: "clsx@npm:2.1.1" checksum: 10c0/c4c8eb865f8c82baab07e71bfa8897c73454881c4f99d6bc81585aecd7c441746c1399d08363dc096c550cceaf97bd4ce1e8854e1771e9998d9f94c4fe075839 @@ -2865,13 +2886,6 @@ __metadata: languageName: node linkType: hard -"eslint-visitor-keys@npm:^4.2.0": - version: 4.2.0 - resolution: "eslint-visitor-keys@npm:4.2.0" - checksum: 10c0/2ed81c663b147ca6f578312919483eb040295bbab759e5a371953456c636c5b49a559883e2677112453728d66293c0a4c90ab11cab3428cf02a0236d2e738269 - languageName: node - linkType: hard - "eslint-visitor-keys@npm:^4.2.1": version: 4.2.1 resolution: "eslint-visitor-keys@npm:4.2.1" @@ -2929,18 +2943,7 @@ __metadata: languageName: node linkType: hard -"espree@npm:^10.0.1": - version: 10.3.0 - resolution: "espree@npm:10.3.0" - dependencies: - acorn: "npm:^8.14.0" - acorn-jsx: "npm:^5.3.2" - eslint-visitor-keys: "npm:^4.2.0" - checksum: 10c0/272beeaca70d0a1a047d61baff64db04664a33d7cfb5d144f84bc8a5c6194c6c8ebe9cc594093ca53add88baa23e59b01e69e8a0160ab32eac570482e165c462 - languageName: node - linkType: hard - -"espree@npm:^10.4.0": +"espree@npm:^10.0.1, espree@npm:^10.4.0": version: 10.4.0 resolution: "espree@npm:10.4.0" dependencies: @@ -3040,14 +3043,14 @@ __metadata: linkType: hard "fdir@npm:^6.4.4": - version: 6.4.5 - resolution: "fdir@npm:6.4.5" + version: 6.4.6 + resolution: "fdir@npm:6.4.6" peerDependencies: picomatch: ^3 || ^4 peerDependenciesMeta: picomatch: optional: true - checksum: 10c0/5d63330a1b97165e9b0fb20369fafc7cf826bc4b3e374efcb650bc77d7145ac01193b5da1a7591eab89ae6fd6b15cdd414085910b2a2b42296b1480c9f2677af + checksum: 10c0/45b559cff889934ebb8bc498351e5acba40750ada7e7d6bde197768d2fa67c149be8ae7f8ff34d03f4e1eb20f2764116e56440aaa2f6689e9a4aa7ef06acafe9 languageName: node linkType: hard @@ -3188,6 +3191,15 @@ __metadata: languageName: node linkType: hard +"get-user-locale@npm:^2.2.1": + version: 2.3.2 + resolution: "get-user-locale@npm:2.3.2" + dependencies: + mem: "npm:^8.0.0" + checksum: 10c0/2796b3fc3782b1f4826f31e899642cf72eeb23e296e1cf55280aab5caf7a25f4b906491ee1508a001519d6a410902ccf8fa8edaa895b7aee5dfd422ffe5523b9 + languageName: node + linkType: hard + "glob-parent@npm:^5.1.2": version: 5.1.2 resolution: "glob-parent@npm:5.1.2" @@ -3858,7 +3870,7 @@ __metadata: languageName: node linkType: hard -"loose-envify@npm:^1.4.0": +"loose-envify@npm:^1.0.0, loose-envify@npm:^1.4.0": version: 1.4.0 resolution: "loose-envify@npm:1.4.0" dependencies: @@ -3887,6 +3899,15 @@ __metadata: languageName: node linkType: hard +"map-age-cleaner@npm:^0.1.3": + version: 0.1.3 + resolution: "map-age-cleaner@npm:0.1.3" + dependencies: + p-defer: "npm:^1.0.0" + checksum: 10c0/7495236c7b0950956c144fd8b4bc6399d4e78072a8840a4232fe1c4faccbb5eb5d842e5c0a56a60afc36d723f315c1c672325ca03c1b328650f7fcc478f385fd + languageName: node + linkType: hard + "math-intrinsics@npm:^1.1.0": version: 1.1.0 resolution: "math-intrinsics@npm:1.1.0" @@ -3934,7 +3955,8 @@ __metadata: postcss: "npm:8.5.6" prettier: "npm:3.5.3" prisma: "npm:6.9.0" - react: "npm:^19.0.0" + react: "npm:^19.1.0" + react-calendar: "npm:^5.1.0" react-dom: "npm:^19.0.0" react-hook-form: "npm:^7.56.4" tailwind-merge: "npm:^3.2.0" @@ -3945,6 +3967,16 @@ __metadata: languageName: unknown linkType: soft +"mem@npm:^8.0.0": + version: 8.1.1 + resolution: "mem@npm:8.1.1" + dependencies: + map-age-cleaner: "npm:^0.1.3" + mimic-fn: "npm:^3.1.0" + checksum: 10c0/5829c404d024c1accaf76ebacbc7eae9b59e5ce5722d184aa24e8387a8097a499f6aa7e181021003c51eb87b2dcdc9a2270050c58753cce761de206643cba91c + languageName: node + linkType: hard + "merge2@npm:^1.3.0": version: 1.4.1 resolution: "merge2@npm:1.4.1" @@ -3962,6 +3994,13 @@ __metadata: languageName: node linkType: hard +"mimic-fn@npm:^3.1.0": + version: 3.1.0 + resolution: "mimic-fn@npm:3.1.0" + checksum: 10c0/a07cdd8ed6490c2dff5b11f889b245d9556b80f5a653a552a651d17cff5a2d156e632d235106c2369f00cccef4071704589574cf3601bc1b1400a1f620dff067 + languageName: node + linkType: hard + "minimatch@npm:^3.1.2": version: 3.1.2 resolution: "minimatch@npm:3.1.2" @@ -4138,9 +4177,9 @@ __metadata: linkType: hard "oauth4webapi@npm:^3.3.0": - version: 3.5.1 - resolution: "oauth4webapi@npm:3.5.1" - checksum: 10c0/5d57ba4299d61173b28ff0612fdfcc550b02c2ce4afcd1641103960c02af18268b55a70f26d47bbfc956680967c307546284b4a0b1f13845589e247f798ff395 + version: 3.5.2 + resolution: "oauth4webapi@npm:3.5.2" + checksum: 10c0/fd056001ce67c9e4aba9b170b6aabe26315bd9ce67787534575ea66a475115fdae7c68b8b193e8607156a8e97a56a3eef552abb34ec3447b28cfe7c18749468a languageName: node linkType: hard @@ -4251,6 +4290,13 @@ __metadata: languageName: node linkType: hard +"p-defer@npm:^1.0.0": + version: 1.0.0 + resolution: "p-defer@npm:1.0.0" + checksum: 10c0/ed603c3790e74b061ac2cb07eb6e65802cf58dce0fbee646c113a7b71edb711101329ad38f99e462bd2e343a74f6e9366b496a35f1d766c187084d3109900487 + languageName: node + linkType: hard + "p-limit@npm:^3.0.2": version: 3.1.0 resolution: "p-limit@npm:3.1.0" @@ -4338,7 +4384,7 @@ __metadata: languageName: node linkType: hard -"postcss@npm:8.5.6": +"postcss@npm:8.5.6, postcss@npm:^8.4.41": version: 8.5.6 resolution: "postcss@npm:8.5.6" dependencies: @@ -4349,17 +4395,6 @@ __metadata: languageName: node linkType: hard -"postcss@npm:^8.4.41": - version: 8.5.4 - resolution: "postcss@npm:8.5.4" - dependencies: - nanoid: "npm:^3.3.11" - picocolors: "npm:^1.1.1" - source-map-js: "npm:^1.2.1" - checksum: 10c0/0feff648614a834f7cd5396ea6b05b658ca0507e10a4eaad03b56c348f6aec93f42a885fc1b30522630c6a7e49ae53b38a061e3cba526f2d9857afbe095a22bb - languageName: node - linkType: hard - "preact-render-to-string@npm:6.5.11": version: 6.5.11 resolution: "preact-render-to-string@npm:6.5.11" @@ -4434,6 +4469,25 @@ __metadata: languageName: node linkType: hard +"react-calendar@npm:^5.1.0": + version: 5.1.0 + resolution: "react-calendar@npm:5.1.0" + dependencies: + "@wojtekmaj/date-utils": "npm:^1.1.3" + clsx: "npm:^2.0.0" + get-user-locale: "npm:^2.2.1" + warning: "npm:^4.0.0" + peerDependencies: + "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10c0/27673f639c5d6296342a2a888436b31a5d602faeaae01be83b2beb98ff568b0a3d1514f5cc50fcacf3ac50b9c0b9d2fb423b0c001a8f5f1a22816671409e2616 + languageName: node + linkType: hard + "react-dom@npm:^19.0.0": version: 19.1.0 resolution: "react-dom@npm:19.1.0" @@ -4512,7 +4566,7 @@ __metadata: languageName: node linkType: hard -"react@npm:^19.0.0": +"react@npm:^19.1.0": version: 19.1.0 resolution: "react@npm:19.1.0" checksum: 10c0/530fb9a62237d54137a13d2cfb67a7db6a2156faed43eecc423f4713d9b20c6f2728b026b45e28fcd72e8eadb9e9ed4b089e99f5e295d2f0ad3134251bdd3698 @@ -5223,28 +5277,34 @@ __metadata: linkType: hard "unrs-resolver@npm:^1.6.2": - version: 1.7.11 - resolution: "unrs-resolver@npm:1.7.11" + version: 1.9.0 + resolution: "unrs-resolver@npm:1.9.0" dependencies: - "@unrs/resolver-binding-darwin-arm64": "npm:1.7.11" - "@unrs/resolver-binding-darwin-x64": "npm:1.7.11" - "@unrs/resolver-binding-freebsd-x64": "npm:1.7.11" - "@unrs/resolver-binding-linux-arm-gnueabihf": "npm:1.7.11" - "@unrs/resolver-binding-linux-arm-musleabihf": "npm:1.7.11" - "@unrs/resolver-binding-linux-arm64-gnu": "npm:1.7.11" - "@unrs/resolver-binding-linux-arm64-musl": "npm:1.7.11" - "@unrs/resolver-binding-linux-ppc64-gnu": "npm:1.7.11" - "@unrs/resolver-binding-linux-riscv64-gnu": "npm:1.7.11" - "@unrs/resolver-binding-linux-riscv64-musl": "npm:1.7.11" - "@unrs/resolver-binding-linux-s390x-gnu": "npm:1.7.11" - "@unrs/resolver-binding-linux-x64-gnu": "npm:1.7.11" - "@unrs/resolver-binding-linux-x64-musl": "npm:1.7.11" - "@unrs/resolver-binding-wasm32-wasi": "npm:1.7.11" - "@unrs/resolver-binding-win32-arm64-msvc": "npm:1.7.11" - "@unrs/resolver-binding-win32-ia32-msvc": "npm:1.7.11" - "@unrs/resolver-binding-win32-x64-msvc": "npm:1.7.11" + "@unrs/resolver-binding-android-arm-eabi": "npm:1.9.0" + "@unrs/resolver-binding-android-arm64": "npm:1.9.0" + "@unrs/resolver-binding-darwin-arm64": "npm:1.9.0" + "@unrs/resolver-binding-darwin-x64": "npm:1.9.0" + "@unrs/resolver-binding-freebsd-x64": "npm:1.9.0" + "@unrs/resolver-binding-linux-arm-gnueabihf": "npm:1.9.0" + "@unrs/resolver-binding-linux-arm-musleabihf": "npm:1.9.0" + "@unrs/resolver-binding-linux-arm64-gnu": "npm:1.9.0" + "@unrs/resolver-binding-linux-arm64-musl": "npm:1.9.0" + "@unrs/resolver-binding-linux-ppc64-gnu": "npm:1.9.0" + "@unrs/resolver-binding-linux-riscv64-gnu": "npm:1.9.0" + "@unrs/resolver-binding-linux-riscv64-musl": "npm:1.9.0" + "@unrs/resolver-binding-linux-s390x-gnu": "npm:1.9.0" + "@unrs/resolver-binding-linux-x64-gnu": "npm:1.9.0" + "@unrs/resolver-binding-linux-x64-musl": "npm:1.9.0" + "@unrs/resolver-binding-wasm32-wasi": "npm:1.9.0" + "@unrs/resolver-binding-win32-arm64-msvc": "npm:1.9.0" + "@unrs/resolver-binding-win32-ia32-msvc": "npm:1.9.0" + "@unrs/resolver-binding-win32-x64-msvc": "npm:1.9.0" napi-postinstall: "npm:^0.2.2" dependenciesMeta: + "@unrs/resolver-binding-android-arm-eabi": + optional: true + "@unrs/resolver-binding-android-arm64": + optional: true "@unrs/resolver-binding-darwin-arm64": optional: true "@unrs/resolver-binding-darwin-x64": @@ -5279,7 +5339,7 @@ __metadata: optional: true "@unrs/resolver-binding-win32-x64-msvc": optional: true - checksum: 10c0/37e6caf2884b7ce65f77fc5b945997b94523656d477ae0e67fb8df970939930b674091f3fac6beee93b0370fa64a925ad707edc76897aa8cb14866efbe4a6693 + checksum: 10c0/73c184514a82197145539c0506dd6633a28fc380192b1677d31348537c2783405e7392cf2bf18b96d84b8068f502868de3ae741edd580683ddb39f10d46d49e8 languageName: node linkType: hard @@ -5323,6 +5383,15 @@ __metadata: languageName: node linkType: hard +"warning@npm:^4.0.0": + version: 4.0.3 + resolution: "warning@npm:4.0.3" + dependencies: + loose-envify: "npm:^1.0.0" + checksum: 10c0/aebab445129f3e104c271f1637fa38e55eb25f968593e3825bd2f7a12bd58dc3738bb70dc8ec85826621d80b4acfed5a29ebc9da17397c6125864d72301b937e + languageName: node + linkType: hard + "which-boxed-primitive@npm:^1.1.0, which-boxed-primitive@npm:^1.1.1": version: 1.1.1 resolution: "which-boxed-primitive@npm:1.1.1" From fe94793fb537bea475350022d2f9a9fbfb4b85e4 Mon Sep 17 00:00:00 2001 From: Semir Date: Fri, 23 May 2025 15:23:01 +0200 Subject: [PATCH 2/6] feat: Calendar Update --- package.json | 3 +- src/app/home/page.tsx | 135 ++++---------------- yarn.lock | 285 ++++++++++++++++++++++++++++++++---------- 3 files changed, 248 insertions(+), 175 deletions(-) diff --git a/package.json b/package.json index 8deaf17..5d8483e 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "next-auth": "^5.0.0-beta.25", "next-themes": "^0.4.6", "react": "^19.1.0", - "react-calendar": "^5.1.0", + "react-big-calendar": "^1.18.0", "react-dom": "^19.0.0", "react-hook-form": "^7.56.4", "tailwind-merge": "^3.2.0", @@ -52,6 +52,7 @@ "@tailwindcss/postcss": "4.1.10", "@types/node": "22.15.32", "@types/react": "19.1.8", + "@types/react-big-calendar": "^1", "@types/react-dom": "19.1.6", "dotenv-cli": "8.0.0", "eslint": "9.29.0", diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx index 527b231..b20d042 100644 --- a/src/app/home/page.tsx +++ b/src/app/home/page.tsx @@ -1,114 +1,31 @@ -import React from 'react'; +"use client"; -const Calendar: React.FC = () => { - const today = new Date(); - const currentYear = today.getFullYear(); - const currentMonth = today.getMonth(); - const currentDate = today.getDate(); +import { Calendar, momentLocalizer } from 'react-big-calendar'; +import moment from 'moment'; +import 'react-big-calendar/lib/css/react-big-calendar.css'; +import 'react-big-calendar/lib/addons/dragAndDrop/styles.css'; - const firstDayMonth = new Date(currentYear, currentMonth, 1); - const lastDayMonth = new Date(currentYear, currentMonth + 1, 0); - const startDay = (firstDayMonth.getDay() + 6) % 7; - const daysMonth = lastDayMonth.getDate(); +moment.updateLocale('en', { + week: { + dow: 1, + doy: 4, + }, +}); - const weeks: (number | null)[][] = []; - let currentDay = 1; +const localizer = momentLocalizer(moment) - const firstWeek: (number | null)[] = []; - for (let i = 0; i < 7; i++) { - if (i < startDay) { - firstWeek.push(null); - } else { - firstWeek.push(currentDay); - currentDay++; - } - } - weeks.push(firstWeek); +const MyCalendar = (props) => ( +
+ +
+) - while (currentDay <= daysMonth) { - const week: (number | null)[] = []; - for (let i = 0; i < 7; i++) { - if (currentDay <= daysMonth) { - week.push(currentDay); - currentDay++; - } else { - week.push(null); - } - } - weeks.push(week); - } - - const weekdays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; - - return ( -
-

- {new Date(currentYear, currentMonth).toLocaleString('en-EN', { - month: 'long', - year: 'numeric' - })} -

- - - - {weekdays.map((day, index) => ( - - ))} - - - - {weeks.map((week, weekIndex) => ( - - {week.map((day, dayIndex) => ( - - ))} - - ))} - -
- {day} -
- {day && ( -
- {day} -
- )} -
-
- ); -}; - -export default Calendar; \ No newline at end of file +export default MyCalendar; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 32af57e..245196a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -57,6 +57,13 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.13.8, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.8.7": + version: 7.27.6 + resolution: "@babel/runtime@npm:7.27.6" + checksum: 10c0/89726be83f356f511dcdb74d3ea4d873a5f0cf0017d4530cb53aa27380c01ca102d573eff8b8b77815e624b1f8c24e7f0311834ad4fb632c90a770fda00bd4c8 + languageName: node + linkType: hard + "@emnapi/core@npm:^1.4.3": version: 1.4.3 resolution: "@emnapi/core@npm:1.4.3" @@ -686,6 +693,13 @@ __metadata: languageName: node linkType: hard +"@popperjs/core@npm:^2.11.6": + version: 2.11.8 + resolution: "@popperjs/core@npm:2.11.8" + checksum: 10c0/4681e682abc006d25eb380d0cf3efc7557043f53b6aea7a5057d0d1e7df849a00e281cd8ea79c902a35a414d7919621fc2ba293ecec05f413598e0b23d5a1e63 + languageName: node + linkType: hard + "@prisma/client@npm:^6.9.0": version: 6.9.0 resolution: "@prisma/client@npm:6.9.0" @@ -1435,6 +1449,17 @@ __metadata: languageName: node linkType: hard +"@restart/hooks@npm:^0.4.7": + version: 0.4.16 + resolution: "@restart/hooks@npm:0.4.16" + dependencies: + dequal: "npm:^2.0.3" + peerDependencies: + react: ">=16.8.0" + checksum: 10c0/b6a0f1db046cdec28737092ab5defdfb25fad498d37d218646f7f123aed02a5078b1c89ae631bda14d9ee35f7bb8c9e0f15379b1a45003144dc30cd15e8ba668 + languageName: node + linkType: hard + "@rtsao/scc@npm:^1.1.0": version: 1.1.0 resolution: "@rtsao/scc@npm:1.1.0" @@ -1647,6 +1672,13 @@ __metadata: languageName: node linkType: hard +"@types/date-arithmetic@npm:*": + version: 4.1.4 + resolution: "@types/date-arithmetic@npm:4.1.4" + checksum: 10c0/4ee68b5a422bd5f1cf08923d18a08db558e653bbdc597677e0465a330f1e807da0e79b06b72651b62b19b4b922a779470f84657cbd765805f84f33af518b408f + languageName: node + linkType: hard + "@types/estree@npm:^1.0.6": version: 1.0.8 resolution: "@types/estree@npm:1.0.8" @@ -1677,6 +1709,24 @@ __metadata: languageName: node linkType: hard +"@types/prop-types@npm:*": + version: 15.7.15 + resolution: "@types/prop-types@npm:15.7.15" + checksum: 10c0/b59aad1ad19bf1733cf524fd4e618196c6c7690f48ee70a327eb450a42aab8e8a063fbe59ca0a5701aebe2d92d582292c0fb845ea57474f6a15f6994b0e260b2 + languageName: node + linkType: hard + +"@types/react-big-calendar@npm:^1": + version: 1.16.2 + resolution: "@types/react-big-calendar@npm:1.16.2" + dependencies: + "@types/date-arithmetic": "npm:*" + "@types/prop-types": "npm:*" + "@types/react": "npm:*" + checksum: 10c0/a2ea4116b999cf8dac014fdc4a9f0c10fb2fd9d9886857e93649c0a601057e93e73e3d9096a756b76e227e08f68e4c979f91bf4cfd96692aea3ab7f3df0745d0 + languageName: node + linkType: hard + "@types/react-dom@npm:19.1.6": version: 19.1.6 resolution: "@types/react-dom@npm:19.1.6" @@ -1686,7 +1736,7 @@ __metadata: languageName: node linkType: hard -"@types/react@npm:19.1.8": +"@types/react@npm:*, @types/react@npm:19.1.8, @types/react@npm:>=16.9.11": version: 19.1.8 resolution: "@types/react@npm:19.1.8" dependencies: @@ -1695,6 +1745,13 @@ __metadata: languageName: node linkType: hard +"@types/warning@npm:^3.0.0": + version: 3.0.3 + resolution: "@types/warning@npm:3.0.3" + checksum: 10c0/82c1235bd05d7f6940f80012404844e225d589ad338aa4585b231a2c8deacc695b683f4168757c82c10047b81854cbeaaeefd60536dd67bb48f8a65e20410652 + languageName: node + linkType: hard + "@typescript-eslint/eslint-plugin@npm:^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0": version: 8.34.1 resolution: "@typescript-eslint/eslint-plugin@npm:8.34.1" @@ -1966,13 +2023,6 @@ __metadata: languageName: node linkType: hard -"@wojtekmaj/date-utils@npm:^1.1.3": - version: 1.5.1 - resolution: "@wojtekmaj/date-utils@npm:1.5.1" - checksum: 10c0/7c213cca5ab6b84ef61b9aea2b9fb8a04bf4c9764b28a97ffc4ee46a3e81560532a74d106a6f8aeef4792e1aaa6ea3dfd3c4a639dddbea560eb3f33cd62b8d7d - languageName: node - linkType: hard - "acorn-jsx@npm:^5.3.2": version: 5.3.2 resolution: "acorn-jsx@npm:5.3.2" @@ -2311,7 +2361,14 @@ __metadata: languageName: node linkType: hard -"clsx@npm:^2.0.0, clsx@npm:^2.1.1": +"clsx@npm:^1.2.1": + version: 1.2.1 + resolution: "clsx@npm:1.2.1" + checksum: 10c0/34dead8bee24f5e96f6e7937d711978380647e936a22e76380290e35486afd8634966ce300fc4b74a32f3762c7d4c0303f442c3e259f4ce02374eb0c82834f27 + languageName: node + linkType: hard + +"clsx@npm:^2.1.1": version: 2.1.1 resolution: "clsx@npm:2.1.1" checksum: 10c0/c4c8eb865f8c82baab07e71bfa8897c73454881c4f99d6bc81585aecd7c441746c1399d08363dc096c550cceaf97bd4ce1e8854e1771e9998d9f94c4fe075839 @@ -2419,6 +2476,20 @@ __metadata: languageName: node linkType: hard +"date-arithmetic@npm:^4.1.0": + version: 4.1.0 + resolution: "date-arithmetic@npm:4.1.0" + checksum: 10c0/697774a1a6a1b226004b5527326599c01a095bf715a0d43089e0493a565a91e7f4342b1b73b855c0e7b0caaf4bc947a61bc35ec60d162d52ef3c3c08eab26b6e + languageName: node + linkType: hard + +"dayjs@npm:^1.11.7": + version: 1.11.13 + resolution: "dayjs@npm:1.11.13" + checksum: 10c0/a3caf6ac8363c7dade9d1ee797848ddcf25c1ace68d9fe8678ecf8ba0675825430de5d793672ec87b24a69bf04a1544b176547b2539982275d5542a7955f35b7 + languageName: node + linkType: hard + "debug@npm:^3.2.7": version: 3.2.7 resolution: "debug@npm:3.2.7" @@ -2469,6 +2540,13 @@ __metadata: languageName: node linkType: hard +"dequal@npm:^2.0.3": + version: 2.0.3 + resolution: "dequal@npm:2.0.3" + checksum: 10c0/f98860cdf58b64991ae10205137c0e97d384c3a4edc7f807603887b7c4b850af1224a33d88012009f150861cbee4fa2d322c4cc04b9313bee312e47f6ecaa888 + languageName: node + linkType: hard + "detect-libc@npm:^2.0.3, detect-libc@npm:^2.0.4": version: 2.0.4 resolution: "detect-libc@npm:2.0.4" @@ -2492,6 +2570,16 @@ __metadata: languageName: node linkType: hard +"dom-helpers@npm:^5.2.0, dom-helpers@npm:^5.2.1": + version: 5.2.1 + resolution: "dom-helpers@npm:5.2.1" + dependencies: + "@babel/runtime": "npm:^7.8.7" + csstype: "npm:^3.0.2" + checksum: 10c0/f735074d66dd759b36b158fa26e9d00c9388ee0e8c9b16af941c38f014a37fc80782de83afefd621681b19ac0501034b4f1c4a3bff5caa1b8667f0212b5e124c + languageName: node + linkType: hard + "dotenv-cli@npm:8.0.0": version: 8.0.0 resolution: "dotenv-cli@npm:8.0.0" @@ -3191,15 +3279,6 @@ __metadata: languageName: node linkType: hard -"get-user-locale@npm:^2.2.1": - version: 2.3.2 - resolution: "get-user-locale@npm:2.3.2" - dependencies: - mem: "npm:^8.0.0" - checksum: 10c0/2796b3fc3782b1f4826f31e899642cf72eeb23e296e1cf55280aab5caf7a25f4b906491ee1508a001519d6a410902ccf8fa8edaa895b7aee5dfd422ffe5523b9 - languageName: node - linkType: hard - "glob-parent@npm:^5.1.2": version: 5.1.2 resolution: "glob-parent@npm:5.1.2" @@ -3218,6 +3297,13 @@ __metadata: languageName: node linkType: hard +"globalize@npm:^0.1.1": + version: 0.1.1 + resolution: "globalize@npm:0.1.1" + checksum: 10c0/6d4687e7c52a38e7f16f77339aef9b3364c34ce8cc1c8b8495b76418013252eaf5b2453fbc2d8bb9e6e56c739262665484dc7ac51b729501ff0a3b822730116b + languageName: node + linkType: hard + "globals@npm:^14.0.0": version: 14.0.0 resolution: "globals@npm:14.0.0" @@ -3355,6 +3441,15 @@ __metadata: languageName: node linkType: hard +"invariant@npm:^2.2.4": + version: 2.2.4 + resolution: "invariant@npm:2.2.4" + dependencies: + loose-envify: "npm:^1.0.0" + checksum: 10c0/5af133a917c0bcf65e84e7f23e779e7abc1cd49cb7fdc62d00d1de74b0d8c1b5ee74ac7766099fb3be1b05b26dfc67bab76a17030d2fe7ea2eef867434362dfc + languageName: node + linkType: hard + "is-array-buffer@npm:^3.0.4, is-array-buffer@npm:^3.0.5": version: 3.0.5 resolution: "is-array-buffer@npm:3.0.5" @@ -3863,6 +3958,13 @@ __metadata: languageName: node linkType: hard +"lodash-es@npm:^4.17.21": + version: 4.17.21 + resolution: "lodash-es@npm:4.17.21" + checksum: 10c0/fb407355f7e6cd523a9383e76e6b455321f0f153a6c9625e21a8827d10c54c2a2341bd2ae8d034358b60e07325e1330c14c224ff582d04612a46a4f0479ff2f2 + languageName: node + linkType: hard + "lodash.merge@npm:^4.6.2": version: 4.6.2 resolution: "lodash.merge@npm:4.6.2" @@ -3870,6 +3972,13 @@ __metadata: languageName: node linkType: hard +"lodash@npm:^4.17.21": + version: 4.17.21 + resolution: "lodash@npm:4.17.21" + checksum: 10c0/d8cbea072bb08655bb4c989da418994b073a608dffa608b09ac04b43a791b12aeae7cd7ad919aa4c925f33b48490b5cfe6c1f71d827956071dae2e7bb3a6b74c + languageName: node + linkType: hard + "loose-envify@npm:^1.0.0, loose-envify@npm:^1.4.0": version: 1.4.0 resolution: "loose-envify@npm:1.4.0" @@ -3890,6 +3999,13 @@ __metadata: languageName: node linkType: hard +"luxon@npm:^3.2.1": + version: 3.6.1 + resolution: "luxon@npm:3.6.1" + checksum: 10c0/906d57a9dc4d1de9383f2e9223e378c298607c1b4d17b6657b836a3cd120feb1c1de3b5d06d846a3417e1ca764de8476e8c23b3cd4083b5cdb870adcb06a99d5 + languageName: node + linkType: hard + "magic-string@npm:^0.30.17": version: 0.30.17 resolution: "magic-string@npm:0.30.17" @@ -3899,15 +4015,6 @@ __metadata: languageName: node linkType: hard -"map-age-cleaner@npm:^0.1.3": - version: 0.1.3 - resolution: "map-age-cleaner@npm:0.1.3" - dependencies: - p-defer: "npm:^1.0.0" - checksum: 10c0/7495236c7b0950956c144fd8b4bc6399d4e78072a8840a4232fe1c4faccbb5eb5d842e5c0a56a60afc36d723f315c1c672325ca03c1b328650f7fcc478f385fd - languageName: node - linkType: hard - "math-intrinsics@npm:^1.1.0": version: 1.1.0 resolution: "math-intrinsics@npm:1.1.0" @@ -3940,6 +4047,7 @@ __metadata: "@tailwindcss/postcss": "npm:4.1.10" "@types/node": "npm:22.15.32" "@types/react": "npm:19.1.8" + "@types/react-big-calendar": "npm:^1" "@types/react-dom": "npm:19.1.6" bcryptjs: "npm:^3.0.2" class-variance-authority: "npm:^0.7.1" @@ -3956,7 +4064,7 @@ __metadata: prettier: "npm:3.5.3" prisma: "npm:6.9.0" react: "npm:^19.1.0" - react-calendar: "npm:^5.1.0" + react-big-calendar: "npm:^1.18.0" react-dom: "npm:^19.0.0" react-hook-form: "npm:^7.56.4" tailwind-merge: "npm:^3.2.0" @@ -3967,13 +4075,10 @@ __metadata: languageName: unknown linkType: soft -"mem@npm:^8.0.0": - version: 8.1.1 - resolution: "mem@npm:8.1.1" - dependencies: - map-age-cleaner: "npm:^0.1.3" - mimic-fn: "npm:^3.1.0" - checksum: 10c0/5829c404d024c1accaf76ebacbc7eae9b59e5ce5722d184aa24e8387a8097a499f6aa7e181021003c51eb87b2dcdc9a2270050c58753cce761de206643cba91c +"memoize-one@npm:^6.0.0": + version: 6.0.0 + resolution: "memoize-one@npm:6.0.0" + checksum: 10c0/45c88e064fd715166619af72e8cf8a7a17224d6edf61f7a8633d740ed8c8c0558a4373876c9b8ffc5518c2b65a960266adf403cc215cb1e90f7e262b58991f54 languageName: node linkType: hard @@ -3994,13 +4099,6 @@ __metadata: languageName: node linkType: hard -"mimic-fn@npm:^3.1.0": - version: 3.1.0 - resolution: "mimic-fn@npm:3.1.0" - checksum: 10c0/a07cdd8ed6490c2dff5b11f889b245d9556b80f5a653a552a651d17cff5a2d156e632d235106c2369f00cccef4071704589574cf3601bc1b1400a1f620dff067 - languageName: node - linkType: hard - "minimatch@npm:^3.1.2": version: 3.1.2 resolution: "minimatch@npm:3.1.2" @@ -4051,6 +4149,22 @@ __metadata: languageName: node linkType: hard +"moment-timezone@npm:^0.5.40": + version: 0.5.48 + resolution: "moment-timezone@npm:0.5.48" + dependencies: + moment: "npm:^2.29.4" + checksum: 10c0/ab14ec9d94bc33f29ac18e5417b7f8aca0b17130b952c5cc9697b8fea839e5ece9313af5fd3c9703a05db472b1560ddbfc7ad2aa24aac9afd047d6da6c3c6033 + languageName: node + linkType: hard + +"moment@npm:^2.29.4": + version: 2.30.1 + resolution: "moment@npm:2.30.1" + checksum: 10c0/865e4279418c6de666fca7786607705fd0189d8a7b7624e2e56be99290ac846f90878a6f602e34b4e0455c549b85385b1baf9966845962b313699e7cb847543a + languageName: node + linkType: hard + "ms@npm:^2.1.1, ms@npm:^2.1.3": version: 2.1.3 resolution: "ms@npm:2.1.3" @@ -4290,13 +4404,6 @@ __metadata: languageName: node linkType: hard -"p-defer@npm:^1.0.0": - version: 1.0.0 - resolution: "p-defer@npm:1.0.0" - checksum: 10c0/ed603c3790e74b061ac2cb07eb6e65802cf58dce0fbee646c113a7b71edb711101329ad38f99e462bd2e343a74f6e9366b496a35f1d766c187084d3109900487 - languageName: node - linkType: hard - "p-limit@npm:^3.0.2": version: 3.1.0 resolution: "p-limit@npm:3.1.0" @@ -4444,7 +4551,7 @@ __metadata: languageName: node linkType: hard -"prop-types@npm:^15.8.1": +"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1": version: 15.8.1 resolution: "prop-types@npm:15.8.1" dependencies: @@ -4469,22 +4576,30 @@ __metadata: languageName: node linkType: hard -"react-calendar@npm:^5.1.0": - version: 5.1.0 - resolution: "react-calendar@npm:5.1.0" +"react-big-calendar@npm:^1.18.0": + version: 1.19.2 + resolution: "react-big-calendar@npm:1.19.2" dependencies: - "@wojtekmaj/date-utils": "npm:^1.1.3" - clsx: "npm:^2.0.0" - get-user-locale: "npm:^2.2.1" - warning: "npm:^4.0.0" + "@babel/runtime": "npm:^7.20.7" + clsx: "npm:^1.2.1" + date-arithmetic: "npm:^4.1.0" + dayjs: "npm:^1.11.7" + dom-helpers: "npm:^5.2.1" + globalize: "npm:^0.1.1" + invariant: "npm:^2.2.4" + lodash: "npm:^4.17.21" + lodash-es: "npm:^4.17.21" + luxon: "npm:^3.2.1" + memoize-one: "npm:^6.0.0" + moment: "npm:^2.29.4" + moment-timezone: "npm:^0.5.40" + prop-types: "npm:^15.8.1" + react-overlays: "npm:^5.2.1" + uncontrollable: "npm:^7.2.1" peerDependencies: - "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - peerDependenciesMeta: - "@types/react": - optional: true - checksum: 10c0/27673f639c5d6296342a2a888436b31a5d602faeaae01be83b2beb98ff568b0a3d1514f5cc50fcacf3ac50b9c0b9d2fb423b0c001a8f5f1a22816671409e2616 + react: ^16.14.0 || ^17 || ^18 || ^19 + react-dom: ^16.14.0 || ^17 || ^18 || ^19 + checksum: 10c0/d60b12733d6c0dfb1b3bf89226a18b613dff66b3a4e03d90b0e7a68ad90478a3f4150b859a803474bfa98730bad3be622dc94326e90ac998e2e78ab36cef74db languageName: node linkType: hard @@ -4515,6 +4630,32 @@ __metadata: languageName: node linkType: hard +"react-lifecycles-compat@npm:^3.0.4": + version: 3.0.4 + resolution: "react-lifecycles-compat@npm:3.0.4" + checksum: 10c0/1d0df3c85af79df720524780f00c064d53a9dd1899d785eddb7264b378026979acbddb58a4b7e06e7d0d12aa1494fd5754562ee55d32907b15601068dae82c27 + languageName: node + linkType: hard + +"react-overlays@npm:^5.2.1": + version: 5.2.1 + resolution: "react-overlays@npm:5.2.1" + dependencies: + "@babel/runtime": "npm:^7.13.8" + "@popperjs/core": "npm:^2.11.6" + "@restart/hooks": "npm:^0.4.7" + "@types/warning": "npm:^3.0.0" + dom-helpers: "npm:^5.2.0" + prop-types: "npm:^15.7.2" + uncontrollable: "npm:^7.2.1" + warning: "npm:^4.0.3" + peerDependencies: + react: ">=16.3.0" + react-dom: ">=16.3.0" + checksum: 10c0/61836490040cfcdebc792b6eddcfac47b7b7e159f99304165371e9eb389a6875f20ddba3433421413ccfb918e8da6042ab2829f9b1f6f5dd9f8476aa16ddcfbe + languageName: node + linkType: hard + "react-remove-scroll-bar@npm:^2.3.7": version: 2.3.8 resolution: "react-remove-scroll-bar@npm:2.3.8" @@ -5269,6 +5410,20 @@ __metadata: languageName: node linkType: hard +"uncontrollable@npm:^7.2.1": + version: 7.2.1 + resolution: "uncontrollable@npm:7.2.1" + dependencies: + "@babel/runtime": "npm:^7.6.3" + "@types/react": "npm:>=16.9.11" + invariant: "npm:^2.2.4" + react-lifecycles-compat: "npm:^3.0.4" + peerDependencies: + react: ">=15.0.0" + checksum: 10c0/81473e892027a99f1ead6b9afd16db65097651cd36c4b6db710728f206f1fc4b82ba9170ecb4a1127a23857e01ba51c0194d0a7cfeecfea61ba9418e0276cb56 + languageName: node + linkType: hard + "undici-types@npm:~6.21.0": version: 6.21.0 resolution: "undici-types@npm:6.21.0" @@ -5383,7 +5538,7 @@ __metadata: languageName: node linkType: hard -"warning@npm:^4.0.0": +"warning@npm:^4.0.3": version: 4.0.3 resolution: "warning@npm:4.0.3" dependencies: From 4b848b4981d32aa915c42808ff092fb4be0421d2 Mon Sep 17 00:00:00 2001 From: Semir Date: Fri, 23 May 2025 15:27:16 +0200 Subject: [PATCH 3/6] feat: Calendar Update 1.1 --- src/app/home/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx index b20d042..fcee5ad 100644 --- a/src/app/home/page.tsx +++ b/src/app/home/page.tsx @@ -28,4 +28,4 @@ const MyCalendar = (props) => (
) -export default MyCalendar; \ No newline at end of file +export default MyCalendar; From 149439b2b4357c4fcf29e613b7943463bb1e9c32 Mon Sep 17 00:00:00 2001 From: Semir Date: Wed, 28 May 2025 09:51:16 +0200 Subject: [PATCH 4/6] feat: Custom Calendar Toolbar Add Custom Calendar Toolbar --- package.json | 1 + src/app/home/page.tsx | 7 + src/components/custom-toolbar.css | 139 +++++++++++++++++++ src/components/custom-toolbar.tsx | 218 ++++++++++++++++++++++++++++++ yarn.lock | 8 ++ 5 files changed, 373 insertions(+) create mode 100644 src/components/custom-toolbar.css create mode 100644 src/components/custom-toolbar.tsx diff --git a/package.json b/package.json index 5d8483e..1315ce6 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "bcryptjs": "^3.0.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", + "date-fns": "^4.1.0", "lucide-react": "^0.511.0", "next": "15.3.3", "next-auth": "^5.0.0-beta.25", diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx index fcee5ad..6149d47 100644 --- a/src/app/home/page.tsx +++ b/src/app/home/page.tsx @@ -4,6 +4,7 @@ import { Calendar, momentLocalizer } from 'react-big-calendar'; import moment from 'moment'; import 'react-big-calendar/lib/css/react-big-calendar.css'; import 'react-big-calendar/lib/addons/dragAndDrop/styles.css'; +import CustomToolbar from '@/components/custom-toolbar'; moment.updateLocale('en', { week: { @@ -24,6 +25,12 @@ const MyCalendar = (props) => ( style={{ height: 500 }} culture="de-DE" defaultView='week' + + /*CustomToolbar*/ + components={{ + toolbar: CustomToolbar + }} + /*CustomToolbar*/ /> ) diff --git a/src/components/custom-toolbar.css b/src/components/custom-toolbar.css new file mode 100644 index 0000000..16e86ed --- /dev/null +++ b/src/components/custom-toolbar.css @@ -0,0 +1,139 @@ +/* custom-toolbar.css */ + +/* Container der Toolbar */ +.custom-toolbar { + display: flex; + flex-direction: column; + gap: 12px; + padding: 16px; + background-color: #ffffff; + border: 1px solid #e0e0e0; + /*border-radius: 8px;*/ + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +/* Style für den Bereich, in dem die Ansichten (Month, Week, etc.) gewechselt werden */ +.custom-toolbar .view-change .view-switcher { + display: flex; + gap: 8px; + justify-content: center; +} + +.custom-toolbar .view-change .view-switcher button { + padding: 8px 16px; + background-color: #c1830d; + /*border: 1px solid #ccc;*/ + border-radius: 11px; + font-size: 12px; + cursor: pointer; + transition: background-color 0.2s, border-color 0.2s; + height: 30px; + margin-top: 3.5px; + color: #ffffff; +} + +.custom-toolbar .view-change .view-switcher button:hover:not(:disabled) { + background-color: #e0e0e0; + border-color: #999; +} + +.custom-toolbar .view-change .view-switcher button:disabled { + background-color: #d0d0d0; + border-color: #aaa; + cursor: default; +} + +/* Anzeige des aktuellen Datums (Monat und Jahr) */ +.custom-toolbar .current-date { + font-weight: bold; + font-size: 12px; + text-align: center; + color: #ffffff; + margin: 4px 0; + background-color: #717171; + width: 178px; + height: 37px; + border-radius: 11px; +} + +/* Navigationsbereich (Today, Prev, Next) */ +.custom-toolbar .navigation-controls { + display: flex; + gap: 8px; + justify-content: center; +} + +.custom-toolbar .navigation-controls button { + padding: 8px 12px; + /*background-color: #2196F3;*/ + color: #ffffff; + border: none; + border-radius: 11px; + font-size: 12px; + cursor: pointer; + transition: background-color 0.2s; +} + +.custom-toolbar .navigation-controls button:hover { + background-color: #1976D2; +} + +.custom-toolbar .navigation-controls button:active { + background-color: #1565C0; +} + +/* Dropdown-Bereich für Woche und Jahr */ +.custom-toolbar .dropdowns { + display: flex; + gap: 8px; + justify-content: center; + height: 30px; + font-size: 10px; + margin-top: 3.5px; + border-radius: 11px; +} + +.custom-toolbar .dropdowns select { + padding: 8px 12px; + /*border: 1px solid #ccc;*/ + border-radius: 11px; + font-size: 10px; + background-color: #555555; + color: #ffffff; + cursor: pointer; + transition: border-color 0.2s; +} + +.custom-toolbar .dropdowns select:hover { + border-color: #999; +} + +.right-section { + background-color: #717171; + width: 393px; + height: 37px; + border-radius: 11px; +} + +.custom-toolbar .navigation-controls .handleWeek button { + background-color: #717171; + height: 30px; + width: 30px; + margin-bottom: 3.5px; +} + +.custom-toolbar .navigation-controls .today button { + background-color: #c6c6c6; + height: 30px; + width: 100px; + color: #000000; + margin-top: 3.5px; +} + +.view-change { + background-color: #717171; + height: 37px; + width: 290px; + border-radius: 11px; +} diff --git a/src/components/custom-toolbar.tsx b/src/components/custom-toolbar.tsx new file mode 100644 index 0000000..10feafa --- /dev/null +++ b/src/components/custom-toolbar.tsx @@ -0,0 +1,218 @@ +import React, { useState, useEffect } from 'react'; +import { format } from 'date-fns'; +import './custom-toolbar.css'; + +interface CustomToolbarProps { + // Das aktuell angezeigte Datum (wird z. B. von der Calendar-Komponente geliefert) + date: Date; + // Aktuelle Ansicht: "month", "week", "day" oder "agenda" + view: 'month' | 'week' | 'day' | 'agenda'; + /** + * onNavigate ermöglicht das Wechseln des angezeigten Datums. + * Action kann bspw. 'TODAY' oder 'SET_DATE' sein; newDate wird übergeben, wenn benötigt. + */ + onNavigate: (action: string, newDate?: Date) => void; + // onView wechselt die Ansicht + onView: (newView: 'month' | 'week' | 'day' | 'agenda') => void; +} + +const CustomToolbar: React.FC = ({ date, view, onNavigate, onView }) => { + + // Hilfsfunktion, um die ISO-Wochennummer eines Datums zu ermitteln + const getISOWeek = (date: Date): number => { + const tmp = new Date(date.getTime()); + // Verschiebe das Datum so, dass der nächste Donnerstag erreicht wird (ISO: Woche beginnt am Montag) + tmp.setDate(tmp.getDate() + 4 - (tmp.getDay() || 7)); + const yearStart = new Date(tmp.getFullYear(), 0, 1); + const weekNo = Math.ceil((((tmp.getTime() - yearStart.getTime()) / 86400000) + 1) / 7); + return weekNo; + }; + + // Neue Funktion: Ermittelt das ISO-Wochenjahr eines Datums. + // Das ISO-Wochenjahr entspricht dem Jahr des Donnerstags in dieser Woche. + const getISOWeekYear = (date: Date): number => { + const tmp = new Date(date.getTime()); + tmp.setDate(tmp.getDate() + 4 - (tmp.getDay() || 7)); + return tmp.getFullYear(); + }; + + // Ermittelt die Anzahl der ISO-Wochen im Jahr + const getISOWeeksInYear = (year: number): number => { + const d = new Date(year, 11, 31); + const week = getISOWeek(d); + return week === 1 ? getISOWeek(new Date(year, 11, 24)) : week; + }; + + /* + Berechnet den Montag der gewünschten ISO-Woche eines Jahres. + Wir ermitteln zunächst den ersten Montag der ersten ISO-Woche und addieren dann (week - 1) * 7 Tage. + */ + const getDateOfISOWeek = (week: number, year: number): Date => { + const jan1 = new Date(year, 0, 1); + const dayOfWeek = jan1.getDay(); + const isoDayOfWeek = dayOfWeek === 0 ? 7 : dayOfWeek; + let firstMonday: Date; + if (isoDayOfWeek <= 4) { + // Jan 1 gehört zur ersten ISO-Woche – bestimme den Montag dieser Woche + firstMonday = new Date(year, 0, 1 - isoDayOfWeek + 1); + } else { + // Andernfalls liegt der erste Montag in der darauffolgenden Woche + firstMonday = new Date(year, 0, 1 + (8 - isoDayOfWeek)); + } + firstMonday.setDate(firstMonday.getDate() + (week - 1) * 7); + return firstMonday; + }; + + // Lokaler State für Woche und ISO-Wochenjahr (statt des reinen Kalenderjahrs) + const [selectedWeek, setSelectedWeek] = useState(getISOWeek(date)); + const [selectedYear, setSelectedYear] = useState(getISOWeekYear(date)); + + // Aktualisiere die Auswahl, wenn sich die Prop "date" ändert + useEffect(() => { + setSelectedWeek(getISOWeek(date)); + setSelectedYear(getISOWeekYear(date)); + }, [date]); + + // Für die Dropdown-Liste der Wochen: Liste von 1 bis totalWeeks + const totalWeeks = getISOWeeksInYear(selectedYear); + const weekOptions = Array.from({ length: totalWeeks }, (_, i) => i + 1); + + // Beispielhafte Jahresliste: aktuelles ISO-Wochenjahr ± 10 + const yearOptions = Array.from({ length: 21 }, (_, i) => selectedYear - 10 + i); + + // Berechne den Start (Montag) und das Ende (Sonntag) der aktuell angezeigten Woche + const weekStartDate = getDateOfISOWeek(selectedWeek, selectedYear); + const weekEndDate = new Date(weekStartDate); + weekEndDate.setDate(weekStartDate.getDate() + 6); + + // Ermittele Monat und Jahr von Start- und Enddatum (normales Kalenderjahr) + const monthStart = format(weekStartDate, 'MMMM'); + const monthEnd = format(weekEndDate, 'MMMM'); + const yearAtStart = format(weekStartDate, 'yyyy'); + const yearAtEnd = format(weekEndDate, 'yyyy'); + + // Erstelle das Label: + // 1. Falls der Wochenanfang und das Wochenende in unterschiedlichen Jahren liegen, + // wird z. B. "Dezember 2025 - Januar 2026" angezeigt. + // 2. Liegen beide im gleichen Jahr, wird unterschieden zwischen gleichem Monat und unterschiedlichem Monat. + let dateLabel: string; + if (yearAtStart !== yearAtEnd) { + dateLabel = `${monthStart} ${yearAtStart} - ${monthEnd} ${yearAtEnd}`; + } else if (monthStart !== monthEnd) { + dateLabel = `${monthStart} - ${monthEnd} ${yearAtStart}`; + } else { + dateLabel = `${monthStart} ${yearAtStart}`; + } + + // Handler zum Wechseln der Ansicht + const handleViewChange = (newView: 'month' | 'week' | 'day' | 'agenda') => { + onView(newView); + }; + + // "Today"-Button: setzt das Datum auf das heutige Datum (unter Verwendung des ISO-Wochenjahrs) + const handleToday = () => { + const today = new Date(); + setSelectedWeek(getISOWeek(today)); + setSelectedYear(getISOWeekYear(today)); + onNavigate('TODAY', today); + }; + + // Wechselt zur vorherigen Woche. Bei Woche < 1, wird ins Vorjahr gewechselt. + const handlePrevWeek = () => { + let newWeek = selectedWeek - 1; + let newYear = selectedYear; + if (newWeek < 1) { + newYear = selectedYear - 1; + newWeek = getISOWeeksInYear(newYear); + } + setSelectedWeek(newWeek); + setSelectedYear(newYear); + const newDate = getDateOfISOWeek(newWeek, newYear); + onNavigate('SET_DATE', newDate); + }; + + // Wechselt zur nächsten Woche. Überschreitet die Woche die maximale Zahl, wechselt ins nächste Jahr. + const handleNextWeek = () => { + let newWeek = selectedWeek + 1; + let newYear = selectedYear; + if (newWeek > getISOWeeksInYear(selectedYear)) { + newYear = selectedYear + 1; + newWeek = 1; + } + setSelectedWeek(newWeek); + setSelectedYear(newYear); + const newDate = getDateOfISOWeek(newWeek, newYear); + onNavigate('SET_DATE', newDate); + }; + + // Handler, wenn der Nutzer über das Dropdown eine Woche auswählt + const handleWeekChange = (event: React.ChangeEvent) => { + const newWeek = parseInt(event.target.value, 10); + setSelectedWeek(newWeek); + const newDate = getDateOfISOWeek(newWeek, selectedYear); + onNavigate('SET_DATE', newDate); + }; + + // Handler, wenn der Nutzer über das Dropdown ein Jahr auswählt + const handleYearChange = (event: React.ChangeEvent) => { + const newYear = parseInt(event.target.value, 10); + setSelectedYear(newYear); + const totalWeeksInNewYear = getISOWeeksInYear(newYear); + const newWeek = Math.min(selectedWeek, totalWeeksInNewYear); + setSelectedWeek(newWeek); + const newDate = getDateOfISOWeek(newWeek, newYear); + onNavigate('SET_DATE', newDate); + }; + + return ( +
+ {/* Anzeige des Datums-Labels */} +
+ {dateLabel} +
+ + {/* Ansicht wechseln */} +
+
+ + + + +
+
+ +
+ {/* Navigationsbuttons */} +
+
+ + +
+
+ +
+
+ + {/* DropDowns für Woche und Jahr */} +
+ + +
+
+
+ ); +}; + +export default CustomToolbar; diff --git a/yarn.lock b/yarn.lock index 245196a..7ce9778 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2483,6 +2483,13 @@ __metadata: languageName: node linkType: hard +"date-fns@npm:^4.1.0": + version: 4.1.0 + resolution: "date-fns@npm:4.1.0" + checksum: 10c0/b79ff32830e6b7faa009590af6ae0fb8c3fd9ffad46d930548fbb5acf473773b4712ae887e156ba91a7b3dc30591ce0f517d69fd83bd9c38650fdc03b4e0bac8 + languageName: node + linkType: hard + "dayjs@npm:^1.11.7": version: 1.11.13 resolution: "dayjs@npm:1.11.13" @@ -4052,6 +4059,7 @@ __metadata: bcryptjs: "npm:^3.0.2" class-variance-authority: "npm:^0.7.1" clsx: "npm:^2.1.1" + date-fns: "npm:^4.1.0" dotenv-cli: "npm:8.0.0" eslint: "npm:9.29.0" eslint-config-next: "npm:15.3.3" From 3992b05f4cb538225ac552c82e5b9c8ac211d282 Mon Sep 17 00:00:00 2001 From: Semir Date: Fri, 6 Jun 2025 10:43:25 +0200 Subject: [PATCH 5/6] feat: Calendar Layout and Function Update --- package.json | 1 + src/app/home/page.tsx | 39 +- src/components/calendar.tsx | 38 ++ src/components/custom-toolbar.css | 70 +- src/components/custom-toolbar.tsx | 249 ++++--- src/components/react-big-calendar.css | 904 ++++++++++++++++++++++++++ yarn.lock | 38 +- 7 files changed, 1172 insertions(+), 167 deletions(-) create mode 100644 src/components/calendar.tsx create mode 100644 src/components/react-big-calendar.css diff --git a/package.json b/package.json index 1315ce6..0e7bb30 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "next-themes": "^0.4.6", "react": "^19.1.0", "react-big-calendar": "^1.18.0", + "react-datepicker": "^8.4.0", "react-dom": "^19.0.0", "react-hook-form": "^7.56.4", "tailwind-merge": "^3.2.0", diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx index 6149d47..0b7515a 100644 --- a/src/app/home/page.tsx +++ b/src/app/home/page.tsx @@ -1,38 +1,3 @@ -"use client"; +import Calendar from '@/components/calendar'; -import { Calendar, momentLocalizer } from 'react-big-calendar'; -import moment from 'moment'; -import 'react-big-calendar/lib/css/react-big-calendar.css'; -import 'react-big-calendar/lib/addons/dragAndDrop/styles.css'; -import CustomToolbar from '@/components/custom-toolbar'; - -moment.updateLocale('en', { - week: { - dow: 1, - doy: 4, - }, -}); - -const localizer = momentLocalizer(moment) - -const MyCalendar = (props) => ( -
- -
-) - -export default MyCalendar; +export default function home () {return } \ No newline at end of file diff --git a/src/components/calendar.tsx b/src/components/calendar.tsx new file mode 100644 index 0000000..defedab --- /dev/null +++ b/src/components/calendar.tsx @@ -0,0 +1,38 @@ +"use client"; + +import { Calendar, momentLocalizer } from 'react-big-calendar'; +import moment from 'moment'; +import '@/components/react-big-calendar.css'; +import 'react-big-calendar/lib/addons/dragAndDrop/styles.css'; +import CustomToolbar from '@/components/custom-toolbar'; + +moment.updateLocale('en', { + week: { + dow: 1, + doy: 4, + }, +}); + +const localizer = momentLocalizer(moment) + +const MyCalendar = (props) => ( +
+ +
+) + +export default MyCalendar; diff --git a/src/components/custom-toolbar.css b/src/components/custom-toolbar.css index 16e86ed..e16a8e4 100644 --- a/src/components/custom-toolbar.css +++ b/src/components/custom-toolbar.css @@ -13,8 +13,7 @@ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } -/* Style für den Bereich, in dem die Ansichten (Month, Week, etc.) gewechselt werden */ -.custom-toolbar .view-change .view-switcher { +/*.custom-toolbar .view-change .view-switcher { display: flex; gap: 8px; justify-content: center; @@ -24,7 +23,7 @@ padding: 8px 16px; background-color: #c1830d; /*border: 1px solid #ccc;*/ - border-radius: 11px; +/* border-radius: 11px; font-size: 12px; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; @@ -42,7 +41,7 @@ background-color: #d0d0d0; border-color: #aaa; cursor: default; -} +}*/ /* Anzeige des aktuellen Datums (Monat und Jahr) */ .custom-toolbar .current-date { @@ -50,7 +49,7 @@ font-size: 12px; text-align: center; color: #ffffff; - margin: 4px 0; + /*margin: 4px 0;*/ background-color: #717171; width: 178px; height: 37px; @@ -110,30 +109,53 @@ } .right-section { - background-color: #717171; - width: 393px; - height: 37px; - border-radius: 11px; + background-color: #717171; + width: 393px; + height: 48px; + border-radius: 11px; + justify-items: center; + align-items: center; } .custom-toolbar .navigation-controls .handleWeek button { - background-color: #717171; - height: 30px; - width: 30px; - margin-bottom: 3.5px; + background-color: #717171; + height: 30px; + width: 30px; + margin-bottom: 3.5px; } -.custom-toolbar .navigation-controls .today button { - background-color: #c6c6c6; - height: 30px; - width: 100px; - color: #000000; - margin-top: 3.5px; -} +/*.custom-toolbar .navigation-controls .today button { + background-color: #c6c6c6; + height: 30px; + width: 100px; + color: #000000; + margin-top: 3.5px; +}*/ .view-change { - background-color: #717171; - height: 37px; - width: 290px; - border-radius: 11px; + background-color: #717171; + height: 48px; + width: 323px; + border-radius: 11px; + justify-items: center; +} + +.right-section .datepicker-box { + color: #000000; + background-color: #c6c6c6; + height: 36px; + width: 85px; + border-radius: 11px; + font-size: 12px; + align-self: center; +} + +.datepicker { + text-align: center; + width: 85px; + height: 30px; +} + +.datepicker-box { + z-index: 9999; } diff --git a/src/components/custom-toolbar.tsx b/src/components/custom-toolbar.tsx index 10feafa..5f9a2cf 100644 --- a/src/components/custom-toolbar.tsx +++ b/src/components/custom-toolbar.tsx @@ -1,214 +1,253 @@ import React, { useState, useEffect } from 'react'; import { format } from 'date-fns'; import './custom-toolbar.css'; +import { Button } from '@/components/custom-ui/button'; +import DatePicker from 'react-datepicker'; +import 'react-datepicker/dist/react-datepicker.css'; interface CustomToolbarProps { - // Das aktuell angezeigte Datum (wird z. B. von der Calendar-Komponente geliefert) + //Aktuell angezeigtes Datum date: Date; - // Aktuelle Ansicht: "month", "week", "day" oder "agenda" + //Aktuelle Ansicht view: 'month' | 'week' | 'day' | 'agenda'; - /** - * onNavigate ermöglicht das Wechseln des angezeigten Datums. - * Action kann bspw. 'TODAY' oder 'SET_DATE' sein; newDate wird übergeben, wenn benötigt. - */ + onNavigate: (action: string, newDate?: Date) => void; - // onView wechselt die Ansicht + //Ansichtwechsel onView: (newView: 'month' | 'week' | 'day' | 'agenda') => void; } const CustomToolbar: React.FC = ({ date, view, onNavigate, onView }) => { - // Hilfsfunktion, um die ISO-Wochennummer eines Datums zu ermitteln + //ISO-Wochennummer eines Datums ermitteln const getISOWeek = (date: Date): number => { const tmp = new Date(date.getTime()); - // Verschiebe das Datum so, dass der nächste Donnerstag erreicht wird (ISO: Woche beginnt am Montag) + //Datum so verschieben, dass der nächste Donnerstag erreicht wird (ISO: Woche beginnt am Montag) tmp.setDate(tmp.getDate() + 4 - (tmp.getDay() || 7)); const yearStart = new Date(tmp.getFullYear(), 0, 1); const weekNo = Math.ceil((((tmp.getTime() - yearStart.getTime()) / 86400000) + 1) / 7); return weekNo; }; - // Neue Funktion: Ermittelt das ISO-Wochenjahr eines Datums. - // Das ISO-Wochenjahr entspricht dem Jahr des Donnerstags in dieser Woche. + //ISO-Wochenjahr eines Datums ermitteln const getISOWeekYear = (date: Date): number => { const tmp = new Date(date.getTime()); tmp.setDate(tmp.getDate() + 4 - (tmp.getDay() || 7)); return tmp.getFullYear(); }; - // Ermittelt die Anzahl der ISO-Wochen im Jahr + //Ermittlung der Anzahl der Wochen im Jahr const getISOWeeksInYear = (year: number): number => { const d = new Date(year, 11, 31); const week = getISOWeek(d); return week === 1 ? getISOWeek(new Date(year, 11, 24)) : week; }; - /* - Berechnet den Montag der gewünschten ISO-Woche eines Jahres. - Wir ermitteln zunächst den ersten Montag der ersten ISO-Woche und addieren dann (week - 1) * 7 Tage. - */ const getDateOfISOWeek = (week: number, year: number): Date => { const jan1 = new Date(year, 0, 1); const dayOfWeek = jan1.getDay(); const isoDayOfWeek = dayOfWeek === 0 ? 7 : dayOfWeek; let firstMonday: Date; if (isoDayOfWeek <= 4) { - // Jan 1 gehört zur ersten ISO-Woche – bestimme den Montag dieser Woche + //1. Januar gehört zur ersten ISO-Woche (Montag dieser Woche bestimmen) firstMonday = new Date(year, 0, 1 - isoDayOfWeek + 1); } else { - // Andernfalls liegt der erste Montag in der darauffolgenden Woche + //Ansonsten liegt der erste Montag in der darauffolgenden Woche firstMonday = new Date(year, 0, 1 + (8 - isoDayOfWeek)); } firstMonday.setDate(firstMonday.getDate() + (week - 1) * 7); return firstMonday; }; - // Lokaler State für Woche und ISO-Wochenjahr (statt des reinen Kalenderjahrs) + //Lokaler State für Woche und ISO-Wochenjahr (statt des reinen Kalenderjahrs) const [selectedWeek, setSelectedWeek] = useState(getISOWeek(date)); const [selectedYear, setSelectedYear] = useState(getISOWeekYear(date)); - // Aktualisiere die Auswahl, wenn sich die Prop "date" ändert + //Auswahl aktualisieren, wenn sich die Prop "date" ändert useEffect(() => { setSelectedWeek(getISOWeek(date)); setSelectedYear(getISOWeekYear(date)); }, [date]); - // Für die Dropdown-Liste der Wochen: Liste von 1 bis totalWeeks + //Dropdown-Liste der Wochen const totalWeeks = getISOWeeksInYear(selectedYear); const weekOptions = Array.from({ length: totalWeeks }, (_, i) => i + 1); - // Beispielhafte Jahresliste: aktuelles ISO-Wochenjahr ± 10 + //Jahresliste const yearOptions = Array.from({ length: 21 }, (_, i) => selectedYear - 10 + i); - // Berechne den Start (Montag) und das Ende (Sonntag) der aktuell angezeigten Woche + //Start (Montag) und Ende (Sonntag) der aktuell angezeigten Woche berechnen const weekStartDate = getDateOfISOWeek(selectedWeek, selectedYear); const weekEndDate = new Date(weekStartDate); weekEndDate.setDate(weekStartDate.getDate() + 6); - // Ermittele Monat und Jahr von Start- und Enddatum (normales Kalenderjahr) + //Monat und Jahr von Start- und Enddatum ermitteln const monthStart = format(weekStartDate, 'MMMM'); const monthEnd = format(weekEndDate, 'MMMM'); const yearAtStart = format(weekStartDate, 'yyyy'); const yearAtEnd = format(weekEndDate, 'yyyy'); - // Erstelle das Label: - // 1. Falls der Wochenanfang und das Wochenende in unterschiedlichen Jahren liegen, - // wird z. B. "Dezember 2025 - Januar 2026" angezeigt. - // 2. Liegen beide im gleichen Jahr, wird unterschieden zwischen gleichem Monat und unterschiedlichem Monat. - let dateLabel: string; - if (yearAtStart !== yearAtEnd) { - dateLabel = `${monthStart} ${yearAtStart} - ${monthEnd} ${yearAtEnd}`; - } else if (monthStart !== monthEnd) { - dateLabel = `${monthStart} - ${monthEnd} ${yearAtStart}`; - } else { - dateLabel = `${monthStart} ${yearAtStart}`; - } - - // Handler zum Wechseln der Ansicht + //Ansichtwechsel const handleViewChange = (newView: 'month' | 'week' | 'day' | 'agenda') => { onView(newView); }; - // "Today"-Button: setzt das Datum auf das heutige Datum (unter Verwendung des ISO-Wochenjahrs) + //Today-Button aktualisiert das Datum im DatePicker auf das heutige const handleToday = () => { const today = new Date(); + setSelectedDate(today); setSelectedWeek(getISOWeek(today)); setSelectedYear(getISOWeekYear(today)); onNavigate('TODAY', today); }; - // Wechselt zur vorherigen Woche. Bei Woche < 1, wird ins Vorjahr gewechselt. - const handlePrevWeek = () => { - let newWeek = selectedWeek - 1; - let newYear = selectedYear; - if (newWeek < 1) { - newYear = selectedYear - 1; - newWeek = getISOWeeksInYear(newYear); + //Pfeiltaste nach Vorne + const handleNext = () => { + let newDate: Date; + if (view === 'day' || view === 'agenda') { + newDate = new Date(date); + newDate.setDate(newDate.getDate() + 1); + } else if (view === 'week') { + let newWeek = selectedWeek + 1; + let newYear = selectedYear; + if (newWeek > getISOWeeksInYear(selectedYear)) { + newYear = selectedYear + 1; + newWeek = 1; + } + setSelectedWeek(newWeek); + setSelectedYear(newYear); + newDate = getDateOfISOWeek(newWeek, newYear); + } else if (view === 'month') { + newDate = new Date(date.getFullYear(), date.getMonth() + 1, 1); + } else { + newDate = new Date(date); } - setSelectedWeek(newWeek); - setSelectedYear(newYear); - const newDate = getDateOfISOWeek(newWeek, newYear); + //Datum im DatePicker aktualisieren + setSelectedDate(newDate); onNavigate('SET_DATE', newDate); }; - // Wechselt zur nächsten Woche. Überschreitet die Woche die maximale Zahl, wechselt ins nächste Jahr. - const handleNextWeek = () => { - let newWeek = selectedWeek + 1; - let newYear = selectedYear; - if (newWeek > getISOWeeksInYear(selectedYear)) { - newYear = selectedYear + 1; - newWeek = 1; + //Pfeiltaste nach Hinten + const handlePrev = () => { + let newDate: Date; + if (view === 'day' || view === 'agenda') { + newDate = new Date(date); + newDate.setDate(newDate.getDate() - 1); + } else if (view === 'week') { + let newWeek = selectedWeek - 1; + let newYear = selectedYear; + if (newWeek < 1) { + newYear = selectedYear - 1; + newWeek = getISOWeeksInYear(newYear); + } + setSelectedWeek(newWeek); + setSelectedYear(newYear); + newDate = getDateOfISOWeek(newWeek, newYear); + } else if (view === 'month') { + newDate = new Date(date.getFullYear(), date.getMonth() - 1, 1); + } else { + newDate = new Date(date); } - setSelectedWeek(newWeek); - setSelectedYear(newYear); - const newDate = getDateOfISOWeek(newWeek, newYear); + //Datum im DatePicker aktualisieren + setSelectedDate(newDate); onNavigate('SET_DATE', newDate); }; - // Handler, wenn der Nutzer über das Dropdown eine Woche auswählt - const handleWeekChange = (event: React.ChangeEvent) => { - const newWeek = parseInt(event.target.value, 10); - setSelectedWeek(newWeek); - const newDate = getDateOfISOWeek(newWeek, selectedYear); - onNavigate('SET_DATE', newDate); + const [selectedDate, setSelectedDate] = useState(new Date()); + + const handleDateChange = (date: Date | null) => { + setSelectedDate(date); + if (date) { + if (view === 'week') { + const newWeek = getISOWeek(date); + const newYear = getISOWeekYear(date); + setSelectedWeek(newWeek); + setSelectedYear(newYear); + const newDate = getDateOfISOWeek(newWeek, newYear); + onNavigate('SET_DATE', newDate); + } else if (view === 'day') { + onNavigate('SET_DATE', date); + } else if (view === 'month') { + const newDate = new Date(date.getFullYear(), date.getMonth(), 1); + onNavigate('SET_DATE', newDate); + } else if (view === 'agenda') { + onNavigate('SET_DATE', date); + } + } }; - // Handler, wenn der Nutzer über das Dropdown ein Jahr auswählt - const handleYearChange = (event: React.ChangeEvent) => { - const newYear = parseInt(event.target.value, 10); - setSelectedYear(newYear); - const totalWeeksInNewYear = getISOWeeksInYear(newYear); - const newWeek = Math.min(selectedWeek, totalWeeksInNewYear); - setSelectedWeek(newWeek); - const newDate = getDateOfISOWeek(newWeek, newYear); - onNavigate('SET_DATE', newDate); - }; return (
- {/* Anzeige des Datums-Labels */} -
- {dateLabel} -
- - {/* Ansicht wechseln */}
- - - - + + + +
- {/* Navigationsbuttons */}
- - + +
- +
- {/* DropDowns für Woche und Jahr */} -
- - +
+
diff --git a/src/components/react-big-calendar.css b/src/components/react-big-calendar.css new file mode 100644 index 0000000..305dce0 --- /dev/null +++ b/src/components/react-big-calendar.css @@ -0,0 +1,904 @@ +@charset "UTF-8"; +.rbc-btn { + color: inherit; + font: inherit; + margin: 0; +} + +button.rbc-btn { + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + cursor: pointer; +} + +button[disabled].rbc-btn { + cursor: not-allowed; +} + +button.rbc-input::-moz-focus-inner { + border: 0; + padding: 0; +} + +.rbc-calendar { + -webkit-box-sizing: border-box; + box-sizing: border-box; + height: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; +} + +.rbc-m-b-negative-3 { + margin-bottom: -3px; +} + +.rbc-h-full { + height: 100%; +} + +.rbc-calendar *, +.rbc-calendar *:before, +.rbc-calendar *:after { + -webkit-box-sizing: inherit; + box-sizing: inherit; +} + +.rbc-abs-full, .rbc-row-bg { + overflow: hidden; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.rbc-ellipsis, .rbc-show-more, .rbc-row-segment .rbc-event-content, .rbc-event-label { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.rbc-rtl { + direction: rtl; +} + +.rbc-off-range { + color: #999999; +} + +.rbc-off-range-bg { + background: #e6e6e6; +} + +.rbc-header { + overflow: hidden; + -webkit-box-flex: 1; + -ms-flex: 1 0 0%; + flex: 1 0 0%; + text-overflow: ellipsis; + white-space: nowrap; + padding: 0 3px; + text-align: center; + vertical-align: middle; + font-weight: bold; + font-size: 90%; + min-height: 0; + border-bottom: 1px solid #ddd; +} +.rbc-header + .rbc-header { + border-left: 1px solid #c6c6c6; /*#ddd*/ +} +.rbc-rtl .rbc-header + .rbc-header { + border-left-width: 0; + border-right: 1px solid #ddd; +} +.rbc-header > a, .rbc-header > a:active, .rbc-header > a:visited { + color: inherit; + text-decoration: none; +} + +.rbc-button-link { + color: inherit; + background: none; + margin: 0; + padding: 0; + border: none; + cursor: pointer; + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; +} + +.rbc-row-content { + position: relative; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-user-select: none; + z-index: 4; +} + +.rbc-row-content-scrollable { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + height: 100%; +} +.rbc-row-content-scrollable .rbc-row-content-scroll-container { + height: 100%; + overflow-y: scroll; + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + /* Hide scrollbar for Chrome, Safari and Opera */ +} +.rbc-row-content-scrollable .rbc-row-content-scroll-container::-webkit-scrollbar { + display: none; +} + +.rbc-today { + background-color: #5770ff; /*#eaf6ff*/ +} +/*Own changes 10*/ +.rbc-allday-cell .rbc-row-bg .rbc-day-bg.rbc-today { + background-color: transparent !important; + /*border: none !important;*/ +} +/*Own changes 10*/ + +/*Own changes 11*/ +.rbc-time-header-cell .rbc-header:first-child.rbc-today { + border-top-left-radius: 11px !important; +} + +.rbc-time-header-cell .rbc-header:last-child.rbc-today { + border-top-right-radius: 11px !important; +} +/*Own changes 11*/ + +.rbc-toolbar { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-bottom: 10px; + font-size: 16px; +} +.rbc-toolbar .rbc-toolbar-label { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + padding: 0 10px; + text-align: center; + + /*Own changes 01*/ + background-color: #717171; + color: #ffffff; + /*Own changes 01*/ +} +.rbc-toolbar button { + color: #373a3c; + display: inline-block; + margin: 0; + text-align: center; + vertical-align: middle; + background: none; + background-image: none; + border: 1px solid #ccc; + padding: 0.375rem 1rem; + border-radius: 4px; + line-height: normal; + white-space: nowrap; +} +.rbc-toolbar button:active, .rbc-toolbar button.rbc-active { + background-image: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + background-color: #e6e6e6; + border-color: #adadad; +} +.rbc-toolbar button:active:hover, .rbc-toolbar button:active:focus, .rbc-toolbar button.rbc-active:hover, .rbc-toolbar button.rbc-active:focus { + color: #373a3c; + background-color: #d4d4d4; + border-color: #8c8c8c; +} +.rbc-toolbar button:focus { + color: #373a3c; + background-color: #e6e6e6; + border-color: #adadad; +} +.rbc-toolbar button:hover { + color: #373a3c; + cursor: pointer; + background-color: #e6e6e6; + border-color: #adadad; +} + +.rbc-btn-group { + display: inline-block; + white-space: nowrap; +} +.rbc-btn-group > button:first-child:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + + /*Own changes 02*/ + background-color: #c6c6c6; + color: #000000; + /*Own changes 02*/ +} +.rbc-btn-group > button:last-child:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + + /*Own changes 03*/ + background-color: #c6c6c6; + color: #000000; + /*Own changes 03*/ +} +.rbc-rtl .rbc-btn-group > button:first-child:not(:last-child) { + border-radius: 4px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.rbc-rtl .rbc-btn-group > button:last-child:not(:first-child) { + border-radius: 4px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.rbc-btn-group > button:not(:first-child):not(:last-child) { + border-radius: 0; + + /*Own changes 04*/ + background-color: #c6c6c6; + color: #000000; + /*Own changes 04*/ +} +.rbc-btn-group button + button { + margin-left: -1px; +} +.rbc-rtl .rbc-btn-group button + button { + margin-left: 0; + margin-right: -1px; +} +.rbc-btn-group + .rbc-btn-group, .rbc-btn-group + button { + margin-left: 10px; +} + +@media (max-width: 767px) { + .rbc-toolbar { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + } +} +.rbc-event, .rbc-day-slot .rbc-background-event { + border: none; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-box-shadow: none; + box-shadow: none; + margin: 0; + padding: 2px 5px; + background-color: #3174ad; + border-radius: 5px; + color: #fff; + cursor: pointer; + width: 100%; + text-align: left; +} +.rbc-slot-selecting .rbc-event, .rbc-slot-selecting .rbc-day-slot .rbc-background-event, .rbc-day-slot .rbc-slot-selecting .rbc-background-event { + cursor: inherit; + pointer-events: none; +} +.rbc-event.rbc-selected, .rbc-day-slot .rbc-selected.rbc-background-event { + background-color: #265985; +} +.rbc-event:focus, .rbc-day-slot .rbc-background-event:focus { + outline: 5px auto #3b99fc; +} + +.rbc-event-label { + font-size: 80%; +} + +.rbc-event-overlaps { + -webkit-box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5); + box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5); +} + +.rbc-event-continues-prior { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.rbc-event-continues-after { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.rbc-event-continues-earlier { + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.rbc-event-continues-later { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.rbc-row { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; +} + +.rbc-row-segment { + padding: 0 1px 1px 1px; +} +.rbc-selected-cell { + background-color: rgba(0, 0, 0, 0.1); +} + +.rbc-show-more { + background-color: rgba(255, 255, 255, 0.3); + z-index: 4; + font-weight: bold; + font-size: 85%; + height: auto; + line-height: normal; + color: #3174ad; +} +.rbc-show-more:hover, .rbc-show-more:focus { + color: #265985; +} + +.rbc-month-view { + position: relative; + border: 1px solid #ddd; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-flex: 1; + -ms-flex: 1 0 0px; + flex: 1 0 0; + width: 100%; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-user-select: none; + height: 100%; +} + +.rbc-month-header { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; +} + +.rbc-month-row { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: relative; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-flex: 1; + -ms-flex: 1 0 0px; + flex: 1 0 0; + -ms-flex-preferred-size: 0px; + flex-basis: 0px; + overflow: hidden; + height: 100%; +} +.rbc-month-row + .rbc-month-row { + border-top: 1px solid #ddd; +} + +.rbc-date-cell { + -webkit-box-flex: 1; + -ms-flex: 1 1 0px; + flex: 1 1 0; + min-width: 0; + padding-right: 5px; + text-align: right; +} +.rbc-date-cell.rbc-now { + font-weight: bold; +} +.rbc-date-cell > a, .rbc-date-cell > a:active, .rbc-date-cell > a:visited { + color: inherit; + text-decoration: none; +} + +.rbc-row-bg { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-flex: 1; + -ms-flex: 1 0 0px; + flex: 1 0 0; + overflow: hidden; + right: 1px; +} + +.rbc-day-bg { + -webkit-box-flex: 1; + -ms-flex: 1 0 0%; + flex: 1 0 0%; +} +.rbc-day-bg + .rbc-day-bg { + border-left: 1px solid #ddd; +} +.rbc-rtl .rbc-day-bg + .rbc-day-bg { + border-left-width: 0; + border-right: 1px solid #ddd; +} + +.rbc-overlay { + position: absolute; + z-index: 5; + border: 1px solid #e5e5e5; + background-color: #fff; + -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25); + padding: 10px; +} +.rbc-overlay > * + * { + margin-top: 1px; +} + +.rbc-overlay-header { + border-bottom: 1px solid #e5e5e5; + margin: -10px -10px 5px -10px; + padding: 2px 10px; +} + +.rbc-agenda-view { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-flex: 1; + -ms-flex: 1 0 0px; + flex: 1 0 0; + overflow: auto; +} +.rbc-agenda-view table.rbc-agenda-table { + width: 100%; + border: 1px solid #ddd; + border-spacing: 0; + border-collapse: collapse; +} +.rbc-agenda-view table.rbc-agenda-table tbody > tr > td { + padding: 5px 10px; + vertical-align: top; +} +.rbc-agenda-view table.rbc-agenda-table .rbc-agenda-time-cell { + padding-left: 15px; + padding-right: 15px; + text-transform: lowercase; +} +.rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td { + border-left: 1px solid #ddd; +} +.rbc-rtl .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td { + border-left-width: 0; + border-right: 1px solid #ddd; +} +.rbc-agenda-view table.rbc-agenda-table tbody > tr + tr { + border-top: 1px solid #ddd; +} +.rbc-agenda-view table.rbc-agenda-table thead > tr > th { + padding: 3px 5px; + text-align: left; + border-bottom: 1px solid #ddd; +} +.rbc-rtl .rbc-agenda-view table.rbc-agenda-table thead > tr > th { + text-align: right; +} + +.rbc-agenda-time-cell { + text-transform: lowercase; +} +.rbc-agenda-time-cell .rbc-continues-after:after { + content: " »"; +} +.rbc-agenda-time-cell .rbc-continues-prior:before { + content: "« "; +} + +.rbc-agenda-date-cell, +.rbc-agenda-time-cell { + white-space: nowrap; +} + +.rbc-agenda-event-cell { + width: 100%; +} + +.rbc-time-column { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + min-height: 100%; + + /*Own changes 06*/ + background-color: #383838; + /*Own changes 06*/ +} +.rbc-time-column .rbc-timeslot-group { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.rbc-timeslot-group { + border-bottom: 1px solid #8d8d8d; /*#ddd*/ + min-height: 40px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; +} + +.rbc-time-gutter, +.rbc-header-gutter { + -webkit-box-flex: 0; + -ms-flex: none; + flex: none; + + /*Own changes 07*/ + background-color: #8d8d8d; + /*Own changes 07*/ +} + +.rbc-label { + padding: 0 5px; +} + +.rbc-day-slot { + position: relative; +} +.rbc-day-slot .rbc-events-container { + bottom: 0; + left: 0; + position: absolute; + right: 0; + margin-right: 10px; + top: 0; +} +.rbc-day-slot .rbc-events-container.rbc-rtl { + left: 10px; + right: 0; +} +.rbc-day-slot .rbc-event, .rbc-day-slot .rbc-background-event { + border: 1px solid #265985; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + max-height: 100%; + min-height: 20px; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column wrap; + flex-flow: column wrap; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + overflow: hidden; + position: absolute; +} +.rbc-day-slot .rbc-background-event { + opacity: 0.75; +} +.rbc-day-slot .rbc-event-label { + -webkit-box-flex: 0; + -ms-flex: none; + flex: none; + padding-right: 5px; + width: auto; +} +.rbc-day-slot .rbc-event-content { + width: 100%; + -webkit-box-flex: 1; + -ms-flex: 1 1 0px; + flex: 1 1 0; + word-wrap: break-word; + line-height: 1; + height: 100%; + min-height: 1em; +} +.rbc-day-slot .rbc-time-slot { + border-top: 1px solid #383838; /*#f7f7f7*/ +} + +.rbc-time-view-resources .rbc-time-gutter, +.rbc-time-view-resources .rbc-time-header-gutter { + position: sticky; + left: 0; + background-color: white; + border-right: 1px solid #ddd; + z-index: 10; + margin-right: -1px; +} +.rbc-time-view-resources .rbc-time-header { + overflow: hidden; +} +.rbc-time-view-resources .rbc-time-header-content { + min-width: auto; + -webkit-box-flex: 1; + -ms-flex: 1 0 0px; + flex: 1 0 0; + -ms-flex-preferred-size: 0px; + flex-basis: 0px; +} +.rbc-time-view-resources .rbc-time-header-cell-single-day { + display: none; +} +.rbc-time-view-resources .rbc-day-slot { + min-width: 140px; +} +.rbc-time-view-resources .rbc-header, +.rbc-time-view-resources .rbc-day-bg { + width: 140px; + -webkit-box-flex: 1; + -ms-flex: 1 1 0px; + flex: 1 1 0; + -ms-flex-preferred-size: 0 px; + flex-basis: 0 px; +} + +.rbc-time-header-content + .rbc-time-header-content { + margin-left: -1px; +} + +.rbc-time-slot { + -webkit-box-flex: 1; + -ms-flex: 1 0 0px; + flex: 1 0 0; +} +.rbc-time-slot.rbc-now { + font-weight: bold; +} + +.rbc-day-header { + text-align: center; +} + +.rbc-slot-selection { + z-index: 10; + position: absolute; + background-color: rgba(0, 0, 0, 0.5); + color: white; + font-size: 75%; + width: 100%; + padding: 3px; +} + +.rbc-slot-selecting { + cursor: move; +} + +.rbc-time-view { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + width: 100%; + border: 1px solid #ddd; + min-height: 0; +} +.rbc-time-view .rbc-time-gutter { + white-space: nowrap; + text-align: right; +} +.rbc-time-view .rbc-allday-cell { + -webkit-box-sizing: content-box; + box-sizing: content-box; + width: 100%; + height: 100%; + position: relative; + + /*Own changes 05*/ + background-color: #555555; + /*Own changes 05*/ +} +.rbc-time-view .rbc-allday-cell + .rbc-allday-cell { + border-left: 1px solid #ddd; +} +.rbc-time-view .rbc-allday-events { + position: relative; + z-index: 4; +} +.rbc-time-view .rbc-row { + -webkit-box-sizing: border-box; + box-sizing: border-box; + min-height: 20px; +} + +.rbc-time-header { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; +} +.rbc-time-header.rbc-overflowing { + border-right: 1px solid #ddd; +} +.rbc-rtl .rbc-time-header.rbc-overflowing { + border-right-width: 0; + border-left: 1px solid #ddd; +} +.rbc-time-header > .rbc-row:first-child { + border-bottom: 1px solid #ddd; +} +.rbc-time-header > .rbc-row.rbc-row-resource { + border-bottom: 1px solid #ddd; +} + +.rbc-time-header-cell-single-day { + display: none; +} + +.rbc-time-header-content { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + min-width: 0; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + border-left: 1px solid #ddd; + + /*Own changes 08*/ + background-color: #c6c6c6; + color: #000000; + border-top-left-radius: 11px; + border-top-right-radius: 11px; + /*Own changes 08*/ +} +.rbc-rtl .rbc-time-header-content { + border-left-width: 0; + border-right: 1px solid #ddd; +} +.rbc-time-header-content > .rbc-row.rbc-row-resource { + border-bottom: 1px solid #ddd; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.rbc-time-content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -ms-flex: 1 0 0%; + flex: 1 0 0%; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + width: 100%; + border-top: 2px solid #717171; /*#ddd*/ + overflow-y: auto; + position: relative; +} +.rbc-time-content > .rbc-time-gutter { + -webkit-box-flex: 0; + -ms-flex: none; + flex: none; + + /*Own changes 09*/ + border-top-left-radius: 11px; + border-bottom-left-radius: 11px; + /*Own changes 09*/ +} +.rbc-time-content > * + * > * { + border-left: 1px solid #c6c6c6; /*#ddd*/ +} +.rbc-rtl .rbc-time-content > * + * > * { + border-left-width: 0; + border-right: 1px solid #ddd; +} +.rbc-time-content > .rbc-day-slot { + width: 100%; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-user-select: none; +} + +.rbc-current-time-indicator { + position: absolute; + z-index: 3; + left: 0; + right: 0; + height: 1px; + background-color: #74ad31; + pointer-events: none; +} + +.rbc-resource-grouping.rbc-time-header-content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} +.rbc-resource-grouping .rbc-row .rbc-header { + width: 141px; +} + +/*# sourceMappingURL=react-big-calendar.css.map */ \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 7ce9778..03f45f1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -206,7 +206,7 @@ __metadata: languageName: node linkType: hard -"@floating-ui/react-dom@npm:^2.0.0": +"@floating-ui/react-dom@npm:^2.0.0, @floating-ui/react-dom@npm:^2.1.3": version: 2.1.3 resolution: "@floating-ui/react-dom@npm:2.1.3" dependencies: @@ -218,6 +218,20 @@ __metadata: languageName: node linkType: hard +"@floating-ui/react@npm:^0.27.3": + version: 0.27.12 + resolution: "@floating-ui/react@npm:0.27.12" + dependencies: + "@floating-ui/react-dom": "npm:^2.1.3" + "@floating-ui/utils": "npm:^0.2.9" + tabbable: "npm:^6.0.0" + peerDependencies: + react: ">=17.0.0" + react-dom: ">=17.0.0" + checksum: 10c0/da453965074bd4ded8e3de97ceb2c0833df8df2ecd9eff5ae4d336413443ea5abde5c9e37b092956901b97e7b47f9138d51d4896fa82da68e77eb0090289bf64 + languageName: node + linkType: hard + "@floating-ui/utils@npm:^0.2.9": version: 0.2.9 resolution: "@floating-ui/utils@npm:0.2.9" @@ -4073,6 +4087,7 @@ __metadata: prisma: "npm:6.9.0" react: "npm:^19.1.0" react-big-calendar: "npm:^1.18.0" + react-datepicker: "npm:^8.4.0" react-dom: "npm:^19.0.0" react-hook-form: "npm:^7.56.4" tailwind-merge: "npm:^3.2.0" @@ -4611,6 +4626,20 @@ __metadata: languageName: node linkType: hard +"react-datepicker@npm:^8.4.0": + version: 8.4.0 + resolution: "react-datepicker@npm:8.4.0" + dependencies: + "@floating-ui/react": "npm:^0.27.3" + clsx: "npm:^2.1.1" + date-fns: "npm:^4.1.0" + peerDependencies: + react: ^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc + react-dom: ^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc + checksum: 10c0/e96ba4f2b54476f66bfa33aa0c21729095c83d293671b07a9ddd96ab48dad85b6530acc5ca016e83ef8907feeebfefb7133bf7a02dc550175c48c5d9f66d70ac + languageName: node + linkType: hard + "react-dom@npm:^19.0.0": version: 19.1.0 resolution: "react-dom@npm:19.1.0" @@ -5235,6 +5264,13 @@ __metadata: languageName: node linkType: hard +"tabbable@npm:^6.0.0": + version: 6.2.0 + resolution: "tabbable@npm:6.2.0" + checksum: 10c0/ced8b38f05f2de62cd46836d77c2646c42b8c9713f5bd265daf0e78ff5ac73d3ba48a7ca45f348bafeef29b23da7187c72250742d37627883ef89cbd7fa76898 + languageName: node + linkType: hard + "tailwind-merge@npm:^3.2.0": version: 3.3.1 resolution: "tailwind-merge@npm:3.3.1" From f954d0dbc0515497942e1873301ca6507528cd3b Mon Sep 17 00:00:00 2001 From: Dominik Stahl Date: Mon, 16 Jun 2025 19:44:09 +0200 Subject: [PATCH 6/6] style: format code --- src/app/home/page.tsx | 4 +- src/components/calendar.tsx | 15 +- src/components/custom-toolbar.css | 4 +- src/components/custom-toolbar.tsx | 43 ++-- src/components/react-big-calendar.css | 273 ++++++++++++++------------ 5 files changed, 190 insertions(+), 149 deletions(-) diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx index 0b7515a..68e51bf 100644 --- a/src/app/home/page.tsx +++ b/src/app/home/page.tsx @@ -1,3 +1,5 @@ import Calendar from '@/components/calendar'; -export default function home () {return } \ No newline at end of file +export default function home() { + return ; +} diff --git a/src/components/calendar.tsx b/src/components/calendar.tsx index defedab..6e10dab 100644 --- a/src/components/calendar.tsx +++ b/src/components/calendar.tsx @@ -1,4 +1,4 @@ -"use client"; +'use client'; import { Calendar, momentLocalizer } from 'react-big-calendar'; import moment from 'moment'; @@ -13,26 +13,25 @@ moment.updateLocale('en', { }, }); -const localizer = momentLocalizer(moment) +const localizer = momentLocalizer(moment); const MyCalendar = (props) => (
-) +); export default MyCalendar; diff --git a/src/components/custom-toolbar.css b/src/components/custom-toolbar.css index e16a8e4..55e9b77 100644 --- a/src/components/custom-toolbar.css +++ b/src/components/custom-toolbar.css @@ -75,11 +75,11 @@ } .custom-toolbar .navigation-controls button:hover { - background-color: #1976D2; + background-color: #1976d2; } .custom-toolbar .navigation-controls button:active { - background-color: #1565C0; + background-color: #1565c0; } /* Dropdown-Bereich für Woche und Jahr */ diff --git a/src/components/custom-toolbar.tsx b/src/components/custom-toolbar.tsx index 5f9a2cf..bcbb9f9 100644 --- a/src/components/custom-toolbar.tsx +++ b/src/components/custom-toolbar.tsx @@ -16,15 +16,21 @@ interface CustomToolbarProps { onView: (newView: 'month' | 'week' | 'day' | 'agenda') => void; } -const CustomToolbar: React.FC = ({ date, view, onNavigate, onView }) => { - +const CustomToolbar: React.FC = ({ + date, + view, + onNavigate, + onView, +}) => { //ISO-Wochennummer eines Datums ermitteln const getISOWeek = (date: Date): number => { const tmp = new Date(date.getTime()); //Datum so verschieben, dass der nächste Donnerstag erreicht wird (ISO: Woche beginnt am Montag) tmp.setDate(tmp.getDate() + 4 - (tmp.getDay() || 7)); const yearStart = new Date(tmp.getFullYear(), 0, 1); - const weekNo = Math.ceil((((tmp.getTime() - yearStart.getTime()) / 86400000) + 1) / 7); + const weekNo = Math.ceil( + ((tmp.getTime() - yearStart.getTime()) / 86400000 + 1) / 7, + ); return weekNo; }; @@ -60,7 +66,9 @@ const CustomToolbar: React.FC = ({ date, view, onNavigate, o //Lokaler State für Woche und ISO-Wochenjahr (statt des reinen Kalenderjahrs) const [selectedWeek, setSelectedWeek] = useState(getISOWeek(date)); - const [selectedYear, setSelectedYear] = useState(getISOWeekYear(date)); + const [selectedYear, setSelectedYear] = useState( + getISOWeekYear(date), + ); //Auswahl aktualisieren, wenn sich die Prop "date" ändert useEffect(() => { @@ -73,7 +81,10 @@ const CustomToolbar: React.FC = ({ date, view, onNavigate, o const weekOptions = Array.from({ length: totalWeeks }, (_, i) => i + 1); //Jahresliste - const yearOptions = Array.from({ length: 21 }, (_, i) => selectedYear - 10 + i); + const yearOptions = Array.from( + { length: 21 }, + (_, i) => selectedYear - 10 + i, + ); //Start (Montag) und Ende (Sonntag) der aktuell angezeigten Woche berechnen const weekStartDate = getDateOfISOWeek(selectedWeek, selectedYear); @@ -175,11 +186,13 @@ const CustomToolbar: React.FC = ({ date, view, onNavigate, o } }; - return ( -
+
-
+
-
-
-
+
+
+
-
+