vue-slot-calendar

[ demo here ]

Installation

First install the package

npm install --save vue-slot-calendar

Then import it and use it

import VueSlotCalendar from 'vue-slot-calendar'

<template>
	<vue-slot-calendar :minHour=8 :maxHour=22 :gap=2 v-model="selectedSlots" />
</template>
<script>
export  default {
  name: 'app',
  components: {
    VueSlotCalendar
  },
  data: () => ({
    selectedSlots: []
  })
}
</script>

Usage

Props:

| prop | type | default | description | |--|--|--|---| | v-model | Array [Object] | [] | all selected slots with informations | | hours | Array [Number] | undefined | hours range/ticks, ex: [8, 10, 12, 14] | | minHour | Number | undefined | first hour of the range | | maxHour | Number | undefined | last hour of the range | | gap | Number | undefined | gap of the range | | svgPaths | Object {String} | {} | 'sun', 'city', 'sky1', 'sky2' keys for custom svg at background | | timeSeed | Number | undefined (now) | unix() milliseconds to set beggining date of the calendar | | noDisabled | Boolean | false | prevent locking past hours | | disableHours | Number | 2 | the next hours that are locked | | formatCell | Function | (slot, windowWidth) => slot.startDate | string displayed in cells | | formatDays | Function | (strDayOfWeek, windowWidth) => ... | string displayed for day names | | formatHours | Function | (hour, windowWidth) => ${hour}:00- | string displayed for hours |

You have to set either hours or minHour/maxHour/gap, required.