TurTaskProject/TurTaskWeb
1
0
Fork 0
mirror of https://github.com/TurTaskProject/TurTaskWeb.git synced 2025-12-19 14:04:07 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Calander component and branch

Browse Source
This commit is contained in:
Wissarut Kanasub 2023-11-06 11:08:44 +07:00
parent e123751f35
commit 074aeb70bc
3 changed files with 91 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/package.json
View File

@ -12,6 +12,10 @@
"dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@fullcalendar/daygrid": "^6.1.9",
"@fullcalendar/interaction": "^6.1.9",
"@fullcalendar/react": "^6.1.9",
"@fullcalendar/timegrid": "^6.1.9",
"@mui/icons-material": "^5.14.15",
"@mui/material": "^5.14.15",
"@mui/system": "^5.14.15",

59
frontend/pnpm-lock.yaml
View File

@ -11,6 +11,18 @@ dependencies:
'@emotion/styled':
specifier: ^11.11.0
version: 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.33)(react@18.2.0)
'@fullcalendar/daygrid':
specifier: ^6.1.9
version: 6.1.9(@fullcalendar/core@6.1.9)
'@fullcalendar/interaction':
specifier: ^6.1.9
version: 6.1.9(@fullcalendar/core@6.1.9)
'@fullcalendar/react':
specifier: ^6.1.9
version: 6.1.9(@fullcalendar/core@6.1.9)(react-dom@18.2.0)(react@18.2.0)
'@fullcalendar/timegrid':
specifier: ^6.1.9
version: 6.1.9(@fullcalendar/core@6.1.9)
'@mui/icons-material':
specifier: ^5.14.15
version: 5.14.15(@mui/material@5.14.15)(@types/react@18.2.33)(react@18.2.0)
@ -728,6 +740,49 @@ packages:
resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==}
dev: false
/@fullcalendar/core@6.1.9:
resolution: {integrity: sha512-eeG+z9BWerdsU9Ac6j16rpYpPnE0wxtnEHiHrh/u/ADbGTR3hCOjCD9PxQOfhOTHbWOVs7JQunGcksSPu5WZBQ==}
dependencies:
preact: 10.12.1
dev: false
/@fullcalendar/daygrid@6.1.9(@fullcalendar/core@6.1.9):
resolution: {integrity: sha512-o/6joH/7lmVHXAkbaa/tUbzWYnGp/LgfdiFyYPkqQbjKEeivNZWF1WhHqFbhx0zbFONSHtrvkjY2bjr+Ef2quQ==}
peerDependencies:
'@fullcalendar/core': ~6.1.9
dependencies:
'@fullcalendar/core': 6.1.9
dev: false
/@fullcalendar/interaction@6.1.9(@fullcalendar/core@6.1.9):
resolution: {integrity: sha512-I3FGnv0kKZpIwujg3HllbKrciNjTqeTYy3oJG226oAn7lV6wnrrDYMmuGmA0jPJAGN46HKrQqKN7ItxQRDec4Q==}
peerDependencies:
'@fullcalendar/core': ~6.1.9
dependencies:
'@fullcalendar/core': 6.1.9
dev: false
/@fullcalendar/react@6.1.9(@fullcalendar/core@6.1.9)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-ioxu0V++pYz2u/N1LL1V8DkMyiKGRun0gMAll2tQz3Kzi3r9pTwncGKRb1zO8h0e+TrInU08ywk/l5lBwp7eog==}
peerDependencies:
'@fullcalendar/core': ~6.1.9
react: ^16.7.0 || ^17 || ^18
react-dom: ^16.7.0 || ^17 || ^18
dependencies:
'@fullcalendar/core': 6.1.9
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
dev: false
/@fullcalendar/timegrid@6.1.9(@fullcalendar/core@6.1.9):
resolution: {integrity: sha512-le7UV05wVE1Trdr054kgJXTwa+A1pEI8nlCBnPWdcyrL+dTLoPvQ4AWEVCnV7So+4zRYaCqnqGXfCJsj0RQa0g==}
peerDependencies:
'@fullcalendar/core': ~6.1.9
dependencies:
'@fullcalendar/core': 6.1.9
'@fullcalendar/daygrid': 6.1.9(@fullcalendar/core@6.1.9)
dev: false
/@humanwhocodes/config-array@0.11.13:
resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==}
engines: {node: '>=10.10.0'}
@ -2779,6 +2834,10 @@ packages:
source-map-js: 1.0.2
dev: true
/preact@10.12.1:
resolution: {integrity: sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==}
dev: false
/prelude-ls@1.2.1:
resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
engines: {node: '>= 0.8.0'}

28
frontend/src/components/calendar/calendar.jsx Normal file
View File

@ -0,0 +1,28 @@
import React from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
const Calendar = () => {
return (
<div className="App">
<FullCalendar
plugins={[dayGridPlugin, timeGridPlugin]}
initialView="dayGridMonth"
events={[
{ title: 'Event 1', date: '2023-11-10' },
{ title: 'Event 2', date: '2023-11-15' },
// Add more events as needed
]}
headerToolbar={{
start: 'prev,next',
center: "title",
end: 'timeGridDay,dayGridMonth,timeGridWeek,',
}}
/>
</div>
);
};
export default Calendar;