Correction de l'erreur sur la date de début du mois pour le calendrier,...

Correction de l'erreur sur la date de début du mois pour le calendrier, reformatage du calendrier pour format US

src/components/Calendar.jsx

 import React, { useState } from 'react';
-import { format, addMonths, subMonths, startOfMonth, endOfMonth, eachDayOfInterval, isSameDay } from 'date-fns';
+import { format, addMonths, subMonths, startOfMonth, endOfMonth, eachDayOfInterval, getDay, isSameDay } from 'date-fns';
 import { enUS } from 'date-fns/locale';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 
@@ -15,6 +15,8 @@ const Calendar = () => {
     end: endOfMonth(currentDate),
   });
 
+  const startDay = getDay(startOfMonth(currentDate)); 
+
   return (
     <div className="space-y-6">
       <div className="bg-violet-100 rounded-2xl p-6">
@@ -33,7 +35,7 @@ const Calendar = () => {
         </div>
 
         <div className="grid grid-cols-7 gap-2 text-center mb-2">
-          {['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map(day => (
+          {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => (
             <div key={day} className="text-sm font-medium text-violet-800">
               {day}
             </div>
@@ -41,6 +43,10 @@ const Calendar = () => {
         </div>
 
         <div className="grid grid-cols-7 gap-2">
+          {[...Array(startDay)].map((_, index) => (
+            <div key={`empty-${index}`} className="p-2"></div>
+          ))}
+          
           {days.map(day => {
             const isSelected = isSameDay(day, selectedDate);