diff --git a/components/calendar/calendar-client.tsx b/components/calendar/calendar-client.tsx
index 6846aaa6..0c91d549 100644
--- a/components/calendar/calendar-client.tsx
+++ b/components/calendar/calendar-client.tsx
@@ -1209,33 +1209,63 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
               </div>
             </div>
 
-            <div className="grid gap-2">
-              <Label htmlFor="start" className="text-base font-semibold">Début</Label>
-              <DatePicker
-                selected={eventForm.start ? new Date(eventForm.start) : null}
-                onChange={(date) => setEventForm({ ...eventForm, start: date?.toISOString() || "" })}
-                showTimeSelect
-                timeFormat="HH:mm"
-                timeIntervals={15}
-                dateFormat="dd/MM/yyyy HH:mm"
-                placeholderText="Sélectionner une date et heure"
-                className="w-full"
-              />
-            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label>Début</Label>
+                <div className="flex gap-2">
+                  <div className="flex-1">
+                    <DatePicker
+                      selected={getDateFromString(eventForm.start)}
+                      onChange={handleStartDateChange}
+                      dateFormat="dd/MM/yyyy"
+                      locale="fr"
+                      className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+                      placeholderText="Date"
+                      customInput={<Input />}
+                    />
+                  </div>
+                  <DatePicker
+                    selected={getDateFromString(eventForm.start)}
+                    onChange={handleStartDateChange}
+                    showTimeSelect
+                    showTimeSelectOnly
+                    timeIntervals={15}
+                    timeCaption="Heure"
+                    dateFormat="HH:mm"
+                    className="w-32"
+                    customInput={<Input />}
+                  />
+                </div>
+              </div>
 
-            <div className="grid gap-2">
-              <Label htmlFor="end" className="text-base font-semibold">Fin</Label>
-              <DatePicker
-                selected={eventForm.end ? new Date(eventForm.end) : null}
-                onChange={(date) => setEventForm({ ...eventForm, end: date?.toISOString() || "" })}
-                showTimeSelect
-                timeFormat="HH:mm"
-                timeIntervals={15}
-                dateFormat="dd/MM/yyyy HH:mm"
-                placeholderText="Sélectionner une date et heure"
-                className="w-full"
-                minDate={eventForm.start ? new Date(eventForm.start) : undefined}
-              />
+              <div className="space-y-2">
+                <Label>Fin</Label>
+                <div className="flex gap-2">
+                  <div className="flex-1">
+                    <DatePicker
+                      selected={getDateFromString(eventForm.end)}
+                      onChange={handleEndDateChange}
+                      dateFormat="dd/MM/yyyy"
+                      locale="fr"
+                      className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+                      placeholderText="Date"
+                      customInput={<Input />}
+                      minDate={getDateFromString(eventForm.start)}
+                    />
+                  </div>
+                  <DatePicker
+                    selected={getDateFromString(eventForm.end)}
+                    onChange={handleEndDateChange}
+                    showTimeSelect
+                    showTimeSelectOnly
+                    timeIntervals={15}
+                    timeCaption="Heure"
+                    dateFormat="HH:mm"
+                    className="w-32"
+                    customInput={<Input />}
+                  />
+                </div>
+              </div>
             </div>
           </div>
 
diff --git a/components/calendar/calendar-widget.tsx b/components/calendar/calendar-widget.tsx
index 9961eec1..4060e003 100644
--- a/components/calendar/calendar-widget.tsx
+++ b/components/calendar/calendar-widget.tsx
@@ -32,31 +32,38 @@ export function CalendarWidget() {
     const fetchUpcomingEvents = async () => {
       try {
         setLoading(true);
-        const now = new Date();
-        const nextWeek = addDays(now, 7);
-
-        // Fetch events directly from the calendar API
-        const eventsRes = await fetch(
-          `/api/calendar?start=${now.toISOString()}&end=${nextWeek.toISOString()}`
-        );
-
-        if (!eventsRes.ok) {
+        
+        // Fetch calendars with events from the correct endpoint
+        const response = await fetch('/api/calendars');
+        if (!response.ok) {
           throw new Error("Impossible de charger les événements");
         }
 
-        const eventsData = await eventsRes.json();
-
-        // Sort events by start date and limit to 5
-        const sortedEvents = eventsData
-          .sort((a: Event, b: Event) => new Date(a.start).getTime() - new Date(b.start).getTime())
-          .slice(0, 5)
-          .map((event: Event) => ({
+        const calendarsData = await response.json();
+        
+        // Extract and process events from all calendars
+        const allEvents = calendarsData.flatMap((calendar: any) => 
+          (calendar.events || []).map((event: any) => ({
             ...event,
+            calendarColor: calendar.color,
+            calendarName: calendar.name,
             start: new Date(event.start),
-            end: new Date(event.end),
-          }));
+            end: new Date(event.end)
+          }))
+        );
 
-        setEvents(sortedEvents);
+        // Filter events for the next 7 days
+        const now = new Date();
+        const nextWeek = addDays(now, 7);
+        const upcomingEvents = allEvents
+          .filter((event: Event) => {
+            const eventStart = new Date(event.start);
+            return eventStart >= now && eventStart <= nextWeek;
+          })
+          .sort((a: Event, b: Event) => a.start.getTime() - b.start.getTime())
+          .slice(0, 5);
+
+        setEvents(upcomingEvents);
       } catch (err) {
         console.error("Erreur lors du chargement des événements:", err);
         setError("Impossible de charger les événements à venir");