Skip to content

Auto-scroll on drag uses wrong bounds when using multiple stacked TOAST UI Calendar instances #1471

@ernald06

Description

@ernald06

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions