Calendar.vue

<template>
<div id="calendar">
    <table>
        <thead>
          <!-- Generating first header of schema -->
          <tr>
            <th>
              <div>
                <button id="offSizeButton" @click="prevWeek()"> &larr; </button>
              </div>
            </th>
            <th colspan="4">Uge: {{getWeek(today)}} - {{getMonthName(today.getMonth())}}</th>
            <th>
              <div>
                <button @click="nextWeek()"> &rarr; </button>
              </div>
            </th>
          </tr>
          <!-- Empty cell to make monday move 1 cell left -->
          <th></th>
          <!-- Generating weekday names and month number-->
          <th v-for="(day,i) in weekDays" :key="day">
              {{day}} - {{getDateOfISOWeek(getWeek(today), today.getFullYear(), i).getDate()}}
          </th>
        </thead>
        <tbody>
          <!-- Generating time rows -->
          <tr v-for="(time,i) in time" :key="time" :style="{height: halfHourSpace*2 + 'px'}">
            <td>{{time}}</td>
            <!-- Generating schema based on first row-->
            <template v-if="firstIndex(i)">
              <td id="skematd"  v-for="day in schedule" :key="day">
                  <!-- Adding and calculatings divs for each task, offset form the first row -->
                  <a href="/about">
                    <div v-for="task in day" :key="task" 
                    :style="{height: (task.stop-0.25-task.start)*halfHourSpace + 'px', top: task.start*halfHourSpace + 'px'}">
                      {{task.name}}
                    </div>
                  </a>
              </td>
            </template>
            <!-- All other rows than the first are empty, but full of cells -->
            <template v-else>
              <td v-for="n in 5" :key="n"></td>
            </template>
          </tr>
        </tbody>
    </table>
</div>
</template>

<script>
export default {
  name: 'Cal',
  data() {
    return {
      // Currently showing schema data
      schedule: [
        {a: {name: "Exsys", start: 2*6, stop: 2*8}},
        {a: {name: "CompArk", start: 2*2, stop: 2*4}, b: {name: "Numla", start: 2*4, stop: 2*6}},
        {a: {name: "Numla TØ", start: 2*3, stop: 2*5}, b:{name: "Exsys", start: 2*6, stop: 2*7}},
        {a: {name: "CompArk", start: 2*2, stop: 2*4}, b:{name: "Numla", start: 2*4, stop: 2*6}, c:{name: "Exsys TØ", start: 2*6, stop: 2*9}},
        {a: {name: "CompArk TØ", start: 0, stop: 2*3}}
      ],
      
      // Dummy data for week 12 
      scheduleWeek12: [
        {a: {name: "Exsys", start: 2*6, stop: 2*8}},
        {a: {name: "CompArk", start: 2*2, stop: 2*4}, b: {name: "Numla", start: 2*4, stop: 2*6}},
        {a: {name: "Numla TØ", start: 2*3, stop: 2*5}, b:{name: "Exsys", start: 2*6, stop: 2*7}},
        {a: {name: "CompArk", start: 2*2, stop: 2*4}, b:{name: "Numla", start: 2*4, stop: 2*6}, c:{name: "Exsys TØ", start: 2*6, stop: 2*9}},
        {a: {name: "CompArk TØ", start: 0, stop: 2*3}}
      ],

      // Dummy data for week 14 (Monday is a day off in this week)
      scheduleWeek14: [
        {},
        {a: {name: "CompArk", start: 2*2, stop: 2*4}, b: {name: "Numla", start: 2*4, stop: 2*6}},
        {a: {name: "Numla TØ", start: 2*3, stop: 2*5}, b:{name: "Exsys", start: 2*6, stop: 2*7}},
        {a: {name: "CompArk", start: 2*2, stop: 2*4}, b:{name: "Numla", start: 2*4, stop: 2*6}, c:{name: "Exsys TØ", start: 2*6, stop: 2*9}},
        {a: {name: "CompArk TØ", start: 0, stop: 2*3}}
      ],
      
      // Dummy data for an empty week
      scheduleEmpty: [
        {},{},{},{},{}
      ],

      // Time intervals, each time segment is contained in a single tr in the table
      time: ["8:00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00"],
      
      // the size of an half hour of time in the schema
      halfHourSpace: [19],

      // Names of all month, used in the schema header
      monthName: ["January", "Februar", "Marts", "April", "Maj", "Juni",
                    "Juli", "August", "September", "Oktober", "November", "December"
                    ],

      // Shorthands of names of weekday, used in the schema header
      weekDays: ["Man", "Tirs", "Ons", "Tors", "Fre"],

      // The current date the schema is showing. This is changed on each movement of schema
      today: new Date()
    }
  },
  methods: {
    // Move the date 7 days back
    prevWeek(){
      this.today = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate() - 7);
      this.changeSchedule();
    },

    // Move the date 7 days forward
    nextWeek(){
      this.today = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate() + 7);
      this.changeSchedule();
    },

    // Changes the schedule to the current week, is invoked each time the date is changed
    changeSchedule(){
      const week = this.getWeek(this.today);
      if(week == "12"){this.schedule=this.scheduleWeek12}
      else if(week == "13"){
        this.schedule = this.scheduleEmpty;
      }
      else if(week == "14"){
        this.schedule=this.scheduleWeek14;
      }
      else if(week < 6 || week > 20){
        this.schedule=this.scheduleEmpty;
      }
      else{this.schedule = this.scheduleWeek12}
    },

    // Check for first index in a loop
    firstIndex(index){
      return index === 0
    },

    // Source: https://stackoverflow.com/questions/6117814/get-week-of-year-in-javascript-like-in-php
    // Calculate the ISO week, of the current date. Used to show week number
    getWeek(day) {
      var date = new Date(day.getTime());
      date.setHours(0, 0, 0, 0);
      date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);
      var week1 = new Date(date.getFullYear(), 0, 4);
      return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000
                      - 3 + (week1.getDay() + 6) % 7) / 7);
    },

    // Source: Stackexchange - lost link in battle
    // Calculate the first day of a iso week in a given year
    // Used to calculate the datenumber for the schema header
    getDateOfISOWeek(w, y, offset) {
      var simple = new Date(y, 0, 1 + (w - 1) * 7);
      var dow = simple.getDay();
      var ISOweekStart = simple;
      if (dow <= 4) {
        ISOweekStart.setDate(simple.getDate() - simple.getDay() + 1);
      }
      else {
        ISOweekStart.setDate(simple.getDate() + 8 - simple.getDay());
      }
      ISOweekStart.setDate(ISOweekStart.getDate() + offset)
      return ISOweekStart;
    },

    // Returns the month name of a given month number
    getMonthName(month){
      return this.monthName[month];
    }
  }
}
</script>

<style lang="scss" scoped>

  table{
    width: 100%;
    position: absolute;
    border-collapse: collapse;

    thead{
      border: 0;
      padding: 0;
      height: 100%;

      tr{
        height: 37px;

        th{
          height: 28px;
          font-size: 106%;
          box-sizing: border-box;
          vertical-align: middel;
        }

        div{
          height: 28px;
          vertical-align: middle;
          margin-bottom: 4px;
        }
      }

      th{
        background-color: $theme-color;
        color: $lightest-theme-color;
        width: 16.6666%;
        padding: 1px;
        &:first-of-type{
          width: 7%;
        }
        
      }

    }
    
    tbody tr{
      margin: 0px;
      padding: 0px;
    }
  
    td{
      vertical-align: top;
      border:1px solid rgb(185, 185, 185);
      padding: 0;
      align-items: center;
      vertical-align: middle;

      &:first-child{
        background-color: $theme-color;
        color: $lightest-theme-color;
      }
      a:hover{
        color: $text-color;
      }

      div{
        background-color: $light-theme-color+af;
        position: absolute;
        offset-position: 0 0;
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
        box-sizing: border-box;
        box-shadow: 1px 1px 2px;
        padding-top: 5px;
        &:hover{
          box-shadow: 1px 1px 6px;
        }
      }
    }
    
    tr{
      td:last-child {
        border-right: 0;
      }

      td:first-child {
        border-left: 0;
      }
    }

    button{
      cursor: pointer;
      border: 0;
      border-radius: 3px;
      box-sizing: border-box;
      width: 50%;
      height: 100%;
      font-size: 125%;
      background-color: $dark-theme-color;
      color: $lightest-theme-color;
      vertical-align: bottom;
      display: inline-block;
      padding-bottom: 11px;
      padding-top: 0px;
      box-sizing: border-box;
      box-shadow: 1px 1px 3px black;
    }

    #offSizeButton{
      width: 122%;
      margin-left: 60%;
    }
  }

  #skematd{
    position: relative;
    vertical-align: top;
  }
  
  #calendar{
    min-width: 250px;
    width: 100%;
    height: 100%;
    position: relative;
    //overflow: auto;
    box-sizing: content-box;
  }
</style>