calendar component added

2024-12-17 02:57:53 +01:00
parent 263fec36c5
commit 61c50c03e4
4 changed files with 164 additions and 16 deletions
@@ -0,0 +1,133 @@
+import React, { useCallback, useState } from 'react'
+import { Calendar, dayjsLocalizer } from 'react-big-calendar'
+import dayjs from 'dayjs'
+
+import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
+
+
+
+const localizer = dayjsLocalizer(dayjs)
+
+const DnDCalendar = withDragAndDrop(Calendar)
+
+export default function EventCalendar({draggedEvent, setDraggedEvent, formatName}) {
+    const myEventsList = []
+    const [myEvents, setMyEvents] = useState(myEventsList)
+
+    const moveEvent = useCallback(
+      ({ event, start, end, isAllDay: droppedOnAllDaySlot = false }) => {
+        const { allDay } = event
+        if (!allDay && droppedOnAllDaySlot) {
+          event.allDay = true
+        }
+        if (allDay && !droppedOnAllDaySlot) {
+            event.allDay = false;
+        }
+  
+        setMyEvents((prev) => {
+          const existing = prev.find((ev) => ev.id === event.id) ?? {}
+          const filtered = prev.filter((ev) => ev.id !== event.id)
+          return [...filtered, { ...existing, start, end, allDay: event.allDay }]
+        })
+      },
+      [setMyEvents]
+    )
+
+    const [displayDragItemInCell, setDisplayDragItemInCell] = useState(true)
+    const [counters, setCounters] = useState({ item1: 0, item2: 0 })
+    
+    const eventPropGetter = useCallback(
+        (event) => ({
+            ...(event.isDraggable
+                ? { className: 'isDraggable' }
+                : { className: 'nonDraggable' }),
+            }),
+            []
+        )
+    
+      const dragFromOutsideItem = useCallback(() => draggedEvent === 'undroppable' ? null : draggedEvent, [draggedEvent])
+    
+      const customOnDragOverFromOutside = useCallback(
+        (dragEvent) => {
+          // check for undroppable is specific to this example
+          // and not part of API. This just demonstrates that
+          // onDragOver can optionally be passed to conditionally
+          // allow draggable items to be dropped on cal, based on
+          // whether event.preventDefault is called
+          if (draggedEvent !== 'undroppable') {
+            console.log('preventDefault')
+            dragEvent.preventDefault()
+          }
+        },
+        [draggedEvent]
+      )
+    
+      const newEvent = useCallback(
+        (event) => {
+          setMyEvents((prev) => {
+            const idList = prev.map((item) => item.id)
+            const newId = Math.max(...idList) + 1
+            return [...prev, { ...event, id: newId }]
+          })
+        },
+        [setMyEvents]
+      )
+    
+      const onDropFromOutside = useCallback(
+        ({ start, end, allDay: isAllDay }) => {
+          if (draggedEvent === 'undroppable') {
+            setDraggedEvent(null)
+            return
+          }
+    
+          const { name } = draggedEvent
+          const event = {
+            title: formatName(name, counters[name]),
+            start,
+            end,
+            isAllDay,
+          }
+          setDraggedEvent(null)
+          setCounters((prev) => {
+            const { [name]: count } = prev
+            return {
+              ...prev,
+              [name]: count + 1,
+            }
+          })
+          newEvent(event)
+        },
+        [draggedEvent, counters, setDraggedEvent, setCounters, newEvent]
+      )
+    
+      const resizeEvent = useCallback(
+        ({ event, start, end }) => {
+          setMyEvents((prev) => {
+            const existing = prev.find((ev) => ev.id === event.id) ?? {}
+            const filtered = prev.filter((ev) => ev.id !== event.id)
+            return [...filtered, { ...existing, start, end }]
+          })
+        },
+        [setMyEvents]
+      )
+
+  return (
+    <div className='w-100'>
+        <DnDCalendar
+                dragFromOutsideItem={
+                displayDragItemInCell ? dragFromOutsideItem : null
+                }
+                draggableAccessor="isDraggable"
+                eventPropGetter={eventPropGetter}
+            localizer={localizer}
+            events={myEvents}
+            startAccessor="start"
+            endAccessor="end"
+            style={{ height: 500 }}
+            onEventDrop={moveEvent}
+            onDropFromOutside={onDropFromOutside}
+            onDragOverFromOutside={customOnDragOverFromOutside}
+        />
+    </div>
+  )
+}