Eventcalendar (React) external dropping of event that already has a time and scrolling to that event

Event calendars & schedulers
1

We have a calendar of trips with resources they are assigned to. Next to it is a list of unassigned trips. It’s basically the same setup as React Scheduler External d&d presets Example | Mobiscroll except our external events already have set start and end times and it is a single day/multi-resource calendar view.

Setting up drag and drop was a breeze thanks to Mobiscroll. Props for that.

However, I’ve had some difficulty in getting the calendar to scroll to the event when the drag enters the calendar.

First, I attempted to set the selectedDate to the event’s start time. (I also attempted setting refDate separately and together).

Second, I tried scrolling to the target of the onDragEventEnter handler’s domEvent. This didn’t work since that scrolls to where the cursor is and not where the event actually is.

Third, I tried setting the scroll position of the element with “mbsc-schedule-grid-scroll” class to the top of my custom trip event element. This worked but seemed wonky.

Finally, I realized I could add an id to my custom event element and use scrollIntoView. This worked once I wrapped it in a timeout which also feels wonky.

Another idea I had was to scroll to the nearest time element.

But, I’d rather let Mobiscroll manage all the scrolling if possible, so wanted to ask the community for ideas. Here’s the basic setup I have for the component

<Eventcalendar
          ref={calendarRef}
          theme="ios"
          themeVariant="light"
          view={view}
          data={events.length > 0 ? events : [{ id: 1, resource: 1 }]}
          resources={resources.length > 0 ? resources : undefined}
          invalid={invalids}
          renderHeader={renderHeader}
          renderResource={renderResource}
          renderScheduleEvent={renderEvent}
          width="100%"
          selectedDate={getMobiscrollSelectedDate(selectedDate)}
          refDate={getMobiscrollSelectedDate(selectedDate)}
          dataTimezone="utc"
          timezonePlugin={luxonTimezone}
          displayTimezone={currentOrganizationHeadQuarters?.time_zone_name}
          showEventBuffer
          dragToMove={dragAndDropConfig.dragToMove}
          onEventUpdated={onEventUpdated}
          onEventDragEnd={(newEvent) => {
            // manage some external drag state
          }}
          onEventDragEnter={(newEvent) => {
            setTimeout(() => {
              const newEventElement = document.querySelector(
                `#event-${newEvent.event.id}`
              );

              newEventElement?.scrollIntoView({
                behavior: 'smooth',
                block: 'center',
              });
            }, 50);
          }}
          onEventCreated={async (newEvent) => {
            // persist event via api
          }}
        />

An important part of our use case is that if the user is viewing today, we scroll to the current time in the calendar. If they are viewing the past or future, we default to midnight. We use selected date to do this.