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:
@@ -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"
|
||||||
|
|||||||
Reference in New Issue
Block a user