Eventcalendar Drag and Drop feedback

Event calendars & schedulers
1

Hi there.

I’m using the Eventcalendar with a timeline view and on every drag and drop, especially on the vertical ones, there’s little to no feedback when dragging the event inside the table. I’m looking for anything that might highlight the event, a ghost like shadow or anything that would help usability.

Did anyone do something similar?

Thanks!

2

Hello,

If you want to highlight the dragged event with a ghost like shadow, you can use the following custom css rule:

.mbsc-schedule-event-dragging .mbsc-schedule-event-background {
  box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.75);
}

Please let us know if this is what you’ve been looking for.

3

hello and thanks for the reply! this does not apply any styles to my events

4

Sorry to hear that! What framework are you using? Are you using any custom event templating?

5

Screenshot 2024-09-04 at 1.05.02 PM
Screenshot 2024-09-04 at 1.05.02 PM898×864 102 KB

I’m using the event calendar with this configuration

6

so basically i want better feedback for vertical dragging, it has close to none right now as shown in the video.

I’ve tried adding shadows to the dragged event but it didn’t work?

7

Hi,

You are using renderScheduleEvent. In this case there is no .mbsc-schedule-event-background class on the event. It should work with the .mbsc-schedule-event-dragging :

.mbsc-schedule-event-dragging {
  box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.75);
}

Let us know how it goes :wink:

8

this will work with some tweaks! but it still “jumps over” an event if it’s underneath it and the behavior for us should be a bit smoother for us

9

Glad to hear it works! Unfortunately a smoother transition is not possible at the moment. The position of the event during drag is calculated based on which resource row the cursor is and the transitory event is going to stick to the top of the resource row.