Calendar.vue

<template>
<div id="calendar">
    <table id="calendarTable">
        <thead :draggable="dragEnabled.value" @dragstart="startDrag($event, row, col)" @dragend.prevent="stopDrag()">
          <!-- Generating first header of schema -->
          <tr>
              <th id="calendarHead" colspan="6">
              <div id="headerDiv">
                <div>  
                  <button id="leftButton" @click="prevWeek()"> &larr; </button>
                </div>
                <div v-if="schedule.length == 5">
                  Uge: {{getWeek(today)}} - {{getMonthName(today.getMonth())}}
                </div>
                <div>
                  <button id="rightButton" @click="nextWeek()"> &rarr; </button>
                </div>
              </div>
            </th>
          </tr>
          <tr>
            <!-- Empty cell to make monday move 1 cell left -->
            <th></th>
            <!-- Generating weekday names and month number-->
            <template v-if="schedule.length == 1">
              <th :colspan="colSpanValue" v-for="(n,i) in schedule" :key="i">
                {{getMonthName(today.getMonth())}} uge {{getWeek(today)}} - {{weekDays[today.getDay()-1]}} {{today.getDate()}}.
              </th>
            </template>
            <!-- Generate a single day, if size is too small -->
            <template v-else>
              <th :colspan="colSpanValue" v-for="(n,i) in schedule" :key="i">
                {{weekDays[i]}} - {{getDateOfISOWeek(getWeek(today), today.getFullYear(), i).getDate()}}
              </th>
            </template>
          </tr>
        </thead>
        <tbody>
          <!-- Generating time rows -->
          <tr v-for="(time,i) in time" :key="time" >
            <td>{{time}}</td>
            <!-- Generating schema based on first row-->
            <template v-if="firstIndex(i)">
              <td :colspan="colSpanValue" 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 :colspan="colSpanValue" v-for="n in schedule" :key="n"></td>
            </template>
          </tr>
        </tbody>
    </table>
</div>
</template>

<script>
export default {
  name: 'Cal',

  props: ['row', 'col'],

  inject: [ 'dragEnabled', 'startDrag', 'stopDrag' ],

  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}}
      ],
      scheduleDay:[
        {a: {name: "Exsys", start: 2*6, stop: 2*8}}
      ],
      
      // 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],
      colSpanValue: [1],
      calendarDayWidth: [400],

      // 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: {
    // Calculate how many days a movement in the calendar should be
    // forward: boolean - whether the move is forward or not, changes
    //                    the calculate on friday and monday
    daysToAdd (forward){
      // If in week view, move 7 days
      if(this.schedule.length != 1){
        return 7;
      }

      // If in day view and at friday or monday
      // The calendar should move 3 days
      if((this.today.getDay() == 5 && forward) || (this.today.getDay() == 1 && !forward)){
        return 3;
      }

      // Neither week view nor friday or monday
      return 1;
    },

    // Move the date back based on calendar view
    prevWeek(){
      const currentYear = this.today.getFullYear();
      const currentMonth = this.today.getMonth();
      const dayToMoveCalendarBackTo = this.today.getDate() - this.daysToAdd(false);
      this.today = new Date(currentYear, currentMonth, dayToMoveCalendarBackTo);
      this.changeSchedule();
      this.updateDaysInDisplay();
    },

    // Move the date forward based on calendar view
    nextWeek(){
      const currentYear = this.today.getFullYear();
      const currentMonth = this.today.getMonth();
      const dayToMoveCalendarForwardTo = this.today.getDate() + this.daysToAdd(true);
      this.today = new Date(currentYear, currentMonth, dayToMoveCalendarForwardTo);
      this.changeSchedule();
      this.updateDaysInDisplay();
    },

    // 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];
    },

    // Update the vertical size of events within the calendar
    updateHalfHourSize(){
      const tbody = document.getElementById("calendar").getElementsByTagName("tbody")[0];
      this.halfHourSpace = (parseInt(window.getComputedStyle(tbody).height)/(2*9));
    },

    // Update the amount of days in the display
    // Therefor changes form week to day view
    updateDaysInDisplay(){
      const calendar = document.getElementById("calendar");
      if(parseInt(calendar.clientWidth) < this.calendarDayWidth){
        if(this.schedule.length == 5){
          this.colSpanValue = 5;
          const day = this.schedule[this.today.getDay() - 1];
          this.scheduleDay[0] = day;
          this.schedule = this.scheduleDay;
          const buttons = calendar.getElementsByTagName("button");
          for (let i = 0; i < buttons.length; i++) {
            const element = buttons[i];
            element.style.width = 40 + "px";
          }
        }
      }else{
        this.colSpanValue = 1;
        this.schedule = this.scheduleWeek12;
        this.changeSchedule();
        const buttons = calendar.getElementsByTagName("button");
        for (let i = 0; i < buttons.length; i++) {
          const element = buttons[i];
            element.style.width = 60 + "px";
          }
      }
      this.updateHalfHourSize();
    },

    // Initilized the current day on mount of calendar
    initToday(){
      const firstDayOfWeek = this.getDateOfISOWeek(this.getWeek(this.today), this.today.getFullYear(),0).getDate();
      const lastDayOfWeek = this.getDateOfISOWeek(this.getWeek(this.today), this.today.getFullYear(),4).getDate();
      const isCurrentDayAfterFriday = this.today.getDate() > lastDayOfWeek;
      const isCurrentDayBeforeMonday = this.today.getDate() < firstDayOfWeek;
      if(isCurrentDayAfterFriday || isCurrentDayBeforeMonday){
        while(this.today.getDate() < lastDayOfWeek){
          const currentYear = this.today.getFullYear();
          const currentMonth = this.today.getMonth();
          const dayToInitCalendarTo = this.today.getDate() - 1;
          this.today = new Date(currentYear, currentMonth, dayToInitCalendarTo);
        }
      }
    }
  },

  mounted(){
    this.initToday();
    this.updateHalfHourSize();
    this.updateDaysInDisplay();
    new ResizeObserver(() => this.updateDaysInDisplay()).observe(document.getElementById("calendar"));
  }
}
</script>

<style lang="scss" scoped>

  table{
    width: 100%;
    height: 100%;
    border-collapse: collapse;

    thead{
      border: 0;
      pointer-events: none;

      tr{
        &:first-of-type{
          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;
        padding: 1px;        
      }

    }
    
    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-of-type{
        width: 10%;
      }

      &: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{
      &:first-child td{
        border-top: none;
      }

      &:last-child td{
        border-bottom: none;
      }

      td:last-child {
        border-right: 0;
      }

      td:first-child {
        border-left: 0;
        padding: 0 3px 0 3px;
      }
    }

    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;
    }
  }
  
  #leftButton, #rightButton {
    pointer-events: auto;
  }

  #rightButton{
    float: right;
    margin-right: 55px;
  }

  #leftButton{
    float: left;
    margin-left: 55px;
  }

  #headerDiv{
    display: flex;

    div{
      flex-grow: 20;
    }

    div+div{
      &:not(:last-of-type){
        flex-grow: 60;
      }
    }
  }

  #skematd{
    position: relative;
    vertical-align: top;
    
    div{
      overflow: hidden;
    }
  }
  
  #calendar{
    min-width: 250px;
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    overflow: auto;
  }

  #calendarHead{
    width: 100%;
    padding: 0;

    div{
      margin: 0;
      line-height: 28px;

      button{
        width: 60px;
      }
    }
  }

  @media only screen and (min-width: $mobile-width-cutoff) {
    thead {
      cursor: move;
      pointer-events: auto !important;
    }
  }
</style>