Draggable event rendered in wrong position with multiple resources and resource scrolling enabled

[mrzachnugent]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

Minimal reproduction repo

https://github.com/mrzachnugent/calendar-kit-multi-resource-custom-draggable/tree/main

Description

When using CalendarContainer with multiple resources, resource pagination, and resource scrolling enabled, the draggable event is rendered in the wrong position. The draggable event appears shifted from the original event location..

Affected Configuration:

• Multiple resources (more than resourcePerPage)
• resourcePagingEnabled={true}
• enableResourceScroll={true}
• resourcePerPage lower than the length of the resources
• Custom DraggableEvent component (via renderDraggableEvent)

Visual Indicators:
The draggable event in the reproduction has red top and bottom borders to make the misalignment easy to identify.

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2025-12-01.at.12.57.54.mov

Library version

2.5.6

Environment info

info Fetching system and libraries information...
System:
  OS: macOS 26.0
  CPU: (8) arm64 Apple M3
  Memory: 172.39 MB / 24.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 24.10.0
    path: /Users/zach/.nvm/versions/node/v24.10.0/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 11.6.1
    path: /Users/zach/.nvm/versions/node/v24.10.0/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.0
      - iOS 26.0
      - macOS 26.0
      - tvOS 26.0
      - visionOS 26.0
      - watchOS 26.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2025.1 AI-251.25410.109.2511.13752376
  Xcode:
    version: 26.0.1/17A400
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.2
    wanted: latest
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.81.5
    wanted: 0.81.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

info React Native v0.82.1 is now available (your project is running on v0.81.5).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.82.1
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.81.5&to=0.82.1
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".

Steps to reproduce

1. Add multiple resources

const resources = [
  { id: 'room1', title: 'Meeting Room 1' },
  { id: 'room2', title: 'Meeting Room 2' },
  { id: 'room3', title: 'Conference Room' },
  { id: 'room4', title: 'Room 4' },
  { id: 'room5', title: 'Room 5' },
  { id: 'room6', title: 'Room 6' },
  { id: 'room7', title: 'Room 7' },
  { id: 'room8', title: 'Room 8' },
  { id: 'room9', title: 'Room 9' },
  { id: 'room10', title: 'Room 10' },
];

2. Add an event and map the resourceId to an existing resource id

const now = new Date();

const events = [
  {
    id: 'event1',
    title: 'Event 1',
    start: { dateTime: now.toISOString() },
    end: { dateTime: new Date(new Date().setHours(now.getHours() + 1)).toISOString() },
    resourceId: 'room3',
  },
] satisfies EventItem[];

3. Add state for a selectedEvent

 const [selectedEvent, setSelectedEvent] = React.useState<SelectedEventType | undefined>(
    undefined
  );

4. Add a function to unselect the selectedEvent on drag end

 const handleDragEnd = React.useCallback(() => {
    setSelectedEvent(undefined); // Clear the selected event after editing
  }, []);

5. Add a render function for a custom draggable event

  const renderDraggableEvent = React.useCallback(
    (props: DraggableEventProps) => (
      <DraggableEvent
        {...props}
        TopEdgeComponent={
          <View
            style={{
              height: 15,
              backgroundColor: 'red',
              position: 'absolute',
              width: '100%',
            }}>
            <Text style={{ textAlign: 'center', fontSize: 10 }}>Drag</Text>
          </View>
        }
        BottomEdgeComponent={
          <View
            style={{
              height: 15,
              backgroundColor: 'red',
              position: 'absolute',
              bottom: 0,
              width: '100%',
            }}>
            <Text style={{ textAlign: 'center', fontSize: 10 }}>Drag</Text>
          </View>
        }
      />
    ),
    []
  );

6. Map and add the following props to CalendarContainer and to CalendarBody

    <CalendarContainer
        events={events}
        resources={resources}
        resourcePerPage={5}
        resourcePagingEnabled={true}
        enableResourceScroll={true}
        selectedEvent={selectedEvent}
        onLongPressEvent={setSelectedEvent}
        allowDragToEdit={true}
        allowDragToCreate={true}
        onDragSelectedEventEnd={handleDragEnd}>
        <CalendarHeader />
        <CalendarBody renderDraggableEvent={renderDraggableEvent} />
      </CalendarContainer>

7. Longpress or longpress drag and stop pressing to see the custom draggable event move left of the original position of the event.

Reproducible example repository

https://github.com/mrzachnugent/calendar-kit-multi-resource-custom-draggable/tree/main