[Calendar] Calendar events with exactly the same start and end times do not cover each other
YannLynn opened this issue · comments
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