Problem with the last time Slot (drag and drop)

[FelipeGaraycochea]

Hello,
My problem is that when i try to move the event to the last slot, this one won't let me do that.
Anybody know what's happen ?

[christianpatrick]

I've run into this issue before as well. The reason is because when you drag a 30 minute event from the 11:00PM slot to the 11:30PM slot, it technically is trying to change the event to be 11:30PM to 12:00AM (of the same day) which is impossible.

One workaround could be to change the slots to a bigger limit like 1 hour.

[FelipeGaraycochea]

I've run into this issue before as well. The reason is because when you drag a 30 minute event from the 11:00PM slot to the 11:30PM slot, it technically is trying to change the event to be 11:30PM to 12:00AM (of the same day) which is impossible.

One workaround could be to change the slots to a bigger limit like 1 hour.

I try this, but the problem still happen. thanks anyways.

[christianpatrick]

@FelipeGaraycochea, if you're able to throw up a general code sample of what you have, I'd be happy to peek at it with you.

[FelipeGaraycochea]

thanks.
i got this:

This is my return:

    <DnDCalendar
      selectable
      defaultView="day"
      views={["day"]}
      step={60}
      style={{ height: "100vh" }}
      timeslots={1}
      events={events}
      localizer={localizer}
      resizable
      onEventDrop={moveEvent}
      onEventResize={onEventResize}
      onSelectSlot={onSelectSlot}
      onDragStart={onDragStart}
      eventPropGetter={eventStyleGetter}
      onSelectEvent={onSelectEvent}
      components={{
        event: EventComponent
      }}
    />

here are the functions:

const moveEvent = ({ event, start, end }) => {
   console.log("moveEvent");
   const idx = events.indexOf(event);
   const updatedEvent = { ...event, start, end };
   console.log(event);
   console.log(updatedEvent);
   const nextEvents = [...events];
   nextEvents.splice(idx, 1, updatedEvent);
   setEvents(nextEvents);
 };


 const onEventResize = ({ event, start, end }) => {
   console.log(start, end);
   const idx = events.indexOf(event);
   const updatedEvent = { ...event, start, end };
   //console.log(event);
   //console.log(updatedEvent);
   const nextEvents = [...events];
   nextEvents.splice(idx, 1, updatedEvent);
   setEvents(nextEvents);
};

 const onSelectSlot = ({ start, end, action, slots }) => {
 
   console.log("onSelectSlot");
   let startHour = moment(start).format("hh:mm a");
   let endHour = moment(end).format("hh:mm a");
   console.log(startHour + " - " + endHour);
   setEvents([
     ...events,
     {
       start: start,
       end: end,
       title: "",
     }
   ]);
}


const eventStyleGetter = (event, start, end, isSelected) => {
   /* console.log(event, start, end, isSelected); */
   /**this is part of the UX Bug fix */
   if (event.hide) {
     return { style: { display: "none" } };
   }
   return { className: style.event_style };
 };

here is the EventComponent :

const EventComponent = ({ event }) => {
  let startHour = moment(event.start).format("hh:mm a");
  let endHour = moment(event.end).format("hh:mm a");
  return (
    <div className={`align-middle ${style.conten_Event}`}>
      <div style={{ margin: "auto 0" }}>
        <h6>{event.title}</h6>
        <div>
          <FiClock />
          <span>
            {startHour} - {endHour}
          </span>
          <FaUsers style={{ marginLeft: "1em" }} />
          <span>Cantidad: {event.cantidad}</span>
        </div>
      </div>
    </div>
  );
};

im using hooks:

  const [events, setEvents] = useState([
    { start: new Date(), end: new Date(), title: "Bug Fix", hide: true}
  ]);

thank you very much.

[christianpatrick]

@FelipeGaraycochea, I had some time to put a fix together on this for you.

If you add a conditional check inside of your moveEvent function that looks for events that are end of day, you can force the end time to change to 11:59 instead of 12:00am of the following day.

Here's a code example:

if (moment(start).format("HH:mm") > "22:59") {
	end = moment(end).set({
		"day": moment(start).get("day"),
		"hour": "23",
		"minute": "59",
	}).toDate()
}

Then the output would look like this:

I hope this helps!