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) => { const getFirstDayOfMonth = (date: Date) => {
// Utiliser UTC pour correspondre au format des événements // 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 year = date.getUTCFullYear();
const month = date.getUTCMonth(); 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) => { const formatMonthYear = (date: Date) => {
@@ -238,12 +242,9 @@ export default function EventsPageSection({
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<button <button
onClick={() => { onClick={() => {
setCurrentMonth( const year = currentMonth.getUTCFullYear();
new Date( const month = currentMonth.getUTCMonth();
currentMonth.getFullYear(), setCurrentMonth(new Date(Date.UTC(year, month - 1, 1)));
currentMonth.getMonth() - 1
)
);
}} }}
className="px-2 py-1 border border-pixel-gold/50 text-pixel-gold hover:bg-pixel-gold/10 rounded transition text-sm" 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> </h3>
<button <button
onClick={() => { onClick={() => {
setCurrentMonth( const year = currentMonth.getUTCFullYear();
new Date( const month = currentMonth.getUTCMonth();
currentMonth.getFullYear(), setCurrentMonth(new Date(Date.UTC(year, month + 1, 1)));
currentMonth.getMonth() + 1
)
);
}} }}
className="px-2 py-1 border border-pixel-gold/50 text-pixel-gold hover:bg-pixel-gold/10 rounded transition text-sm" 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 */} {/* Jours de la semaine */}
<div className="grid grid-cols-7 gap-0.5 mb-1"> <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 <div
key={day} key={day}
className="text-center text-[10px] text-gray-400 font-semibold py-1" className="text-center text-[10px] text-gray-400 font-semibold py-1"