jquense / react-big-calendar

gcal/outlook like calendar component
http://jquense.github.io/react-big-calendar/examples/index.html
MIT License
7.6k stars 2.2k forks source link

Horizontal scrolling on drag&drop with resurces #2465

Open digitalw opened 8 months ago

digitalw commented 8 months ago

I have a calendar with many resources, so that I have a horizontal scrollbar. image

If i Scroll all the way to the right an try to drop an event there, the calendar automatically scrolls al the way back to the left.

Here is my Setup:

  <DragAndDropCalendar
              culture={"de"}
              components={components}
              defaultDate={date}
              defaultView={Views.DAY}
              dragFromOutsideItem={
                can_edit_workplan() ? dragFromOutsideItem : null
              }
              eventPropGetter={eventPropGetter}
              events={myEvents}
              localizer={mLocalizer}
              onDropFromOutside={can_edit_workplan() ? onDropFromOutside : null}
              onEventDrop={can_edit_workplan() ? moveEvent : null}
              onDoubleClickEvent={can_edit_workplan() ? onDoubleClick : null}
              resources={rooms}
              resourceTitleAccessor={(resource) => {
                return getLocationHeader(resource);
              }}
              onSelectSlot={can_edit_workplan() ? onSelectSlot : ""}
              handleDragStart={can_edit_workplan() ? setDraggedEvent : null}
              resourceIdAccessor={(resource) => {
                return resource.id;
              }}
              resizable={can_edit_workplan()}
              selectable={can_edit_workplan()}
              step={15}
              views={["day"]}
              toolbar={false}
              timeslots={1}
              startAccessor={(execution) => {
                return getTimeOfTempalteItem(execution);
              }}
              endAccessor={(execution) => {
                return moment(getTimeOfTempalteItem(execution))
                  .add(execution.duration, "m")
                  .toDate();
              }}
              min={new Date(1972, 0, 0, 6, 0, 0)}
              max={new Date(1972, 0, 0, 22, 0, 0)}
              //scrollToTime={timeScroll}
            />

Is there a way to prevent this scrolling behaviour, so that it stays where it was manually scrolled to?

thanks

farouk-root commented 3 weeks ago

same issue here , i think this needs to be fixed