We’ve run into an issue where the scheduler calculates an event’s width as 0% with certain values of bufferBefore (either on itself or other trips) that overlap other trips.
We do some custom sorting to make sure we sort by start and end times instead of start times and titles. We then add a value for order on the event based on the index so mobiscroll uses our sort.
Removing the order member and sort does not fix the issue. However, subtracting the bufferBefore value from our start time before comparing two events does. The screenshots are below to compare, along with the resource and event data.
This could come down to user error on our part since we weren’t using bufferBefore to sort, but I don’t thing a custom sort should cause events to have collapsed width or a weird layout.
The floating A comes from some absolutely positioned elements within event component.
Issue:
Resulting styles (Notice width: 0%)
With my fix:
Data from a recreation:
// Resource
[
{
“id”: “0198cee4-730a-89c8-0f98-3d065da48703”,
“assignment”: {
“id”: “0198cee4-730a-89c8-0f98-3d065da48703”,
“start”: “2025-08-26T10:00:00Z”,
“end”: “2025-08-26T23:08:00Z”,
“vehicle”: {
“id”: “01968db9-ae6e-6f77-07c5-e47c9d8cbb0b”,
“nickname”: “007”,
“category”: “ambulatory”,
“tags”:
},
“driver”: {
“id”: “01968dc1-ff38-fb91-907a-1353e5ac6351”,
“assigned_membership”: “0198cee4-731e-af2b-9f14-352ad3903c60”,
“first_name”: “Wellington D”,
“last_name”: “Valdez”,
“phone_number”: “+18133954002”,
“deleted_at”: null,
“driver_deleted_at”: null,
“membership_deleted_at”: null
},
“driver_call_requests”: ,
“status”: “active”,
“attendants”: ,
“breaks”: ,
“clocked_in_at”: “2025-08-26T09:55:12.255000Z”,
“clocked_out_at”: null,
“estimated_revenue”: 66422,
“show_pricing”: true
}
}
]
// Events
[
{
“id”: “0198ce04-7066-2411-69da-b264be629438”,
“start”: “2025-08-26T10:32:49.800000Z”,
“end”: “2025-08-26T11:18:38.296000Z”,
“title”: “ana ana”,
“resource”: “0198cee4-730a-89c8-0f98-3d065da48703”,
“bufferBefore”: 31,
“color”: “#3F4B5A”,
“dragBetweenResources”: false,
“dragInTime”: false,
“dragBetweenSlots”: false,
“order”: 0
},
{
“id”: “0198ce0b-c1e1-3c69-b521-3c9d6f6c95be”,
“start”: “2025-08-26T11:48:58.788000Z”,
“end”: “2025-08-26T12:33:47.873000Z”,
“title”: “rue”,
“resource”: “0198cee4-730a-89c8-0f98-3d065da48703”,
“bufferBefore”: 0,
“color”: “#3F4B5A”,
“dragBetweenResources”: false,
“dragInTime”: false,
“dragBetweenSlots”: false,
“order”: 1
},
{
“id”: “0198ce08-1c25-a507-c16e-39f83a3a874c”,
“start”: “2025-08-26T12:18:02.483000Z”,
“end”: “2025-08-26T12:56:36.719000Z”,
“title”: “green”,
“resource”: “0198cee4-730a-89c8-0f98-3d065da48703”,
“bufferBefore”: 71,
“color”: “#3F4B5A”,
“dragBetweenResources”: false,
“dragInTime”: false,
“dragBetweenSlots”: false,
“order”: 2
},
{
“id”: “0198cdf7-9fdc-01cb-9a00-8c9c6a2c9d8f”,
“start”: “2025-08-26T13:13:27.465000Z”,
“end”: “2025-08-26T13:39:32.309000Z”,
“title”: “gmc”,
“resource”: “0198cee4-730a-89c8-0f98-3d065da48703”,
“bufferBefore”: 51,
“color”: “#3F4B5A”,
“dragBetweenResources”: false,
“dragInTime”: false,
“dragBetweenSlots”: false,
“order”: 3
},
{
“id”: “0198ce04-7523-300f-d1d3-92dd5e9c00d9”,
“start”: “2025-08-26T13:34:58.747000Z”,
“end”: “2025-08-26T14:48:59.354000Z”,
“title”: “ana ana”,
“resource”: “0198cee4-730a-89c8-0f98-3d065da48703”,
“bufferBefore”: 0,
“color”: “#3F4B5A”,
“dragBetweenResources”: false,
“dragInTime”: false,
“dragBetweenSlots”: false,
“order”: 4
},
{
“id”: “0198ce2c-b8c2-7d78-9fca-b660d25743a6”,
“start”: “2025-08-26T14:38:42.734000Z”,
“end”: “2025-08-26T15:41:26.540000Z”,
“title”: “jojo”,
“resource”: “0198cee4-730a-89c8-0f98-3d065da48703”,
“bufferBefore”: 59,
“color”: “#3F4B5A”,
“dragBetweenResources”: false,
“dragInTime”: false,
“dragBetweenSlots”: false,
“order”: 5
},
{
“id”: “0198ce0b-c281-846c-35c1-f6c0ccc7b76c”,
“start”: “2025-08-26T15:18:30.039000Z”,
“end”: “2025-08-26T15:56:13.940000Z”,
“title”: “zen”,
“resource”: “0198cee4-730a-89c8-0f98-3d065da48703”,
“bufferBefore”: 9,
“color”: “#3F4B5A”,
“dragBetweenResources”: false,
“dragInTime”: false,
“dragBetweenSlots”: false,
“order”: 6
},
{
“id”: “0198ccc0-6188-20cd-84d7-b134310d61d7”,
“start”: “2025-08-26T16:07:31.938000Z”,
“end”: “2025-08-26T16:45:40.462000Z”,
“title”: “gin”,
“resource”: “0198cee4-730a-89c8-0f98-3d065da48703”,
“bufferBefore”: 24,
“color”: “#3F4B5A”,
“dragBetweenResources”: false,
“dragInTime”: false,
“dragBetweenSlots”: false,
“order”: 7
},
{
“id”: “clock-in-0198cee4-730a-89c8-0f98-3d065da48703”,
“start”: “2025-08-26T09:55:12.255000Z”,
“end”: “2025-08-26T09:55:12.255000Z”,
“title”: “Clock In”,
“resource”: “0198cee4-730a-89c8-0f98-3d065da48703”,
“assignmentEvent”: {
“type”: “clock-in”
}
}
]