Display event inside a grid for a resource? - css

Question

I am trying to make a scheduler with resources. The biggest challenge for me so far is to create the events as one piece (blue in the sample). Can please someone share what would be the best approach for this task?
Second question: Also I would like to scale this later, by changing the slot step (e.g. in the sample it is a step "by 1" so slots are 1,2,3,4,5.
But later, if I want to change the step e.g. "by 5" 1,5,10...
then let's say we have an even from [7,12] - it should then show from 5-15 etc.
new Vue({
el: "#vue",
data() {
return {
slot: null,
row: null,
events: [
{ row: 1, slots: [ 3, 4 ] },
{ row: 4, slots: [ 3, 9 ] },
],
}
},
methods: {
onSelectSlot (row, slot) {
this.row = row
this.slot = slot
},
}
});
.selected-slot {
#apply bg-purple-600;
}
.selected-row {
#apply bg-green-600;
}
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
<div id="vue" class="p-5 bg-red-800 h-screen">
<div class="flex flex-row w-full h-full overflow-x-scroll">
<div v-for="x in 10" :key="x" class="bg-white w-60">
<div class="bg-blue-400 min-w-full flex flex-col w-full sticky top-0">
<div class="bg-green-400 flex items-center justify-center min-w-full h-10 w-full sticky top-0 shadow z-20 border-2" :class="(row === x) ? 'selected-row' : ''">
Row {{ x }}
</div>
<div v-for="y in 50" :key="y" class="w-60 h-10 border bg-purple-400 cursor-pointer flex items-center px-2 hover:bg-purple-500" :class="(row === x && y === slot) ? 'selected-slot' : ''" #click="onSelectSlot(x, y)">
Slot {{ x + ',' + y }}
<!-- events -->
<div v-for="(event,index) in events" :key="index">
<div v-if="event.row === x && (event.slots[0] <= y && event.slots[1] >= y) " class="bg-blue-500">
Event
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Can please someone help me to display the blue events in this example as one piece?