skip to Main Content

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:

enter image description here

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:

enter image description here

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>

2

Answers


  1. 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>
    Login or Signup to reply.
  2. Based on what you are trying to achieve, I would rather use a table which will handle most of the layout for you.

    Adding just a translate 50% on the header will give you the expected rendering:

    th {
      translate: 50%;
    }
    td {
      border: 1px solid rgb(160 160 160);
      padding: 1rem 2rem;
    }
    <table>
      <thead>
        <tr>
          <th>6:00</th>
          <th>7:00</th>
        </tr>
      </thead>
      <tr>
        <td>planning</td>
        <td>cool</td>
        <td>cool</td>
      </tr>
      <tr>
        <td>problem solving</td>
        <td>cool</td>
        <td>cool</td>
      </tr>
    </table>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search