drag and drop not working with https://github.com/vkurko/calendar

[gc-bianchi]

Current behavior

I am trying to automate a test where a user can drag to create events on a calendar, however I have been pretty unsuccessful in doing so. I've tried using cypress's drag and drop, cypress real events library and 4tw drag and drop library but still cannot get this to work. Any help would be greatly appreciated. There's an online version of the same calendar we're using in our application here for testing: https://vkurko.github.io/calendar/

Desired behavior

I'd like to be able to create an event using cypress.

Test code to reproduce

cypress drag and drop

cy.get(".ec-day.ec-sun")
.find(".ec-extra")
.trigger("mousedown", { which: 1, pageX: 50, pageY: 0, force: true }) // Start within bounds
.trigger("mousemove", { which: 1, pageX: 50, pageY: 100, force: true }) // Move within element's height
.trigger("mouseup", { force: true });

cypress 4tw drag and drop

    cy.get(".ec-day.ec-sun")
      .find(".ec-extra")
      .move({ deltaX: 0, deltaY: 300, force: true });

cypress-real-events

    cy.get(".ec-day.ec-sun")
      .find(".ec-extra")
      .realClick()
      .realMouseDown()
      .realMouseMove(0, 0, { position: "center" })
      .realMouseMove(0, 800, { position: "center" })
      .realMouseUp();

Cypress Version

13.13.1

Node version

v14.19.3

Operating System

macOS 14.4.1

Debug Logs

No response

Other

No response

[jennifer-shehane]

@gc-bianchi I'd recommend checking out our community chat, it can be helpful for debugging or answering questions on how to use Cypress.