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.
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 } }
`
)`
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.