calendar fix started

src/component/calendar/EventCalendar.jsx

@@ -1,130 +1,131 @@
-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)
+import React, { useCallback, useState } from 'react';
+import { formatDate } from '@fullcalendar/core';
+import FullCalendar from '@fullcalendar/react';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import interactionPlugin from '@fullcalendar/interaction';
+import { INITIAL_EVENTS, createEventId } from './event-utils';
 
 export default function EventCalendar({draggedEvent, setDraggedEvent}) {
-    const myEventsList = []
-    const [myEvents, setMyEvents] = useState(myEventsList)
+  const [weekendsVisible, setWeekendsVisible] = useState(true);
+  const [currentEvents, setCurrentEvents] = useState(INITIAL_EVENTS);
 
-    const moveEvent = useCallback(
-      ({ event, start, end, isAllDay: droppedOnAllDaySlot = false }) => {
-        // const { isAllDay } = 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 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]
-      )
+  function handleWeekendsToggle() {
+    setWeekendsVisible(!weekendsVisible);
+  }
 
+  function handleDateSelect(selectInfo) {
+    let title = prompt('Please enter a new title for your event');
+    // let calendarApi = selectInfo.view.calendar;
 
-      const eventPropGetter = useCallback(
-        (event) => ({
-            ...(event.isDraggable
-                ? { className: 'isDraggable' }
-                : { className: 'nonDraggable' }),
-            }),
-            []
-      )
-    
-      const newEvent = useCallback(
-        (event) => {
-          setMyEvents((prev) => {
-            const idList = prev.map((item) => item.id)
-            const newId = Math.max(...idList) + 1
-            // return [...prev, { ...event, id: newId }]
-            return [...prev, { ...event}]
-          })
-        },
-        [setMyEvents]
-      )
-    
-      const onDropFromOutside = useCallback(
-        ({ start, end, allDay: isAllDay }) => {
-          if (draggedEvent === 'undroppable') {
-            setDraggedEvent(null)
-            return
-          }
-    
-          const { title, id } = draggedEvent
-          const event = {
-            title: title,
-            start,
-            end,
-            isAllDay,
-            id
-          }
-          setDraggedEvent(null)
-          newEvent(event)
-        },
-        [draggedEvent, setDraggedEvent, 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]
+    // calendarApi.unselect(); // clear date selection
+
+    if (title) {
+    //   calendarApi.addEvent({
+    //     id: createEventId(),
+    //     title,
+    //     start: selectInfo.startStr,
+    //     end: selectInfo.endStr,
+    //     allDay: selectInfo.allDay,
+    //   });
+      let newEvent = {
+        id: createEventId(),
+        title,
+        start: selectInfo.startStr,
+        end: selectInfo.endStr,
+        allDay: selectInfo.allDay,
+      }
+      setCurrentEvents(prev => ([...prev, newEvent]))
+    }
+  }
+
+//   const onDrop = useCallback(
+//         (event) => {
+//         //   if (draggedEvent === 'undroppable') {
+//         //     setDraggedEvent(null)
+//         //     return
+//         //   }
+
+//         //   let calendarApi;
+
+//         //   calendarApi.unselect(); // clear date selection
+
+//         //   calendarApi.addEvent({
+//         //     id: createEventId(),
+//         //     allDay: selectInfo.allDay,
+//         //     end: selectInfo.endStr,
+//         //     start: selectInfo.startStr,
+//         //     title,
+//         //     ...draggedEvent
+//         //   });
+
+//         //   setDraggedEvent(null)
+//           console.log('EVENT', event)
+//         },
+//         [draggedEvent]
+//   )
+
+  const onDrop = 
+    (dropInfo) => {
+      console.log('dropInfo', dropInfo)
+  }
+
+  function handleEventClick(clickInfo) {
+    if (
+      confirm(
+        `Are you sure you want to delete the event '${clickInfo.event.title}'`
       )
+    ) {
+      clickInfo.event.remove();
+    }
+  }
+
+  function handleEvents(events) {
+    // setCurrentEvents(events);
+  }
 
   return (
-    <div className='w-100'>
-        <DnDCalendar
-                dragFromOutsideItem={
-                displayDragItemInCell ? dragFromOutsideItem : null
-                }
-                eventPropGetter={eventPropGetter}
-            // draggableAccessor="isDraggable"
-            localizer={localizer}
-            events={myEvents}
-            startAccessor="start"
-            endAccessor="end"
-            style={{ height: 500 }}
-            // onEventResize={resizeEvent}
-            resizable
-            onEventDrop={moveEvent}
-            onDropFromOutside={onDropFromOutside}
-            // onDragOverFromOutside={customOnDragOverFromOutside}
+    <div className="demo-app">
+      <div className="demo-app-main">
+        <FullCalendar
+          plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
+          headerToolbar={{
+            left: 'prev next today',
+            center: 'title',
+            right: 'dayGridMonth,timeGridWeek,timeGridDay',
+          }}         
+          initialView="dayGridMonth"
+          editable={true}
+          selectable={true}
+          selectMirror={true}
+          dayMaxEvents={true}
+          weekends={weekendsVisible}
+        //   initialEvents={INITIAL_EVENTS} // alternatively, use the `events` setting to fetch from a feed
+          events={currentEvents}
+          select={handleDateSelect}
+          eventContent={renderEventContent} // custom render function
+          eventClick={handleEventClick}
+          eventsSet={handleEvents} // called after events are initialized/added/changed/removed
+          /* you can update a remote database when these fire:
+          eventAdd={function(){}}
+          eventChange={function(){}}
+          eventRemove={function(){}}
+          */
+
+          dropAccept= '.fc-event'
+          droppable= {true} // this allows things to be dropped onto the calendar
+          drop= {onDrop}
         />
+      </div>
     </div>
-  )
-}
+  );
+}
+
+function renderEventContent(eventInfo) {
+  return (
+    <>
+      {/* <b>{eventInfo.timeText}</b> */}
+      <i>{eventInfo.event.title}</i>
+    </>
+  );
+}