Day.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="classesHeader">

      <a class="ds-dom" href
        :class="classesDayOfMonth"
        @click.stop.prevent="viewDay"
        @mousedown.stop>
        {{ dayOfMonth }}
      </a>

      <span class="ds-first-day" v-if="showMonth">
        {{ month }}
      </span>

    </div>

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

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

</template>

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


export default {

  name: 'dsDay',

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

    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-today': this.day.currentDay,
        'ds-first-day-day': this.day.dayOfMonth === 1,
        'ds-out-calendar': !this.day.inCalendar
      };
    },

    classesHeader()
    {
      return {
        'ds-out-calendar': !this.day.inCalendar
      };
    },

    classesDayOfMonth()
    {
      return {
        'ds-today-dom': this.day.currentDay
      };
    },

    showMonth()
    {
      return this.day.dayOfMonth === 1;
    },

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

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

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

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

  methods:
  {
    isVisible(calendarEvent)
    {
      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;
  width: 0;
  border-right: #e0e0e0 1px solid;
  border-bottom: #e0e0e0 1px solid;
  padding: 4px;
  overflow: hidden;
  user-select: none;

  .ds-dom {
    text-decoration: none;
    color: #212121;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    user-select: none;

    &:hover {
      text-decoration: underline;
    }

    &.ds-today-dom {
      border-radius: 12px;
      background-color: #4285f4;
      color: white;
      display: inline-block;
      position: relative;
      z-index: 1;
    }
  }
}

.ds-out-calendar {
  color: #757575;
}

</style>