text: (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[336],{c83d:function(e,n,t){"use strict";t.r(n),n["default"]='<template>\n  <div style="max-width: 800px; width: 100%;">\n    <div class="q-gutter-sm">\n      <q-checkbox\n        v-model="mobile"\n        label="Use Touch (set if on mobile)"\n      />\n    </div>\n    <q-separator />\n    <q-calendar\n      v-model="selectedDate"\n      view="week"\n      animated\n      :interval-minutes="15"\n      :interval-count="96"\n      time-clicks-clamped\n      :selected-start-end-dates="startEndDates"\n      locale="en-us"\n      style="height: 400px;"\n      @mousedown:time2="onMouseDownTime"\n      @mouseup:time2="onMouseUpTime"\n      @mousemove:time2="onMouseMoveTime"\n    />\n  </div>\n</template>\n\n<script>\n// normally you would not import "all" of QCalendar, but is needed for this example to work with UMD (codepen)\nimport QCalendar from \'ui\' // ui is aliased from \'@quasar/quasar-ui-qcalendar\'\n\nfunction leftClick (e) {\n  return e.button === 0\n}\n\nexport default {\n  data () {\n    return {\n      selectedDate: \'\',\n      anchorTimestamp: null,\n      otherTimestamp: null,\n      mouseDown: false,\n      mobile: false\n    }\n  },\n\n  computed: {\n    startEndDates () {\n      const dates = []\n      if (this.anchorDayTimeIdentifier !== false && this.otherDayTimeIdentifier !== false) {\n        if (this.anchorDayTimeIdentifier <= this.otherDayTimeIdentifier) {\n          dates.push(QCalendar.getDateTime(this.anchorTimestamp), QCalendar.getDateTime(this.otherTimestamp))\n        }\n        else {\n          dates.push(QCalendar.getDateTime(this.otherTimestamp), QCalendar.getDateTime(this.anchorTimestamp))\n        }\n      }\n      return dates\n    },\n    anchorDayTimeIdentifier () {\n      if (this.anchorTimestamp !== null) {\n        return QCalendar.getDayTimeIdentifier(this.anchorTimestamp)\n      }\n      return false\n    },\n    otherDayTimeIdentifier () {\n      if (this.otherTimestamp !== null) {\n        return QCalendar.getDayTimeIdentifier(this.otherTimestamp)\n      }\n      return false\n    },\n    lowIdentifier () {\n      // returns lowest of the two values\n      return Math.min(this.anchorDayTimeIdentifier, this.otherDayTimeIdentifier)\n    },\n    highIdentifier () {\n      // returns highest of the two values\n      return Math.max(this.anchorDayTimeIdentifier, this.otherDayTimeIdentifier)\n    }\n  },\n\n  methods: {\n    onMouseDownTime ({ scope, event }) {\n      if (leftClick(event)) {\n        if (this.mobile === true &&\n          this.anchorTimestamp !== null &&\n          this.otherTimestamp !== null &&\n          QCalendar.getDateTime(this.anchorTimestamp) === QCalendar.getDateTime(this.otherTimestamp)) {\n          this.otherTimestamp = scope.timestamp\n          this.mouseDown = false\n          return\n        }\n        // mouse is down, start selection and capture current\n        this.mouseDown = true\n        this.anchorTimestamp = scope.timestamp\n        this.otherTimestamp = scope.timestamp\n      }\n    },\n\n    onMouseUpTime ({ scope, event }) {\n      if (this.mobile !== true && leftClick(event)) {\n        // mouse is up, capture last and cancel selection\n        this.otherTimestamp = scope.timestamp\n        this.mouseDown = false\n      }\n    },\n\n    onMouseMoveTime ({ scope, event }) {\n      if (this.mobile !== true && this.mouseDown === true) {\n        this.otherTimestamp = scope.timestamp\n      }\n    }\n  }\n}\n<\/script>\n'}}]);