...

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,19 +320,15 @@ 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) => (
+            {days.map((day) => (
               <div
-                      ref={provided.innerRef}
-                      {...provided.droppableProps}
+                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",
@@ -357,13 +338,9 @@ export function OurCalendar({ webdavConfig, calendarFile, circleFile }: Calendar
                 <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) => (
+                  .map((event) => (
                     <div
-                                ref={provided.innerRef}
-                                {...provided.draggableProps}
-                                {...provided.dragHandleProps}
+                      key={event.id}
                       className={cn(
                         "mt-1 p-1 text-sm rounded cursor-pointer",
                         event.color
@@ -380,16 +357,10 @@ export function OurCalendar({ webdavConfig, calendarFile, circleFile }: Calendar
                         )}
                       </div>
                     </div>
-                            )}
-                          </Draggable>
-                        ))}
-                      {provided.placeholder}
-                    </div>
-                  )}
-                </Droppable>
                   ))}
               </div>
-          </DragDropContext>
+            ))}
+          </div>
           {selectedEvent && (
             <EventDetailView
               event={selectedEvent}