From d2289e41c3b30458251ef590c7e381475d9c5589 Mon Sep 17 00:00:00 2001
From: despiegk <kristof@incubaid.com>
Date: Thu, 31 Oct 2024 09:28:13 +0100
Subject: [PATCH] ...

---
 .../src/components/calendar/calendar.tsx      | 101 +++++++-----------
 1 file changed, 36 insertions(+), 65 deletions(-)

diff --git a/react-shadcn-starter/src/components/calendar/calendar.tsx b/react-shadcn-starter/src/components/calendar/calendar.tsx
index 8cd83c5..67dcfff 100644
--- a/react-shadcn-starter/src/components/calendar/calendar.tsx
+++ b/react-shadcn-starter/src/components/calendar/calendar.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react'
 import { addDays, format, startOfWeek, endOfWeek, startOfMonth, endOfMonth, eachDayOfInterval, isSameMonth, isSameDay, parseISO } from 'date-fns'
 import { ChevronLeft, ChevronRight, Plus, Moon, Sun, Clock, X } from 'lucide-react'
-import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import {
@@ -272,20 +271,6 @@ export function OurCalendar({ webdavConfig, calendarFile, circleFile }: Calendar
     await saveCalendarData(events.filter(event => event.id !== id))
   }
 
-  const onDragEnd = async (result: any) => {
-    if (!result.destination) return
-
-    const newEvents = Array.from(events)
-    const [reorderedItem] = newEvents.splice(result.source.index, 1)
-    newEvents.splice(result.destination.index, 0, {
-      ...reorderedItem,
-      date: days[result.destination.droppableId].toISOString().split('T')[0],
-    })
-
-    setEvents(newEvents)
-    await saveCalendarData(newEvents)
-  }
-
   return (
     <div className={`container mx-auto p-4 ${isDarkMode ? 'dark' : ''}`}>
       <div className="dark:bg-gray-800 min-h-screen transition-colors duration-300">
@@ -335,61 +320,47 @@ export function OurCalendar({ webdavConfig, calendarFile, circleFile }: Calendar
               </div>
             </div>
           </div>
-          <DragDropContext onDragEnd={onDragEnd}>
-            <div className="grid grid-cols-7 gap-2">
-              {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day) => (
-                <div key={day} className="text-center font-bold p-2 dark:text-white">
-                  {day}
-                </div>
-              ))}
-              {days.map((day, index) => (
-                <Droppable key={day.toISOString()} droppableId={index.toString()}>
-                  {(provided: any) => (
+          <div className="grid grid-cols-7 gap-2">
+            {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day) => (
+              <div key={day} className="text-center font-bold p-2 dark:text-white">
+                {day}
+              </div>
+            ))}
+            {days.map((day) => (
+              <div
+                key={day.toISOString()}
+                className={cn(
+                  "border rounded-lg p-2 min-h-[100px] dark:border-gray-600",
+                  !isSameMonth(day, currentDate) && "bg-gray-100 dark:bg-gray-700",
+                  isSameMonth(day, currentDate) && "dark:bg-gray-800"
+                )}
+              >
+                <div className="text-right dark:text-white">{format(day, 'd')}</div>
+                {events
+                  .filter((event) => isSameDay(parseISO(event.date), day))
+                  .map((event) => (
                     <div
-                      ref={provided.innerRef}
-                      {...provided.droppableProps}
+                      key={event.id}
                       className={cn(
-                        "border rounded-lg p-2 min-h-[100px] dark:border-gray-600",
-                        !isSameMonth(day, currentDate) && "bg-gray-100 dark:bg-gray-700",
-                        isSameMonth(day, currentDate) && "dark:bg-gray-800"
+                        "mt-1 p-1 text-sm rounded cursor-pointer",
+                        event.color
                       )}
+                      onClick={() => setSelectedEvent(event)}
                     >
-                      <div className="text-right dark:text-white">{format(day, 'd')}</div>
-                      {events
-                        .filter((event) => isSameDay(parseISO(event.date), day))
-                        .map((event, eventIndex) => (
-                          <Draggable key={event.id} draggableId={event.id} index={eventIndex}>
-                            {(provided: any) => (
-                              <div
-                                ref={provided.innerRef}
-                                {...provided.draggableProps}
-                                {...provided.dragHandleProps}
-                                className={cn(
-                                  "mt-1 p-1 text-sm rounded cursor-pointer",
-                                  event.color
-                                )}
-                                onClick={() => setSelectedEvent(event)}
-                              >
-                                <div className="flex items-center justify-between">
-                                  <span>{event.title}</span>
-                                  {!event.isFullDay && (
-                                    <span className="text-xs opacity-75">
-                                      <Clock className="h-3 w-3 inline-block mr-1" />
-                                      {event.time}
-                                    </span>
-                                  )}
-                                </div>
-                              </div>
-                            )}
-                          </Draggable>
-                        ))}
-                      {provided.placeholder}
+                      <div className="flex items-center justify-between">
+                        <span>{event.title}</span>
+                        {!event.isFullDay && (
+                          <span className="text-xs opacity-75">
+                            <Clock className="h-3 w-3 inline-block mr-1" />
+                            {event.time}
+                          </span>
+                        )}
+                      </div>
                     </div>
-                  )}
-                </Droppable>
-              ))}
-            </div>
-          </DragDropContext>
+                  ))}
+              </div>
+            ))}
+          </div>
           {selectedEvent && (
             <EventDetailView
               event={selectedEvent}