Я делаю дневную строку в календаре со многими событиями. Некоторые события могут происходить одновременно с другими. Если это так, я бы хотел, чтобы события имели общую ширину строки.
Как это можно сделать без установки внешнего контейнера? Я не хочу устанавливать внешний контейнер, потому что тогда мне нужно будет l oop пройти через все события и сгруппировать их.
Вместо этого я просто хотел бы дать им реквизит, чтобы стиль был таким :
grid-row: 10 / 14
Я использую React, поэтому упрощенный компонент для этого примера выглядит следующим образом:
const Slots = styled.div`
background: #eee;
height: calc(100vh - 35px);
display: grid;
grid-template-rows: repeat(48, auto [slot]);
grid-template-columns: 100%;
grid-gap: 0px 10px;
padding-left: 5px;
padding-right: 5px;
`;
const Event = styled.div`
background-color: ${props => props.color ? props.color : "yellow"};
grid-row: ${props => props.start} / ${props => props.end};
border-radius: 3px;
`;
export default () => {
return (
<Day index={1}>
<Slots>
<Event start={6} end={9}>An event at 06 am - 09 am</Event>
<Event color="red" start={6} end={7}>An event at 06 am - 07 am</Event>
<Event start={10} end={14}>An event at 10 am - 2 pm</Event>
</Slots>
</Day>
)
}
В настоящее время это результат для событий в тех же строках:
