-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Description
I'm using multiple instances of TOAST UI Calendar in a Vue interface.
Each calendar is rendered one below the other, vertically on the same page.
Dragging events works perfectly on the first (topmost) calendar. However, I’m facing a serious issue with auto-scrolling when dragging events in any of the calendars placed further down the page.
When I try to drag an event upwards (to an earlier time) in a lower calendar, the page scrolls in the wrong direction. It behaves as if it's still referencing the scroll bounds of the first calendar at the top of the page.
This means that as soon as my cursor moves above the visible area of the lower calendar, the browser starts auto-scrolling down instead of up, making it impossible to move the event to earlier time slots.
I attempted to disable overflow-y on the calendar containers, so that I could manually scroll using the mouse wheel during drag.
This technically works, but it causes the calendar to display all hours, from the first to the last, without vertical clipping.
This breaks the intended layout: I only want a portion of the calendar to be visible at a time — just like the default behavior with overflow-y: auto.
Is there a way to fix or override the auto-scroll behavior per calendar instance?