Skip to content

Buffers width issue with short duration events. #534

@pieczarkaniesmacznosci

Description

@pieczarkaniesmacznosci

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

Image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions