WeekDayHeader.vue

<template>

  <div class="ds-day"
    :class="classesDay"
    @mouseenter="mouseEnterDay"
    @mouseleave="mouseLeaveDay"
    @mousemove.stop="mouseMoveDay"
    @mousedown="mouseDownDay"
    @mouseup="mouseUpDay"
    @click.stop="add"
    @dragstart.prevent>

    <div class="ds-week-weekday">
      {{ weekday }}
    </div>

    <a class="ds-week-date"
      @click.stop.prevent="viewDay"
      @mousedown.stop>
      {{ dayOfMonth }}
    </a>

    <div class="ds-all-events">

      <template v-for="(event, i) in visibleEvents">

        <ds-calendar-event
          v-bind="{$scopedSlots}"
          v-on="$listeners"
          :calendar-event="event"
          :key="event.id"
          :index="i"
          :calendar="calendar"
        ></ds-calendar-event>

      </template>

      <div v-if="hasPlaceholder">

        <ds-calendar-event-placeholder
          v-bind="{$scopedSlots}"
          v-on="$listeners"
          :day="day"
          :placeholder="placeholder"
          :placeholder-for-create="placeholderForCreate"
          :calendar="calendar"
          :index="visibleEvents.length"
        ></ds-calendar-event-placeholder>

      </div>

    </div>

  </div>

</template>

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


export default {

  name: 'dsWeekDayHeader',

  props:
  {
    day:
    {
      required: true,
      type: CalendarDay
    },

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

    placeholder:
    {
      type: CalendarEvent
    },

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

    formats:
    {
      validate(x) {
        return this.$dsValidate(x, 'formats');
      },
      default() {
        return this.$dsDefaults().formats;
      }
    }
  },

  computed:
  {
    classesDay()
    {
      return {
        'ds-day-today': this.day.currentDay,
        'ds-day-past': this.day.currentOffset < 0,
        'ds-day-future': this.day.currentOffset > 0
      };
    },

    dayOfMonth()
    {
      return this.day.dayOfMonth;
    },

    weekday()
    {
      return this.day.format( this.formats.weekday );
    },

    hasPlaceholder()
    {
      return this.placeholder &&
        this.placeholder.time.matchesDay( this.day ) &&
        this.placeholder.fullDay;
    },

    visibleEvents()
    {
      return this.day.events.filter( this.isVisible );
    }
  },

  methods:
  {
    isVisible(calendarEvent)
    {
      if (!calendarEvent.fullDay)
      {
        return false;
      }

      if (this.$dayspan.features.hideOnMove &&
          this.placeholder &&
          this.placeholder.event === calendarEvent.event)
      {
        return false;
      }

      return true;
    },

    add()
    {
      this.$emit('add', this.day);
    },

    viewDay(event)
    {
      this.$emit('view-day', this.day);
    },

    mouseEnterDay($event)
    {
      this.$emit('mouse-enter-day', this.day);
    },

    mouseLeaveDay($event)
    {
      this.$emit('mouse-leave-day', this.day);
    },

    mouseMoveDay($event)
    {
      this.$emit('mouse-move-day', this.getEvent('mouse-move-day', $event));
    },

    mouseDownDay($event)
    {
      this.$emit('mouse-down-day', this.getEvent('mouse-down-day', $event));
    },

    mouseUpDay($event)
    {
      this.$emit('mouse-up-day', this.getEvent('mouse-up-day', $event));
    },

    getEvent(type, $event, extra = {})
    {
      return fn.extend({

        type: type,
        day: this.day,
        calendar: this.calendar,
        left: $event.button === 0 && $event.buttons > 0,
        right: $event.button === 1 && $event.buttons > 0,
        handled: false,
        $event: $event,
        $vm: this,
        $element: this.$el

      }, extra);
    }
  }
}
</script>

<style scoped lang="scss">

.ds-day {
  flex: 1 1 auto;
  width: 0;
  border-right: #e0e0e0 1px solid;
  border-bottom: #e0e0e0 1px solid;
  padding: 4px;

  .ds-week-date {
    font-size: 40px;
    line-height: 36px;
    color: black;
    padding-left: 8px;
    user-select: none;

    &:hover {
      text-decoration: underline;
    }
  }

  .ds-all-events {
    margin-top: 8px;
  }

  .ds-week-weekday {
    color: black;
    padding-left: 8px;
    user-select: none;
  }

  &.ds-day-today {
    background-color: rgba(0,0,0,0.04);

    .ds-week-weekday,
    .ds-week-date {
      color: #4285f4;
    }
  }

  &.ds-day-past {

    .ds-week-weekday,
    .ds-week-date {
      color: #9e9e9e;
    }
  }

  &.ds-day-future {

  }
}

</style>