feat: Basic Calendar without any functions
This commit is contained in:
parent
f240bf525d
commit
a3bfeb4e82
3 changed files with 220 additions and 50 deletions
|
@ -44,7 +44,8 @@
|
|||
"next": "15.4.0-canary.91",
|
||||
"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",
|
||||
"swagger-ui-react": "^5.24.1",
|
||||
|
|
|
@ -1,23 +1,114 @@
|
|||
'use client';
|
||||
import React from 'react';
|
||||
|
||||
import { RedirectButton } from '@/components/buttons/redirect-button';
|
||||
import { ThemePicker } from '@/components/misc/theme-picker';
|
||||
import { useGetApiUserMe } from '@/generated/api/user/user';
|
||||
const Calendar: React.FC = () => {
|
||||
const today = new Date();
|
||||
const currentYear = today.getFullYear();
|
||||
const currentMonth = today.getMonth();
|
||||
const currentDate = today.getDate();
|
||||
|
||||
export default function Home() {
|
||||
const { data, isLoading } = useGetApiUserMe();
|
||||
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'];
|
||||
|
||||
return (
|
||||
<div className='flex flex-col items-center justify-center h-screen'>
|
||||
<div className='absolute top-4 right-4'>{<ThemePicker />}</div>
|
||||
<div>
|
||||
<h1>
|
||||
Hello{' '}
|
||||
{isLoading ? 'Loading...' : data?.data.user?.name || 'Unknown User'}
|
||||
</h1>
|
||||
<RedirectButton redirectUrl='/logout' buttonText='Logout' />
|
||||
<RedirectButton redirectUrl='/settings' buttonText='Settings' />
|
||||
</div>
|
||||
<div style={{
|
||||
maxWidth: '1000px',
|
||||
margin: '0 auto',
|
||||
fontFamily: 'Arial, sans-serif'
|
||||
}}>
|
||||
<h1 style={{
|
||||
textAlign: 'center'
|
||||
}}>
|
||||
{new Date(currentYear, currentMonth).toLocaleString('en-EN', {
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</h1>
|
||||
<table style={{
|
||||
width: '100%',
|
||||
borderCollapse: 'collapse'
|
||||
}} border={1}>
|
||||
<thead>
|
||||
<tr>
|
||||
{weekdays.map((day, index) => (
|
||||
<th
|
||||
key={index}
|
||||
style={{
|
||||
padding: '10px',
|
||||
backgroundColor: '#f0f0f0',
|
||||
border: '1px solid #ddd'
|
||||
}}>
|
||||
{day}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{weeks.map((week, weekIndex) => (
|
||||
<tr key={weekIndex}>
|
||||
{week.map((day, dayIndex) => (
|
||||
<td
|
||||
key={dayIndex}
|
||||
style={{
|
||||
border: '1px solid #ddd',
|
||||
position: 'relative',
|
||||
minWidth: '120px',
|
||||
minHeight: '100px',
|
||||
padding: '50px',
|
||||
verticalAlign: 'top',
|
||||
backgroundColor: day === currentDate ? '#add8e6' : 'transparent'
|
||||
}}
|
||||
>
|
||||
{day && (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '5px',
|
||||
left: '5px',
|
||||
fontWeight: 'bold'
|
||||
}}
|
||||
>
|
||||
{day}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default Calendar;
|
142
yarn.lock
142
yarn.lock
|
@ -543,15 +543,15 @@ __metadata:
|
|||
linkType: hard
|
||||
|
||||
"@gerrit0/mini-shiki@npm:^3.2.2":
|
||||
version: 3.6.0
|
||||
resolution: "@gerrit0/mini-shiki@npm:3.6.0"
|
||||
version: 3.7.0
|
||||
resolution: "@gerrit0/mini-shiki@npm:3.7.0"
|
||||
dependencies:
|
||||
"@shikijs/engine-oniguruma": "npm:^3.6.0"
|
||||
"@shikijs/langs": "npm:^3.6.0"
|
||||
"@shikijs/themes": "npm:^3.6.0"
|
||||
"@shikijs/types": "npm:^3.6.0"
|
||||
"@shikijs/engine-oniguruma": "npm:^3.7.0"
|
||||
"@shikijs/langs": "npm:^3.7.0"
|
||||
"@shikijs/themes": "npm:^3.7.0"
|
||||
"@shikijs/types": "npm:^3.7.0"
|
||||
"@shikijs/vscode-textmate": "npm:^10.0.2"
|
||||
checksum: 10c0/347456c9da8a1fadd3c1f63097da459a5f930ef4bca6431cce913a379012c551e061d0a94ff7a0f307215b87f2418b7c198a55fba888fc97fb02ab36247adf6b
|
||||
checksum: 10c0/eb3f4900d841338077d839ebbc7f8722b13876a586cff7abc73295e956683724dd3371a9f990900184a2d069461965951b2604d677991badf3474262e7811384
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
|
@ -1966,7 +1966,7 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@shikijs/engine-oniguruma@npm:^3.6.0":
|
||||
"@shikijs/engine-oniguruma@npm:^3.7.0":
|
||||
version: 3.7.0
|
||||
resolution: "@shikijs/engine-oniguruma@npm:3.7.0"
|
||||
dependencies:
|
||||
|
@ -1976,7 +1976,7 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@shikijs/langs@npm:^3.6.0":
|
||||
"@shikijs/langs@npm:^3.7.0":
|
||||
version: 3.7.0
|
||||
resolution: "@shikijs/langs@npm:3.7.0"
|
||||
dependencies:
|
||||
|
@ -1985,7 +1985,7 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@shikijs/themes@npm:^3.6.0":
|
||||
"@shikijs/themes@npm:^3.7.0":
|
||||
version: 3.7.0
|
||||
resolution: "@shikijs/themes@npm:3.7.0"
|
||||
dependencies:
|
||||
|
@ -1994,7 +1994,7 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@shikijs/types@npm:3.7.0, @shikijs/types@npm:^3.6.0":
|
||||
"@shikijs/types@npm:3.7.0, @shikijs/types@npm:^3.7.0":
|
||||
version: 3.7.0
|
||||
resolution: "@shikijs/types@npm:3.7.0"
|
||||
dependencies:
|
||||
|
@ -3460,6 +3460,13 @@ __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
|
||||
|
||||
"abbrev@npm:^3.0.0":
|
||||
version: 3.0.1
|
||||
resolution: "abbrev@npm:3.0.1"
|
||||
|
@ -3662,7 +3669,7 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"array-includes@npm:^3.1.6, array-includes@npm:^3.1.8":
|
||||
"array-includes@npm:^3.1.6, array-includes@npm:^3.1.8, array-includes@npm:^3.1.9":
|
||||
version: 3.1.9
|
||||
resolution: "array-includes@npm:3.1.9"
|
||||
dependencies:
|
||||
|
@ -3699,7 +3706,7 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"array.prototype.findlastindex@npm:^1.2.5":
|
||||
"array.prototype.findlastindex@npm:^1.2.6":
|
||||
version: 1.2.6
|
||||
resolution: "array.prototype.findlastindex@npm:1.2.6"
|
||||
dependencies:
|
||||
|
@ -3714,7 +3721,7 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"array.prototype.flat@npm:^1.3.1, array.prototype.flat@npm:^1.3.2":
|
||||
"array.prototype.flat@npm:^1.3.1, array.prototype.flat@npm:^1.3.3":
|
||||
version: 1.3.3
|
||||
resolution: "array.prototype.flat@npm:1.3.3"
|
||||
dependencies:
|
||||
|
@ -4051,7 +4058,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
|
||||
|
@ -4792,7 +4799,7 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"eslint-module-utils@npm:^2.12.0":
|
||||
"eslint-module-utils@npm:^2.12.1":
|
||||
version: 2.12.1
|
||||
resolution: "eslint-module-utils@npm:2.12.1"
|
||||
dependencies:
|
||||
|
@ -4805,31 +4812,31 @@ __metadata:
|
|||
linkType: hard
|
||||
|
||||
"eslint-plugin-import@npm:^2.31.0":
|
||||
version: 2.31.0
|
||||
resolution: "eslint-plugin-import@npm:2.31.0"
|
||||
version: 2.32.0
|
||||
resolution: "eslint-plugin-import@npm:2.32.0"
|
||||
dependencies:
|
||||
"@rtsao/scc": "npm:^1.1.0"
|
||||
array-includes: "npm:^3.1.8"
|
||||
array.prototype.findlastindex: "npm:^1.2.5"
|
||||
array.prototype.flat: "npm:^1.3.2"
|
||||
array.prototype.flatmap: "npm:^1.3.2"
|
||||
array-includes: "npm:^3.1.9"
|
||||
array.prototype.findlastindex: "npm:^1.2.6"
|
||||
array.prototype.flat: "npm:^1.3.3"
|
||||
array.prototype.flatmap: "npm:^1.3.3"
|
||||
debug: "npm:^3.2.7"
|
||||
doctrine: "npm:^2.1.0"
|
||||
eslint-import-resolver-node: "npm:^0.3.9"
|
||||
eslint-module-utils: "npm:^2.12.0"
|
||||
eslint-module-utils: "npm:^2.12.1"
|
||||
hasown: "npm:^2.0.2"
|
||||
is-core-module: "npm:^2.15.1"
|
||||
is-core-module: "npm:^2.16.1"
|
||||
is-glob: "npm:^4.0.3"
|
||||
minimatch: "npm:^3.1.2"
|
||||
object.fromentries: "npm:^2.0.8"
|
||||
object.groupby: "npm:^1.0.3"
|
||||
object.values: "npm:^1.2.0"
|
||||
object.values: "npm:^1.2.1"
|
||||
semver: "npm:^6.3.1"
|
||||
string.prototype.trimend: "npm:^1.0.8"
|
||||
string.prototype.trimend: "npm:^1.0.9"
|
||||
tsconfig-paths: "npm:^3.15.0"
|
||||
peerDependencies:
|
||||
eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
|
||||
checksum: 10c0/e21d116ddd1900e091ad120b3eb68c5dd5437fe2c930f1211781cd38b246f090a6b74d5f3800b8255a0ed29782591521ad44eb21c5534960a8f1fb4040fd913a
|
||||
checksum: 10c0/bfb1b8fc8800398e62ddfefbf3638d185286edfed26dfe00875cc2846d954491b4f5112457831588b757fa789384e1ae585f812614c4797f0499fa234fd4a48b
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
|
@ -5359,6 +5366,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"
|
||||
|
@ -5758,7 +5774,7 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"is-core-module@npm:^2.13.0, is-core-module@npm:^2.15.1, is-core-module@npm:^2.16.0":
|
||||
"is-core-module@npm:^2.13.0, is-core-module@npm:^2.16.0, is-core-module@npm:^2.16.1":
|
||||
version: 2.16.1
|
||||
resolution: "is-core-module@npm:2.16.1"
|
||||
dependencies:
|
||||
|
@ -6505,6 +6521,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
|
||||
|
||||
"markdown-it@npm:^14.1.0":
|
||||
version: 14.1.0
|
||||
resolution: "markdown-it@npm:14.1.0"
|
||||
|
@ -6580,7 +6605,8 @@ __metadata:
|
|||
postcss: "npm:8.5.6"
|
||||
prettier: "npm:3.5.3"
|
||||
prisma: "npm:6.10.1"
|
||||
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"
|
||||
swagger-ui-react: "npm:^5.24.1"
|
||||
|
@ -6594,6 +6620,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
|
||||
|
||||
"merge-stream@npm:^2.0.0":
|
||||
version: 2.0.0
|
||||
resolution: "merge-stream@npm:2.0.0"
|
||||
|
@ -6641,6 +6677,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
|
||||
|
||||
"minim@npm:~0.23.8":
|
||||
version: 0.23.8
|
||||
resolution: "minim@npm:0.23.8"
|
||||
|
@ -7185,7 +7228,7 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"object.values@npm:^1.1.6, object.values@npm:^1.2.0, object.values@npm:^1.2.1":
|
||||
"object.values@npm:^1.1.6, object.values@npm:^1.2.1":
|
||||
version: 1.2.1
|
||||
resolution: "object.values@npm:1.2.1"
|
||||
dependencies:
|
||||
|
@ -7303,6 +7346,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"
|
||||
|
@ -7630,6 +7680,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-copy-to-clipboard@npm:5.1.0":
|
||||
version: 5.1.0
|
||||
resolution: "react-copy-to-clipboard@npm:5.1.0"
|
||||
|
@ -7798,7 +7867,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
|
||||
|
@ -8569,7 +8638,7 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"string.prototype.trimend@npm:^1.0.8, string.prototype.trimend@npm:^1.0.9":
|
||||
"string.prototype.trimend@npm:^1.0.9":
|
||||
version: 1.0.9
|
||||
resolution: "string.prototype.trimend@npm:1.0.9"
|
||||
dependencies:
|
||||
|
@ -9324,6 +9393,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
|
||||
|
||||
"web-streams-polyfill@npm:^3.0.3":
|
||||
version: 3.3.3
|
||||
resolution: "web-streams-polyfill@npm:3.3.3"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue