I am having a calendar view shows all the events for the day, but as soon as i move event to 11:30pm time slot it disappears from calendar

Question

this is my react-big-calender component code why my event of 11:30 got disappears any help would be great, i am getting events details via api from backe-end and i got the starting time for the event and i add

import React, { useState, useEffect } from 'react';
    import { Calendar, momentLocalizer } from 'react-big-calendar';
    import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';
    import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';
    import 'react-big-calendar/lib/css/react-big-calendar.css';
    import { changeAppointment } from '../api';
    
    export default function Calender(props) {
        const { date } = props;
        const { data } = props;
        const localizer = momentLocalizer(moment);
        const DnDCalendar = withDragAndDrop(Calendar);
        const [events, setEvents] = useState([]);
        const { t } = useTranslation();
    
        useEffect(() => {
            let tempEvents = [];
            data.forEach(element => {
                const data = {
                    title: element.patient.name + ', ' + element.patient.phone,
                    id: element.id,
                    start: moment.utc(element.datetime).toDate(),
                    end: moment
                        .utc(element.datetime)
                        .add(25, 'minutes')
                        .toDate()
                };
                tempEvents.push(data);
                setEvents(tempEvents);
            });
        }, [data]);
    
        const onEventResize = data => {
            const { start, end, event } = data;
            const newEvents = [...events];
            newEvents.forEach(existingEvent => {
                if (existingEvent.id === event.id) {
                    existingEvent.start = start;
                    existingEvent.end = end;
                    const info = {
                        id: event.id,
                        datetime: moment.utc(start).format()
                    };
                    changeAppointment(info)
                        .then(info => {
                            console.log(info, 'infooo');
                            if (info) {
                                sendToast(t('AppointmentEdited'));
                            } else {
                                sendErrorToast(t('ErrorMessage'));
                            }
                        })
                        .catch(err => {
                            console.log(err, 'error');
                            sendErrorToast(t('ErrorMessage'));
                        });
                }
            });
            setEvents(newEvents);
        };
    
        const sendToast = message => {
            toast(() => {
                return (
                    <Toaster>
                        <p>{message}</p>
                    </Toaster>
                );
            });
        };
    
        const sendErrorToast = message => {
            toast.error(() => {
                return (
                    <ToasterError>
                        <p>{message}</p>
                    </ToasterError>
                );
            });
        };
    
        return (
            <Box>
                <DnDCalendar
                    formats={{
                        dayHeaderFormat: date => moment(date).format('Do MMM, YYYY')
                    }}
                    localizer={localizer}
                    defaultDate={date}
                    defaultView="day"
                    timeslots={1}
                    view={'day'}
                    views={{
                        day: true
                    }}
                    min={new Date(0, 0, 0, 9, 0, 0)}
                    // max={new Date(0, 0, 0, 23, 30, 0)}
                    events={events}
                    onEventDrop={onEventResize}
                    onEventResize={onEventResize}
                    resizable
                    step={30}
                    selectable={true}
                />
            </Box>
        );
    }

as soon as i move the event to 11:30 time slot it got disappeared, i don't know what is happening any help would be great, i am attaching a gif with thishere i am not able to debug this why this is happening any help or any ideas would be great

Answer 1

I think I understand what you're asking, so I'll try to help you out.

• First, and this is a major point, RBC uses true JS Date objects for all dates. You can absolutely use Moment for manipulation, but when you give it back to RBC it must be a true JS Date object.
• Next, you're using an async call, to update your event, but you're doing setEvents outside of that call, before you have updated data
• Last, you're doing a lot of work in your onEventResize that can be simplified. If I'm reading it all correctly, what you need to do is:
  • Update the event for request
  • Make async call to update remote data
  • Pop your Toast
  • Update your events with your updated event item

// make 'changeAppointment' create your 'info'
const changeAppointment = (updatedEvent) => {
  const { id, start, end } = updatedEvent; // you're not doing anything with the 'end'?
  // Remember, RBC works with true JS Date objects, so its unambiguous by default
  const info = { id, datetime: moment(start).format() }; // again, the 'end'?
  return yourActualAPICallHere(info);
};

// 'event' was the initial event, while 'start' and 'end' represent the new data
const onEventResize = async ({ event, start, end }) => {
  const newEvent = { ...event, start, end }; // brand new 'object' here
  try {
    const updatedEvent = await changeAppointment(newEvent);
    if (updatedEvent) {
      sendToast(t('AppointmentEdited'));
      // assumes this was a useState var
      setEvents((prevEvents) => {
        // get all other events
        const filtered = prevEvents.filter((item) => item.id !== event.id);
        return [...filtered, updatedEvent];
      });
    } else {
      // a throw here will fire the 'catch', even in your example
      throw new Error();
    }
  } catch (err) {
    sendErrorToast(t('ErrorMessage'));
  }
};