feat: Calendar Update
This commit is contained in:
parent
c31c4b10f1
commit
c75d73b531
3 changed files with 460 additions and 352 deletions
|
@ -38,7 +38,7 @@
|
||||||
"next-auth": "^5.0.0-beta.25",
|
"next-auth": "^5.0.0-beta.25",
|
||||||
"next-themes": "^0.4.6",
|
"next-themes": "^0.4.6",
|
||||||
"react": "^19.1.0",
|
"react": "^19.1.0",
|
||||||
"react-calendar": "^5.1.0",
|
"react-big-calendar": "^1.18.0",
|
||||||
"react-dom": "^19.0.0",
|
"react-dom": "^19.0.0",
|
||||||
"tailwind-merge": "^3.2.0"
|
"tailwind-merge": "^3.2.0"
|
||||||
},
|
},
|
||||||
|
@ -47,6 +47,7 @@
|
||||||
"@tailwindcss/postcss": "4.1.8",
|
"@tailwindcss/postcss": "4.1.8",
|
||||||
"@types/node": "22.15.29",
|
"@types/node": "22.15.29",
|
||||||
"@types/react": "19.1.6",
|
"@types/react": "19.1.6",
|
||||||
|
"@types/react-big-calendar": "^1",
|
||||||
"@types/react-dom": "19.1.6",
|
"@types/react-dom": "19.1.6",
|
||||||
"dotenv-cli": "8.0.0",
|
"dotenv-cli": "8.0.0",
|
||||||
"eslint": "9.28.0",
|
"eslint": "9.28.0",
|
||||||
|
|
|
@ -1,114 +1,31 @@
|
||||||
import React from 'react';
|
"use client";
|
||||||
|
|
||||||
const Calendar: React.FC = () => {
|
import { Calendar, momentLocalizer } from 'react-big-calendar';
|
||||||
const today = new Date();
|
import moment from 'moment';
|
||||||
const currentYear = today.getFullYear();
|
import 'react-big-calendar/lib/css/react-big-calendar.css';
|
||||||
const currentMonth = today.getMonth();
|
import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';
|
||||||
const currentDate = today.getDate();
|
|
||||||
|
|
||||||
const firstDayMonth = new Date(currentYear, currentMonth, 1);
|
moment.updateLocale('en', {
|
||||||
const lastDayMonth = new Date(currentYear, currentMonth + 1, 0);
|
week: {
|
||||||
const startDay = (firstDayMonth.getDay() + 6) % 7;
|
dow: 1,
|
||||||
const daysMonth = lastDayMonth.getDate();
|
doy: 4,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
const weeks: (number | null)[][] = [];
|
const localizer = momentLocalizer(moment)
|
||||||
let currentDay = 1;
|
|
||||||
|
|
||||||
const firstWeek: (number | null)[] = [];
|
const MyCalendar = (props) => (
|
||||||
for (let i = 0; i < 7; i++) {
|
<div>
|
||||||
if (i < startDay) {
|
<Calendar
|
||||||
firstWeek.push(null);
|
localizer={localizer}
|
||||||
} else {
|
//events={myEventsList}
|
||||||
firstWeek.push(currentDay);
|
startAccessor="start"
|
||||||
currentDay++;
|
endAccessor="end"
|
||||||
}
|
style={{ height: 500 }}
|
||||||
}
|
culture="de-DE"
|
||||||
weeks.push(firstWeek);
|
defaultView='week'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
while (currentDay <= daysMonth) {
|
export default MyCalendar;
|
||||||
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 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;
|
|
Loading…
Add table
Add a link
Reference in a new issue