I think this question is better suited for a "show" don't tell. So I'll start off with a screenshot of my current design:
I want the times to show between the columns header, is that even possible? I wish do to it statically right now, I have 16 columns. Technically I have 17, but I want the time to appear from the first column line to the last, so like this:
And if there is a way to make the column borders extend to the top a bit, that would be nice too!
Here's my code in JSFiddle: https://jsfiddle.net/zqu3n1jw/1/
Here's the code:
<template>
<div class="calendar">
<!-- Header -->
<div class="calendar__header">
<div class="calendar__header--time">6:00</div>
<div class="calendar__header--time">7:00</div>
<div class="calendar__header--time">8:00</div>
<div class="calendar__header--time">9:00</div>
<div class="calendar__header--time">10:00</div>
<div class="calendar__header--time">11:00</div>
<div class="calendar__header--time">12:00</div>
<div class="calendar__header--time">13:00</div>
<div class="calendar__header--time">14:00</div>
<div class="calendar__header--time">15:00</div>
<div class="calendar__header--time">16:00</div>
<div class="calendar__header--time">17:00</div>
<div class="calendar__header--time">18:00</div>
<div class="calendar__header--time">19:00</div>
<div class="calendar__header--time">20:00</div>
<div class="calendar__header--time">21:00</div>
<div class="calendar__header--time">22:00</div>
</div>
<!-- Body -->
<div class="calendar__body">
<div class="calendar__row" v-for="(activity, index) in activities" :key="index">
<div class="calendar__cell">{{ activity.name }}</div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
</div>
</div>
<!-- Footer -->
<div class="calendar__footer">
<div class="calendar__cell"><span class="calendar__cell--value">TOTAL</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
</div>
</div>
</template>
<style scoped lang="scss" src="./Calendar.scss"></style>
<script lang="ts" src="./Calendar.ts"></script>
Use text-align:center;
and translateX(-50%);
.
Set .calendar__header--time
same width as .calendar__cell
.
Add flex-shrink: 0;
on .calendar__header--time:first-child
and .calendar__cell:first-child
to prevent first col become smaller than 16%.
.calendar__header--time {
padding-top: 10px;
color: lightblue;
width: 6%;
transform: translateX(-50%);
text-align: center;
}
.calendar__header--time:first-child {
width: 16%;
flex-shrink: 0;
}
.calendar__cell:first-child {
width: 16%;
flex-shrink: 0;
justify-content: left;
padding: 0;
}
const {
createApp
} = Vue;
createApp({
data() {
return {
activities: [{
name: "Planning"
},
{
name: "Replenishment"
},
{
name: "Picking"
},
{
name: "Packing"
},
{
name: "Shipping"
},
{
name: "Problem solving"
}
]
};
}
}).mount('#app');
.calendar {
min-height: 100%;
max-width: 100%;
}
.calendar__row {
display: flex;
align-items: stretch;
border-bottom: 1px dashed gray;
}
.calendar__header {
display: flex;
}
.calendar__header--time {
padding-top: 10px;
color: lightblue;
width: 6%;
transform: translateX(50%);
text-align: center;
}
.calendar__cell {
box-sizing: border-box;
flex-grow: 0;
padding: 8px 12px;
overflow: hidden;
list-style: none;
width: 6%;
display: flex;
align-items: center;
justify-content: center;
min-height: 50px;
border-right: 1px solid gray;
}
.calendar__footer {
display: flex;
background-color: #E8E9EB;
}
.calendar__header--time:first-child {
width: 16%;
flex-shrink: 0;
}
.calendar__cell:first-child {
width: 16%;
flex-shrink: 0;
justify-content: left;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.8/vue.global.min.js"></script>
<div id="app" class="calendar">
<!-- Header -->
<div class="calendar__header">
<div class="calendar__header--time">6:00</div>
<div class="calendar__header--time">7:00</div>
<div class="calendar__header--time">8:00</div>
<div class="calendar__header--time">9:00</div>
<div class="calendar__header--time">10:00</div>
<div class="calendar__header--time">11:00</div>
<div class="calendar__header--time">12:00</div>
<div class="calendar__header--time">13:00</div>
<div class="calendar__header--time">14:00</div>
<div class="calendar__header--time">15:00</div>
<div class="calendar__header--time">16:00</div>
<div class="calendar__header--time">17:00</div>
<div class="calendar__header--time">18:00</div>
<div class="calendar__header--time">19:00</div>
<div class="calendar__header--time">20:00</div>
<div class="calendar__header--time">21:00</div>
<div class="calendar__header--time">22:00</div>
</div>
<!-- Body -->
<div class="calendar__body">
<div class="calendar__row" v-for="(activity, index) in activities" :key="index">
<div class="calendar__cell">{{ activity.name }}</div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
<div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
</div>
</div>
<!-- Footer -->
<div class="calendar__footer">
<!-- Footer content here -->
</div>
</div>