Kevin Powell - Community•16mo ago

Drag event

how to still show the old location of the event before being dragged to another position in fullcalendar? Here is my code

 <FullCalendar
 eventDragStart={(info) => {
            
            setIsMoving(true);
            setEventHover({ event: undefined });
          }}
eventDrop={handleEventDrop}
          eventDragStop={handleDragLeave}
/FullCalendar>

 <FullCalendar
 eventDragStart={(info) => {
            
            setIsMoving(true);
            setEventHover({ event: undefined });
          }}
eventDrop={handleEventDrop}
          eventDragStop={handleDragLeave}
/FullCalendar>

1 Reply

MissingOP•16mo ago

here is the function

const result = await getEvent(info.oldEvent.id);

    if (
      info.oldEvent._def.resourceIds &&
      info.event._def.resourceIds &&
      info.oldEvent._def.resourceIds[0] !== info.event._def.resourceIds[0]
    ) {
      result.data.resourceId = Number(info.event._def.resourceIds[0]);
      result.data.practitionerId = Number(info.event._def.resourceIds[0]);
      if (result.data.resourceName) delete result.data.resourceName;
      if (result.data.practitionerFirstname)
        delete result.data.practitionerFirstname;
      if (result.data.practitionerLastname) delete result.data.resourceName;
    }

    if (result.data?.rrule && Number(result.data?.hasRecurrEvents) === 1) {
      setModalProp({
        ...modalProp,
        show: true,
        children: (
          <ModalConfirm
            eventChange={{
              ...result.data,
              start: dayjs(info.event.start).format("YYYY-MM-DD HH:mm:ss"),
              end: dayjs(info.event.end).format("YYYY-MM-DD HH:mm:ss"),
            }}
            setModalProp={setModalProp}
            param={param}
            setParam={setParam}
            isAll={
              info.event.start?.getDate() !== info.oldEvent.start?.getDate()
            }
          />
        ),
      });
    }

const result = await getEvent(info.oldEvent.id);

    if (
      info.oldEvent._def.resourceIds &&
      info.event._def.resourceIds &&
      info.oldEvent._def.resourceIds[0] !== info.event._def.resourceIds[0]
    ) {
      result.data.resourceId = Number(info.event._def.resourceIds[0]);
      result.data.practitionerId = Number(info.event._def.resourceIds[0]);
      if (result.data.resourceName) delete result.data.resourceName;
      if (result.data.practitionerFirstname)
        delete result.data.practitionerFirstname;
      if (result.data.practitionerLastname) delete result.data.resourceName;
    }

    if (result.data?.rrule && Number(result.data?.hasRecurrEvents) === 1) {
      setModalProp({
        ...modalProp,
        show: true,
        children: (
          <ModalConfirm
            eventChange={{
              ...result.data,
              start: dayjs(info.event.start).format("YYYY-MM-DD HH:mm:ss"),
              end: dayjs(info.event.end).format("YYYY-MM-DD HH:mm:ss"),
            }}
            setModalProp={setModalProp}
            param={param}
            setParam={setParam}
            isAll={
              info.event.start?.getDate() !== info.oldEvent.start?.getDate()
            }
          />
        ),
      });
    }

else {
      if (info.jsEvent.shiftKey) {
        delete result.data?.id;
        delete result.data?.eventId;

        if (result.data?.reminders && result.data?.reminders.length > 0) {
          result.data.reminders = result.data?.reminders?.map((reminder) => {
            return {
              ...reminder,
              id: 0,
            };
          });
        }
        await saveAgenda({
          ...result.data,
          start: dayjs(info.event.start).format("YYYY-MM-DD HH:mm:ss"),
          end: dayjs(info.event.end).format("YYYY-MM-DD HH:mm:ss"),
        });
      } else {
        await saveAgenda({
          ...result.data,
          start: dayjs(info.event.start).format("YYYY-MM-DD HH:mm:ss"),
          end: dayjs(info.event.end).format("YYYY-MM-DD HH:mm:ss"),
        });
      }
      await reload();
    }
  };

else {
      if (info.jsEvent.shiftKey) {
        delete result.data?.id;
        delete result.data?.eventId;

        if (result.data?.reminders && result.data?.reminders.length > 0) {
          result.data.reminders = result.data?.reminders?.map((reminder) => {
            return {
              ...reminder,
              id: 0,
            };
          });
        }
        await saveAgenda({
          ...result.data,
          start: dayjs(info.event.start).format("YYYY-MM-DD HH:mm:ss"),
          end: dayjs(info.event.end).format("YYYY-MM-DD HH:mm:ss"),
        });
      } else {
        await saveAgenda({
          ...result.data,
          start: dayjs(info.event.start).format("YYYY-MM-DD HH:mm:ss"),
          end: dayjs(info.event.end).format("YYYY-MM-DD HH:mm:ss"),
        });
      }
      await reload();
    }
  };

and also here

 const handleDragLeave = (info: EventDragStopArg) => {
   
    const calendarEl = calendarWrapRef.current;
    if (
      calendarEl &&
      info.jsEvent.offsetX > calendarEl?.offsetLeft + calendarEl?.offsetWidth &&
      info.jsEvent.offsetY > window.innerHeight * 0.7
    ) {
      const result = eventData.filter(
        (event) => event.id === Number(info.event.id)
      );
      setMovingEvent(result[0]);
    }
  };

 const handleDragLeave = (info: EventDragStopArg) => {
   
    const calendarEl = calendarWrapRef.current;
    if (
      calendarEl &&
      info.jsEvent.offsetX > calendarEl?.offsetLeft + calendarEl?.offsetWidth &&
      info.jsEvent.offsetY > window.innerHeight * 0.7
    ) {
      const result = eventData.filter(
        (event) => event.id === Number(info.event.id)
      );
      setMovingEvent(result[0]);
    }
  };

Gaming

Programming

Drag event