feat: Calendar Update

This commit is contained in:
Semir 2025-05-23 15:23:01 +02:00
parent c31c4b10f1
commit c75d73b531
3 changed files with 460 additions and 352 deletions

View file

@ -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",

View file

@ -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;

674
yarn.lock

File diff suppressed because it is too large Load diff