calendar fix started

package.json

@@ -3,6 +3,11 @@
   "version": "0.1.1",
   "private": true,
   "dependencies": {
+    "@fullcalendar/core": "^6.1.15",
+    "@fullcalendar/daygrid": "^6.1.15",
+    "@fullcalendar/interaction": "^6.1.15",
+    "@fullcalendar/react": "^6.1.15",
+    "@fullcalendar/timegrid": "^6.1.15",
     "@popperjs/core": "^2.11.8",
     "@reduxjs/toolkit": "^2.4.0",
     "@tanstack/react-query": "^5.62.3",
@@ -12,11 +17,9 @@
     "apexcharts": "^4.1.0",
     "axios": "^1.7.9",
     "bootstrap": "^5.3.3",
-    "dayjs": "^1.11.13",
     "formik": "^2.4.6",
     "react": "^18.3.1",
     "react-apexcharts": "^1.7.0",
-    "react-big-calendar": "^1.17.0",
     "react-dom": "^18.3.1",
     "react-icons": "^5.4.0",
     "react-redux": "^9.1.2",

src/component/calendar/Calendar.jsx

@@ -6,19 +6,15 @@ import EventCalendar from "./EventCalendar";
 export default function Calendar(){
 
     const [draggedEvent, setDraggedEvent] = useState('undroppable')
-    const handleDragStart = useCallback((event) => setDraggedEvent(event), [])
+    const handleDragStart = (event) => {
+        setDraggedEvent(event)
+    }
 
-    // const dummyEvents = [
-    //     {id: '1', title: 'Family Vacation', color: 'fc-event-primary', start: new Date('2024-12-18'), end: new Date('2024-12-18'), isAllDay: false, resource: ''},
-    //     {id: '2', title: 'Meeting In Office', color: 'fc-event-warning', start: new Date('2024-12-19'), end: new Date('2024-12-19'), isAllDay: false, resource: ''},
-    //     {id: '3', title: 'Client Call', color: 'fc-event-danger', start: new Date('2024-12-20'), end: new Date('2024-12-20'), isAllDay: false, resource: ''},
-    //     {id: '4', title: 'Interview', color: 'fc-event-success', start: new Date('2024-12-21'), end: new Date('2024-12-21'), isAllDay: false, resource: ''}
-    // ]
     const dummyEvents = [
-        {id: '1', title: 'Family Vacation', color: 'fc-event-primary', isAllDay: false},
+        {id: '1111', title: 'Family Vacation', color: 'fc-event-primary', start: new Date('2025-01-18')},
-        {id: '2', title: 'Meeting In Office', color: 'fc-event-warning', isAllDay: false},
+        {id: '2222', title: 'Meeting In Office', color: 'fc-event-warning', start: new Date('2025-01-19')},
-        {id: '3', title: 'Client Call', color: 'fc-event-danger', isAllDay: false},
+        {id: '3333', title: 'Client Call', color: 'fc-event-danger', start: new Date('2025-01-22')},
-        {id: '4', title: 'Interview', color: 'fc-event-success', isAllDay: false}
+        {id: '4444', title: 'Interview', color: 'fc-event-success', start: new Date('2025-01-1')}
     ]
 
     return(
@@ -63,6 +59,7 @@ export default function Calendar(){
                                 </div>
                                 <div className="col-xl-9">
                                     <div className="event-calendar">
+                                        {/* <EventCalendar draggedEvent={draggedEvent} setDraggedEvent={setDraggedEvent} /> */}
                                         <EventCalendar draggedEvent={draggedEvent} setDraggedEvent={setDraggedEvent} />
                                     </div>
                                 </div>

src/component/calendar/EventCalendar.jsx

@@ -1,130 +1,131 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useState } from 'react';
-import { Calendar, dayjsLocalizer } from 'react-big-calendar'
+import { formatDate } from '@fullcalendar/core';
-import dayjs from 'dayjs'
+import FullCalendar from '@fullcalendar/react';
-
+import dayGridPlugin from '@fullcalendar/daygrid';
-import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
+import timeGridPlugin from '@fullcalendar/timegrid';
-
+import interactionPlugin from '@fullcalendar/interaction';
-
+import { INITIAL_EVENTS, createEventId } from './event-utils';
-
-const localizer = dayjsLocalizer(dayjs)
-
-const DnDCalendar = withDragAndDrop(Calendar)
 
 export default function EventCalendar({draggedEvent, setDraggedEvent}) {
-    const myEventsList = []
+  const [weekendsVisible, setWeekendsVisible] = useState(true);
-    const [myEvents, setMyEvents] = useState(myEventsList)
+  const [currentEvents, setCurrentEvents] = useState(INITIAL_EVENTS);
 
-    const moveEvent = useCallback(
+  function handleWeekendsToggle() {
-      ({ event, start, end, isAllDay: droppedOnAllDaySlot = false }) => {
+    setWeekendsVisible(!weekendsVisible);
-        // const { isAllDay } = event
+  }
-        // if (!allDay && droppedOnAllDaySlot) {
-        //   event.allDay = true
-        // }
-        // if (allDay && !droppedOnAllDaySlot) {
-        //     event.allDay = false;
-        // }
 
-        setMyEvents((prev) => {
+  function handleDateSelect(selectInfo) {
-          const existing = prev.find((ev) => ev.id === event.id) ?? {}
+    let title = prompt('Please enter a new title for your event');
-          const filtered = prev.filter((ev) => ev.id !== event.id)
+    // let calendarApi = selectInfo.view.calendar;
-          return [...filtered, { ...existing, start, end, allDay: event.allDay }]
-        })
-      },
-      [setMyEvents]
-    )
-    const [displayDragItemInCell, setDisplayDragItemInCell] = useState(true)
 
+    // calendarApi.unselect(); // clear date selection
 
-      const dragFromOutsideItem = useCallback(() => draggedEvent === 'undroppable' ? null : draggedEvent, [draggedEvent])
+    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 customOnDragOverFromOutside = useCallback(
+//   const onDrop = useCallback(
-        (dragEvent) => {
+//         (event) => {
-          // check for undroppable is specific to this example
+//         //   if (draggedEvent === 'undroppable') {
-          // and not part of API. This just demonstrates that
+//         //     setDraggedEvent(null)
-          // onDragOver can optionally be passed to conditionally
+//         //     return
-          // allow draggable items to be dropped on cal, based on
+//         //   }
-          // whether event.preventDefault is called
+
-          if (draggedEvent !== 'undroppable') {
+//         //   let calendarApi;
-            console.log('preventDefault')
+
-            dragEvent.preventDefault()
+//         //   calendarApi.unselect(); // clear date selection
-          }
+
-        },
+//         //   calendarApi.addEvent({
-        [draggedEvent]
+//         //     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) {
-      const eventPropGetter = useCallback(
+    // setCurrentEvents(events);
-        (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]
-      )
 
   return (
-    <div className='w-100'>
+    <div className="demo-app">
-        <DnDCalendar
+      <div className="demo-app-main">
-                dragFromOutsideItem={
+        <FullCalendar
-                displayDragItemInCell ? dragFromOutsideItem : null
+          plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
-                }
+          headerToolbar={{
-                eventPropGetter={eventPropGetter}
+            left: 'prev next today',
-            // draggableAccessor="isDraggable"
+            center: 'title',
-            localizer={localizer}
+            right: 'dayGridMonth,timeGridWeek,timeGridDay',
-            events={myEvents}
+          }}         
-            startAccessor="start"
+          initialView="dayGridMonth"
-            endAccessor="end"
+          editable={true}
-            style={{ height: 500 }}
+          selectable={true}
-            // onEventResize={resizeEvent}
+          selectMirror={true}
-            resizable
+          dayMaxEvents={true}
-            onEventDrop={moveEvent}
+          weekends={weekendsVisible}
-            onDropFromOutside={onDropFromOutside}
+        //   initialEvents={INITIAL_EVENTS} // alternatively, use the `events` setting to fetch from a feed
-            // onDragOverFromOutside={customOnDragOverFromOutside}
+          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>
+    </>
+  );
 }

src/component/calendar/EventCalendarOld.jsx

@@ -0,0 +1,138 @@
+// 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}) {
+//     const myEventsList = []
+//     const [myEvents, setMyEvents] = useState(myEventsList)
+
+//     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]
+//       )
+
+
+//       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]
+//       )
+
+//   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>
+//   )
+// }
+
+import React from 'react'
+
+export default function EventCalendar() {
+  return (
+    <div>EventCalendar</div>
+  )
+}

src/component/calendar/event-utils.js

@@ -0,0 +1,29 @@
+let eventGuid = 0;
+let todayStr = new Date().toISOString().replace(/T.*$/, ''); // YYYY-MM-DD of today
+
+export const INITIAL_EVENTS = [
+  {
+    id: createEventId(),
+    title: 'All-day event',
+    start: new Date('2025-01-19'),
+    end: new Date('2025-01-20'),
+    // color: 'blue'
+  },
+  {
+    id: createEventId(),
+    title: 'Timed event',
+    start: todayStr + 'T12:00:00',
+    // color: 'red'
+  },
+  {
+    id: createEventId(),
+    title: 'Timed event 2',
+    start: new Date('2025-01-25'),
+    start: new Date('2025-01-26'),
+    // color: 'blue'
+  },
+];
+
+export function createEventId() {
+  return String(eventGuid++);
+}

src/css/style.scss

@@ -91,9 +91,6 @@ $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
-
 .extraProductCard{
   background-color: aliceblue;
   border-radius: 5px;
@@ -125,30 +122,29 @@ $event-padding: 10px;
 
 
 /* CALENDER STYLE HERE */
-// .rbc-today{
+.fc-next-button.fc-button, .fc-prev-button.fc-button,
-//   background-color: '#fcf8e3' !important;
+.fc-timeGridWeek-button.fc-button, .fc-timeGridDay-button.fc-button, .fc-dayGridMonth-button.fc-button {
-// }
+  background: #eceef3!important;
-.rbc-toolbar button {
-  background: #eceef3;
   border: none;
   color: #a6a9b7 !important;
-  text-transform: capitalize;
+  text-transform: capitalize !important;
-  box-shadow: none!important;
+  // box-shadow: none!important;
-  text-shadow: none!important;
+  // text-shadow: none!important;
-  border-radius: 3px!important;
+  // border-radius: 3px!important;
-  margin: 0 3px!important;
+  // margin: 0 3px!important;
-  padding: 6px 12px!important;
+  // padding: 6px 12px!important;
-  height: auto!important;
+  // height: auto!important;
 }
-.rbc-toolbar-label{
+
-  color: black !important;
+.fc-today-button.fc-button,
-  font-size: 1.5rem;
+.fc-timeGridWeek-button.fc-button-active, .fc-timeGridDay-button.fc-button-active, .fc-dayGridMonth-button.fc-button-active{
-  font-weight: 700;
-}
-// .rbc-month-view{
-//   border: .5px solid #e8edf1!important;
-// }
-.rbc-toolbar button.rbc-active, .rbc-toolbar button:active, .rbc-toolbar button:hover{
   color: #fff!important;
+  border: none;
+  background-color: #8E54E9!important;
+}
+
+.fc-event.fc-event-draggable.fc-event-start.fc-event-end.fc-daygrid-event,
+.fc-event.fc-event-draggable.fc-event-start.fc-event-end.fc-daygrid-event{
+  padding: 10px 2px !important;
 }
 /* END OF CALENDER STYLE */