calendar fix

src/component/calendar/Calendar.jsx

@@ -8,13 +8,11 @@ export default function Calendar(){
     const [draggedEvent, setDraggedEvent] = useState()
     const handleDragStart = useCallback((event) => setDraggedEvent(event), [])
 
-    const formatName = (name) => `${name}`
-
     const dummyEvents = [
-        {id: '1', name: 'Family Vacation', color: 'fc-event-primary'},
-        {id: '2', name: 'Meeting In Office', color: 'fc-event-warning'},
-        {id: '3', name: 'Client Call', color: 'fc-event-danger'},
-        {id: '4', name: 'Interview', color: 'fc-event-success'}
+        {id: '1', title: 'Family Vacation', color: 'fc-event-primary', start: new Date('2024-12-18'), end: new Date('2024-12-18'), allDay: false,resource: ''},
+        {id: '2', title: 'Meeting In Office', color: 'fc-event-warning', start: new Date('2024-12-19'), end: new Date('2024-12-19'), allDay: false,resource: ''},
+        {id: '3', title: 'Client Call', color: 'fc-event-danger', start: new Date('2024-12-20'), end: new Date('2024-12-20'), allDay: false,resource: ''},
+        {id: '4', title: 'Interview', color: 'fc-event-success', start: new Date('2024-12-21'), end: new Date('2024-12-21'), allDay: false,resource: ''}
     ]
 
     return(
@@ -43,10 +41,10 @@ export default function Calendar(){
                                             <div key={index} className={`fc-event ${item.color}`} data-color={`${item.color}`} 
                                                 // draggable="true"
                                                 onDragStart={() =>
-                                                handleDragStart({ title: formatName(item.name)})
+                                                handleDragStart({...item})
                                                 }
                                             >
-                                                <span></span> {item.name}
+                                                <span></span> {item.title}
                                             </div>
                                         ))}
                                         <div className="form-check">
@@ -60,7 +58,7 @@ export default function Calendar(){
                                 </div>
                                 <div className="col-xl-9">
                                     <div className="event-calendar">
-                                        <EventCalendar draggedEvent={draggedEvent} setDraggedEvent={setDraggedEvent} formatName={formatName} />
+                                        <EventCalendar draggedEvent={draggedEvent} setDraggedEvent={setDraggedEvent} />
                                     </div>
                                 </div>
                             </div>

src/component/calendar/EventCalendar.jsx

@@ -10,7 +10,7 @@ const localizer = dayjsLocalizer(dayjs)
 
 const DnDCalendar = withDragAndDrop(Calendar)
 
-export default function EventCalendar({draggedEvent, setDraggedEvent, formatName}) {
+export default function EventCalendar({draggedEvent, setDraggedEvent}) {
     const myEventsList = []
     const [myEvents, setMyEvents] = useState(myEventsList)
 
@@ -34,7 +34,6 @@ export default function EventCalendar({draggedEvent, setDraggedEvent, formatName
     )
 
     const [displayDragItemInCell, setDisplayDragItemInCell] = useState(true)
-    const [counters, setCounters] = useState({ item1: 0, item2: 0 })
     
     const eventPropGetter = useCallback(
         (event) => ({
@@ -80,24 +79,17 @@ export default function EventCalendar({draggedEvent, setDraggedEvent, formatName
             return
           }
     
-          const { name } = draggedEvent
+          const { title } = draggedEvent
           const event = {
-            title: formatName(name, counters[name]),
+            title: title,
             start,
             end,
             isAllDay,
           }
           setDraggedEvent(null)
-          setCounters((prev) => {
-            const { [name]: count } = prev
-            return {
-              ...prev,
-              [name]: count + 1,
-            }
-          })
           newEvent(event)
         },
-        [draggedEvent, counters, setDraggedEvent, setCounters, newEvent]
+        [draggedEvent, setDraggedEvent, newEvent]
       )
     
       const resizeEvent = useCallback(
@@ -118,7 +110,7 @@ export default function EventCalendar({draggedEvent, setDraggedEvent, formatName
                 displayDragItemInCell ? dragFromOutsideItem : null
                 }
                 draggableAccessor="isDraggable"
-                eventPropGetter={eventPropGetter}
+                // eventPropGetter={eventPropGetter}
             localizer={localizer}
             events={myEvents}
             startAccessor="start"

src/css/style.scss

@@ -89,6 +89,7 @@ $today-highlight-bg: #fcf8e3;
 // $btn-color: #fff;
 $btn-bg: #8e54e9;
 $btn-border: #8e54e9;
+$event-padding: 10px;
 
 @import 'react-big-calendar/lib/sass/styles';
 @import 'react-big-calendar/lib/addons/dragAndDrop/styles'; // if using DnD