[Calendar] Calendar events with exactly the same start and end times do not cover each other

[YannLynn]

Is there an existing issue for this?

• I have searched the existing issues

Which Component

Calendar

Semi Version

latest

Current Behavior

Calendar 起止时间完全相同的事件互相遮盖
Calendar events with exactly the same start and end times cover each other

20240801162336_rec_.mp4

Expected Behavior

Calendar 起止时间完全相同的事件不互相遮盖
Calendar events with exactly the same start and end times do not cover each other

Steps To Reproduce

import React from 'react';
import { Calendar, DatePicker, RadioGroup, Radio } from '@douyinfe/semi-ui';

class Demo extends React.Component {
constructor() {
super();
this.state = {
mode: 'week',
displayValue: new Date(2019, 6, 23, 8, 32, 0),
};
}

onSelect(e) {
    this.setState({
        mode: e.target.value,
    });
}

onChangeDate(e) {
    this.setState({
        displayValue: e,
    });
}

render() {
    const { mode, displayValue } = this.state;
    const isMonthView = mode === 'month';
    const dailyEventStyle = {
        borderRadius: '3px',
        boxSizing: 'border-box',
        border: 'var(--semi-color-primary) 1px solid',
        padding: '10px',
        backgroundColor: 'var(--semi-color-primary-light-default)',
        height: '100%',
        overflow: 'hidden',
    };
    const allDayStyle = {
        borderRadius: '3px',
        boxSizing: 'border-box',
        border: 'var(--semi-color-bg-1) 1px solid',
        padding: '2px 4px',
        backgroundColor: 'var(--semi-color-primary-light-active)',
        height: '100%',
        overflow: 'hidden',
    };
    const dailyStyle = isMonthView ? allDayStyle : dailyEventStyle;
    const events = [
        {
            key: '1',
            start: new Date(2019, 6, 23, 8, 32, 0),
            end: new Date(2019, 6, 23, 8, 42, 0),
            children: <div style={dailyStyle}>7月23日 8:32</div>,
        },
        {
            key: '2',
            start: new Date(2019, 6, 23, 8, 32, 0),
            end: new Date(2019, 6, 23, 8, 42, 0),
            children: <div style={dailyStyle}>7月23日 8:32</div>,
        },
        {
            key: '3',
            start: new Date(2019, 6, 23, 14, 30, 0),
            end: new Date(2019, 6, 23, 20, 0, 0),
            children: <div style={dailyStyle}>7月23日 14:30-20:00</div>,
        },

    ];
    return (
        <>
            <RadioGroup onChange={e => this.onSelect(e)} value={mode} type="button">
                <Radio value={'day'}>日视图</Radio>
                <Radio value={'range'}>多日视图</Radio>
            </RadioGroup>
            <br />
            <br />
            <DatePicker value={displayValue} onChange={e => this.onChangeDate(e)} />
            <br />
            <br />
            <Calendar
                height={400}
                mode={mode}
                displayValue={displayValue}
                events={events}
                minEventHeight={40}
                range={mode === 'range' ? [new Date(2019, 6, 23), new Date(2019, 6, 26)] : []}
            ></Calendar>
        </>
    );
}

}

ReproducibleCode

No response

Environment

- OS:
- browser:

Anything else?

No response