Refactor date handling in EventsPageSection: Update getFirstDayOfMonth function to correctly convert UTC day of the week for improved calendar display. Simplify month navigation logic by directly using UTC date methods, enhancing clarity and functionality in event date management.

This commit is contained in:
Julien Froidefond
2025-12-10 05:37:42 +01:00
parent 56de7d6b01
commit fb830c6fcc

View File

@@ -201,9 +201,13 @@ export default function EventsPageSection({
const getFirstDayOfMonth = (date: Date) => {
// Utiliser UTC pour correspondre au format des événements
// getUTCDay() retourne 0 (dimanche) à 6 (samedi)
// On convertit pour que lundi = 0, mardi = 1, ..., dimanche = 6
const year = date.getUTCFullYear();
const month = date.getUTCMonth();
return new Date(Date.UTC(year, month, 1)).getUTCDay();
const dayOfWeek = new Date(Date.UTC(year, month, 1)).getUTCDay();
// Convertir : dimanche (0) -> 6, lundi (1) -> 0, mardi (2) -> 1, etc.
return (dayOfWeek + 6) % 7;
};
const formatMonthYear = (date: Date) => {
@@ -238,12 +242,9 @@ export default function EventsPageSection({
<div className="flex items-center justify-between mb-3">
<button
onClick={() => {
setCurrentMonth(
new Date(
currentMonth.getFullYear(),
currentMonth.getMonth() - 1
)
);
const year = currentMonth.getUTCFullYear();
const month = currentMonth.getUTCMonth();
setCurrentMonth(new Date(Date.UTC(year, month - 1, 1)));
}}
className="px-2 py-1 border border-pixel-gold/50 text-pixel-gold hover:bg-pixel-gold/10 rounded transition text-sm"
>
@@ -254,12 +255,9 @@ export default function EventsPageSection({
</h3>
<button
onClick={() => {
setCurrentMonth(
new Date(
currentMonth.getFullYear(),
currentMonth.getMonth() + 1
)
);
const year = currentMonth.getUTCFullYear();
const month = currentMonth.getUTCMonth();
setCurrentMonth(new Date(Date.UTC(year, month + 1, 1)));
}}
className="px-2 py-1 border border-pixel-gold/50 text-pixel-gold hover:bg-pixel-gold/10 rounded transition text-sm"
>
@@ -269,7 +267,7 @@ export default function EventsPageSection({
{/* Jours de la semaine */}
<div className="grid grid-cols-7 gap-0.5 mb-1">
{["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"].map((day) => (
{["Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"].map((day) => (
<div
key={day}
className="text-center text-[10px] text-gray-400 font-semibold py-1"