CalendarEventChip.vue

<template>

  <v-chip label
    :close="canExclude"
    :color="background"
    :text-color="foreground"
    @input="exclude">
    <strong>{{ text }}</strong>
  </v-chip>

</template>

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


export default {

  name: 'dsCalendarEventChip',

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

    day:
    {
      type: Day
    },

    canExclude:
    {
      type: Boolean,
      default() {
        return this.$dsDefaults().canExclude;
      }
    },

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

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

  computed:
  {
    aroundDay()
    {
      return this.day || this.$dayspan.today;
    },

    same()
    {
      return this.aroundDay.sameDay( this.time );
    },

    background()
    {
      return this.same ? this.colors.sameBackground : '';
    },

    foreground()
    {
      return this.same ? this.colors.sameForeground : '';
    },

    text()
    {
      return this.time.format( this.formats.fullDay );
    }
  },

  methods:
  {
    exclude()
    {
      this.$emit('exclude', this.time);
    }
  }
}
</script>

<style lang="scss">

</style>