WeeksView.vue

<template>

  <div class="ds-month">

    <div class="ds-week-header">

      <div class="ds-week-header-day"
        v-for="(weekday, i) in weekdays"
        :key="weekday"
        :class="weekdayClasses(i)">

        {{ weekday }}

      </div>

    </div>

    <ds-day-row
      v-for="i in rows"
      v-bind="{$scopedSlots}"
      v-on="$listeners"
      :key="i"
      :days="daysAtRow( i, 7 )"
      :calendar="calendar"
      :placeholder="placeholder"
      :placeholder-for-create="placeholderForCreate"
    ></ds-day-row>

  </div>

</template>

<script>
import { Calendar, CalendarEvent } from 'dayspan';


export default {

  name: 'dsWeeksView',

  props:
  {
    calendar:
    {
      required: true,
      type: Calendar
    },

    placeholder:
    {
      type: CalendarEvent
    },

    placeholderForCreate:
    {
      type: Boolean,
      default: false
    },

    weekdays:
    {
      type: Array,
      default() {
        return this.$dsDefaults().weekdays;
      }
    }
  },

  computed:
  {
    rows()
    {
      return Math.floor( this.calendar.days.length / 7 );
    }
  },

  methods:
  {
    daysAtRow(row, rowSize)
    {
      var start = (row - 1) * rowSize;

      return this.calendar.days.slice( start, start + rowSize );
    },

    weekdayClasses(weekday)
    {
      return {
        'ds-week-header-today': this.$dayspan.today.dayOfWeek === weekday
      };
    }
  }
}
</script>

<style scoped lang="scss">

.ds-month {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: white;

  .ds-week-header {
    display: flex;
    user-select: none;
  }

  .ds-week-header-day {
    flex: 1 0 20px;
    border-right: #e0e0e0 1px solid;
    color: #757575;
    padding: 4px;
    padding-bottom: 0px;

    &.ds-week-header-today {
      color: #4285f4;
      font-weight: 500;
    }
  }
}

</style>