Event Drag Shadow displaying in wrong Resource Column

Asked by Anonymous
6 years ago.

When I drag and event on the calendar the shadow highlight is highlighting the wrong resource column.
This is at the day view for multiple resources.
It seems to change column when your mouse is half way through the column to the right.

You can see in the attachment, the highlight to the "Right" is where the mouse cursor is, and the darker highlight on the "Left" is where the event will end up.

This is how it is setup:
@Html.DayPilotCalendar("dp", new DayPilotCalendarConfig
{
BackendUrl = Url.Action("ViewCalendarDay", "Home"),

ViewType = ViewType.Resources,
HeaderLevels = 2,
TimeFormat = DayPilot.Web.Mvc.Enums.TimeFormat.Clock12Hours,
TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.JavaScript,
TimeRangeSelectedJavaScript = "CreateCalendarItem(start, end, resource)",
TimeRangeDoubleClickHandling = TimeRangeDoubleClickHandlingType.JavaScript,
TimeRangeDoubleClickJavaScript = "CreateAppointment(start, end, resource)",
EventDeleteHandling = EventDeleteHandlingType.JavaScript,
EventDeleteJavaScript = "DeleteCalendarItem(e)",
EventClickHandling = EventClickHandlingType.Select,
AllowMultiSelect = false,
EventSelectJavaScript = "VerifyEventSelect(e)",
EventSelectHandling = EventSelectHandlingType.JavaScript,
EventDoubleClickHandling = EventDoubleClickHandlingType.JavaScript,
EventDoubleClickJavaScript = "OpenServiceActivity(e)",
EventMoveHandling = EventMoveHandlingType.JavaScript,
EventMoveJavaScript = "EventMoveUpdate(e, newStart, newEnd, newResource, external, ctrl, shift)",
EventResizeHandling = EventResizeHandlingType.JavaScript,
EventResizeJavaScript = "EventResize(e, newStart, newEnd)",
//ContextMenuSelection = "menu_selection",
CellSelectColor = "#f2f2f2",
//Width = "100%",
ColumnWidthSpec = DayPilot.Web.Mvc.Enums.Calendar.ColWidthSpec.Fixed,
ColumnWidth = 200,
//ColumnMarginRight = 100,
CellDuration = 15,
ShowToolTip = true,
EventArrangement = DayPilot.Web.Mvc.Enums.Calendar.ArrangementType.SideBySide,
HeaderHeight = 60,
UseEventBoxes = DayPilot.Web.Mvc.Enums.UseBoxes.Never,
HeightSpec = DayPilot.Web.Mvc.Enums.Calendar.HeightSpec.Fixed,
Height = 880,
Crosshair = DayPilot.Web.Mvc.Enums.Calendar.CrosshairType.Disabled
})

Version: 2018.1.5936.0

bug mvc

daypilot-err1.png

daypilot-err2.png

Comment posted by Dan Letecky [DayPilot]
6 years ago.

This looks like a CSS problem. As you can see, the "Test Note" and "Another" events only take one half of the column width. They should use the all available width as there is no overlapping event.

It looks like the column width is changed using CSS and this also confuses the position calculation.

Comment posted by Anonymous
6 years ago.

Thanks Dan,
I've had a thorough look through all the code and CSS that is being applied to the events.
I have found that "left: 50%" and "width:50%" is being set when EventArrangement = ArrangementType.SideBySide. And "left:25%", "width:75%" is being set when EventArrangement = ArrangementType.Full.
These values are on the element (not by our code), and not by any css class. Neither of these settings are changing the calculation.

I've done further looking and noticed that when dragging in the first resource column the switch over is at about 130%. Which means the next column (for calculations) starts 30% into the column, and ends 60% through the following column; as you can see this gets out of hand the further to the right you go.

The only place I can find where a width is being set is
Width = "100%",
ColumnWidthSpec = DayPilot.Web.Mvc.Enums.Calendar.ColWidthSpec.Fixed,
ColumnWidth = 200,
in the creation of DayPilotCalendar. Even if I remove this and have it set as defaults the breakpoints for dragging stay the same.

I'm sure there's a setup issue somewhere, I will keep looking but if you have any other ideas or guidance on what to look for please let me know.

Comment posted by Dan Letecky [DayPilot]
6 years ago.

Thanks for the update.

The left and width style attributes applied to the event are probably correct but then the question is where the concurrent/overlapping event is (as I don't see it in the screenshot).

Can you please try to disable the global CSS temporarily (or place the control on a blank page) to see if it affects the behavior?

When checking the styles using browser developer tools, you can try to look at the parent of the event divs (the parent should match the column, it defines the boundaries).

Answer posted by Anonymous
6 years ago.

Thanks Dan!
We have found the issue.

There was a hidden "body { zoom: 80% }" in one of the libraries we used.
Removing this solved the problem, and now we can make the correct changes to make everything the same size as it was before.

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.

Event Drag Shadow displaying in wrong Resource Column

Products

Learn

Get Support

DayPilot Pro