-
Notifications
You must be signed in to change notification settings - Fork 436
Description
Description
The issue is with the buffers not being displayed correctly when event’s projected width is close to 0. The buffer width is calculated as a big number having more width than expected. Using "@mobiscroll/react": "5.34.3".
To reproduce
Base on official react event buffers demo example: https://github.com/acidb/mobiscroll-demos-react-ts/blob/main/src/demos/eventcalendar/timeline/event-buffer/event-buffer.tsx,
Set events' bufferAfter or bufferBefore as a long period of time eg. 20160 (two weeks in minutes).
Set view with "year" type and horizontal resoultion eg. { timeline: { type: "year", resolutionHorizontal: "year", size: 3 } }
`
const TWO_WEEKS_IN_MINUTES = 20160;
const myEvents = useMemo<MbscCalendarEvent[]>(
() => [
{
bufferBefore: TWO_WEEKS_IN_MINUTES,
bufferAfter: TWO_WEEKS_IN_MINUTES,
start: "2025-08-29T06:00",
end: "2025-08-29T06:01",
title: "Morning routine",
resource: 1,
},
{
bufferAfter: TWO_WEEKS_IN_MINUTES,
bufferBefore: TWO_WEEKS_IN_MINUTES,
start: "2025-07-24T07:00",
end: "2025-08-24T07:00",
title: "Friends binge marathon",
resource: 2,
},
],
[],
);
const myResources = useMemo<MbscResource[]>(
() => [
{
id: 1,
name: "Resource 1",
color: "#e20000",
},
{
id: 2,
name: "Resource 2",
color: "#76e083",
},
],
[],
);
const myView = useMemo<MbscEventcalendarView>(
() => ({ timeline: { type: "year", resolutionHorizontal: "year", size: 3 } }),
[],
);
return (
<Eventcalendar showEventBuffer={true} data={myEvents} view={myView} resources={myResources} />
)`
Expected behavior
Event buffers should have width corresponding to two weeks time on a scale.
Screenshot

As shown buffers are wider than expected affecting misleading display of the duration.