WeekHeader.vue

<template>

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

    <div class="ds-hour-list"></div>

    <template v-for="day in days">

      <ds-week-day-header
        v-bind="{$scopedSlots}"
        v-on="$listeners"
        :day="day"
        :calendar="calendar"
        :placeholder="placeholder"
        :placeholder-for-create="placeholderForCreate"
      ></ds-week-day-header>

    </template>

  </div>

</template>

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

export default {

  name: 'dsWeekHeader',

  props:
  {
    days:
    {
      required: true,
      type: Array
    },

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

    placeholder:
    {
      type: CalendarEvent
    },

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

    scrollPush:
    {
      type: Number,
      default: 0
    }
  },

  computed:
  {
    style()
    {
      return {
        marginRight: this.scrollPush + 'px'
      };
    }
  },

  methods:
  {
  }
}
</script>

<style scoped lang="scss">

.ds-week-header {
  flex: none;
  display: flex;

  .ds-hour-list {
    flex: none;
    width: 44px;
    border-right: #e0e0e0 1px solid;
    // background-color: #fafafa;
  }
}

</style>