MERMS/MermsPanelReactJS
1
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

fixing calendar issues

Browse Source
This commit is contained in:
victorAnumudu
2024-12-18 17:41:10 +01:00
parent bd28971de0
commit 592229b172
2 changed files with 18 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/calendar/Calendar.jsx
+10 -4
View File
@@ -8,11 +8,17 @@ export default function Calendar(){
const [draggedEvent, setDraggedEvent] = useState('undroppable') const [draggedEvent, setDraggedEvent] = useState('undroppable')
const handleDragStart = useCallback((event) => setDraggedEvent(event), []) const handleDragStart = useCallback((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 = [ 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: '1', title: 'Family Vacation', color: 'fc-event-primary', isAllDay: false},
{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: '2', title: 'Meeting In Office', color: 'fc-event-warning', isAllDay: false},
{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: '3', title: 'Client Call', color: 'fc-event-danger', isAllDay: false},
{id: '4', title: 'Interview', color: 'fc-event-success', start: new Date('2024-12-21'), end: new Date('2024-12-21'), isAllDay: false, resource: ''} {id: '4', title: 'Interview', color: 'fc-event-success', isAllDay: false}
] ]
return( return(
src/component/calendar/EventCalendar.jsx
+8 -15
View File
@@ -11,20 +11,12 @@ const localizer = dayjsLocalizer(dayjs)
const DnDCalendar = withDragAndDrop(Calendar) const DnDCalendar = withDragAndDrop(Calendar)
export default function EventCalendar({draggedEvent, setDraggedEvent}) { export default function EventCalendar({draggedEvent, setDraggedEvent}) {
const myEventsList = [ const myEventsList = []
// {
// title: 'title',
// start: new Date('2024-12-18'),
// end: new Date('2024-12-18'),
// isAllDay: false,
// }
]
const [myEvents, setMyEvents] = useState(myEventsList) const [myEvents, setMyEvents] = useState(myEventsList)
const moveEvent = useCallback( const moveEvent = useCallback(
({ event, start, end, isAllDay: droppedOnAllDaySlot = false }) => { ({ event, start, end, isAllDay: droppedOnAllDaySlot = false }) => {
const { isAllDay } = event // const { isAllDay } = event
// if (!allDay && droppedOnAllDaySlot) { // if (!allDay && droppedOnAllDaySlot) {
// event.allDay = true // event.allDay = true
// } // }
@@ -35,13 +27,12 @@ export default function EventCalendar({draggedEvent, setDraggedEvent}) {
setMyEvents((prev) => { setMyEvents((prev) => {
const existing = prev.find((ev) => ev.id === event.id) ?? {} const existing = prev.find((ev) => ev.id === event.id) ?? {}
const filtered = prev.filter((ev) => ev.id !== event.id) const filtered = prev.filter((ev) => ev.id !== event.id)
return [...filtered, { ...existing, start, end, allDay: event.allDay }] // return [...filtered, { ...existing, start, end, allDay: event.allDay }]
// return [...prev, { ...event, start, end, allDay: event.allDay }] return [...prev]
}) })
}, },
[setMyEvents] [setMyEvents]
) )
const [displayDragItemInCell, setDisplayDragItemInCell] = useState(true) const [displayDragItemInCell, setDisplayDragItemInCell] = useState(true)
@@ -77,7 +68,8 @@ export default function EventCalendar({draggedEvent, setDraggedEvent}) {
setMyEvents((prev) => { setMyEvents((prev) => {
const idList = prev.map((item) => item.id) const idList = prev.map((item) => item.id)
const newId = Math.max(...idList) + 1 const newId = Math.max(...idList) + 1
return [...prev, { ...event, id: newId }] // return [...prev, { ...event, id: newId }]
return [...prev, { ...event}]
}) })
}, },
[setMyEvents] [setMyEvents]
@@ -90,12 +82,13 @@ export default function EventCalendar({draggedEvent, setDraggedEvent}) {
return return
} }
const { title } = draggedEvent const { title, id } = draggedEvent
const event = { const event = {
title: title, title: title,
start, start,
end, end,
isAllDay, isAllDay,
id
} }
setDraggedEvent(null) setDraggedEvent(null)
newEvent(event) newEvent(event)