text: (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[297],{8134:function(n,e,t){"use strict";t.r(e),e["default"]="<template>\n  <div style=\"max-width: 800px; width: 100%;\">\n    <q-calendar\n      v-model=\"selectedDate\"\n      view=\"day-resource\"\n      bordered\n      sticky\n      :resources=\"resources\"\n      :resource-height=\"50\"\n      locale=\"en-us\"\n      class=\"calendar-container\"\n      style=\"height: 200px; max-width: 800px; width: 100%;\"\n    >\n      <template #resource-intervals=\"scope\">\n        <template v-if=\"scope.resource.events && scope.resource.events.length > 0\">\n          <template v-for=\"(event, index) in scope.resource.events\">\n            <template v-if=\"event.date === scope.intervals[0][0].date\">\n              <q-badge\n                v-if=\"event.time\"\n                :key=\"index\"\n                :class=\"badgeClasses(event, 'body')\"\n                :style=\"badgeStyles(event, 'body', scope.timeStartPosX, scope.timeDurationWidth)\"\n              >\n                <q-icon v-if=\"event.icon\" :name=\"event.icon\" class=\"q-mr-xs\" /><span class=\"ellipsis\">{{ event.title }}</span>\n              </q-badge>\n            </template>\n          </template>\n        </template>\n      </template>\n    </q-calendar>\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\nconst CURRENT_DAY = new Date()\n\nfunction getCurrentDay (day) {\n  const newDay = new Date(CURRENT_DAY)\n  newDay.setDate(day)\n  const tm = QCalendar.parseDate(newDay)\n  return tm.date\n}\n\nconst reRGBA = /^\\s*rgb(a)?\\s*\\((\\s*(\\d+)\\s*,\\s*?){2}(\\d+)\\s*,?\\s*([01]?\\.?\\d*?)?\\s*\\)\\s*$/\n\nfunction textToRgb (color) {\n  if (typeof color !== 'string') {\n    throw new TypeError('Expected a string')\n  }\n\n  const m = reRGBA.exec(color)\n  if (m) {\n    const rgb = {\n      r: Math.min(255, parseInt(m[2], 10)),\n      g: Math.min(255, parseInt(m[3], 10)),\n      b: Math.min(255, parseInt(m[4], 10))\n    }\n    if (m[1]) {\n      rgb.a = Math.min(1, parseFloat(m[5]))\n    }\n    return rgb\n  }\n  return hexToRgb(color)\n}\n\nfunction hexToRgb (hex) {\n  if (typeof hex !== 'string') {\n    throw new TypeError('Expected a string')\n  }\n\n  hex = hex.replace(/^#/, '')\n\n  if (hex.length === 3) {\n    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]\n  }\n  else if (hex.length === 4) {\n    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3]\n  }\n\n  const num = parseInt(hex, 16)\n\n  return hex.length > 6\n    ? { r: num >> 24 & 255, g: num >> 16 & 255, b: num >> 8 & 255, a: Math.round((num & 255) / 2.55) }\n    : { r: num >> 16, g: num >> 8 & 255, b: num & 255 }\n}\n\nfunction luminosity (color) {\n  if (typeof color !== 'string' && (!color || color.r === undefined)) {\n    throw new TypeError('Expected a string or a {r, g, b} object as color')\n  }\n\n  const\n    rgb = typeof color === 'string' ? textToRgb(color) : color,\n    r = rgb.r / 255,\n    g = rgb.g / 255,\n    b = rgb.b / 255,\n    R = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4),\n    G = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4),\n    B = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4)\n  return 0.2126 * R + 0.7152 * G + 0.0722 * B\n}\n\nexport default {\n  data () {\n    return {\n      selectedDate: '',\n      resources: [\n        {\n          label: 'John',\n          events: [\n            {\n              title: '1st of the Month',\n              details: 'Everything is funny as long as it is happening to someone else',\n              date: getCurrentDay(1),\n              bgcolor: 'orange'\n            },\n            {\n              title: 'Sisters Birthday',\n              details: 'Buy a nice present',\n              date: getCurrentDay(4),\n              bgcolor: 'green',\n              icon: 'fas fa-birthday-cake'\n            },\n            {\n              title: 'Meeting',\n              details: 'Time to pitch my idea to the company',\n              date: getCurrentDay(CURRENT_DAY.getDate()),\n              time: '10:00',\n              duration: 120,\n              bgcolor: 'red',\n              icon: 'fas fa-handshake'\n            },\n            {\n              title: 'Lunch',\n              details: 'Company is paying!',\n              date: getCurrentDay(CURRENT_DAY.getDate()),\n              time: '12:00',\n              duration: 90,\n              bgcolor: 'teal',\n              icon: 'fas fa-hamburger'\n            },\n            {\n              title: 'Visit mom',\n              details: 'Always a nice chat with mom',\n              date: getCurrentDay(20),\n              time: '17:00',\n              duration: 90,\n              bgcolor: 'blue-grey',\n              icon: 'fas fa-car'\n            },\n            {\n              title: 'Conference',\n              details: 'Teaching Javascript 101',\n              date: getCurrentDay(22),\n              time: '08:00',\n              duration: 540,\n              bgcolor: 'blue',\n              icon: 'fas fa-chalkboard-teacher'\n            },\n            {\n              title: 'Girlfriend',\n              details: 'Meet GF for dinner at Swanky Restaurant',\n              date: getCurrentDay(22),\n              time: '19:00',\n              duration: 180,\n              bgcolor: 'teal',\n              icon: 'fas fa-utensils'\n            },\n            {\n              title: 'Fishing',\n              details: 'Time for some weekend R&R',\n              date: getCurrentDay(22),\n              bgcolor: 'purple',\n              icon: 'fas fa-fish',\n              days: 2\n            },\n            {\n              title: 'Vacation',\n              details: 'Trails and hikes, going camping! Don\\'t forget to bring bear spray!',\n              date: getCurrentDay(29),\n              bgcolor: 'purple',\n              icon: 'fas fa-plane',\n              days: 5\n            }\n          ]\n        },\n        { label: 'Mary' },\n        { label: 'Susan' },\n        { label: 'Olivia' },\n        { label: 'Board Room' },\n        { label: 'Room-1' },\n        { label: 'Room-2' }\n      ]\n    }\n  },\n  computed: {\n    // convert the events into a map of lists keyed by date\n    eventsMap () {\n      const map = {}\n      this.events.forEach((event) => (map[event.date] = map[event.date] || []).push(event))\n      return map\n    }\n  },\n\n  methods: {\n    isCssColor (color) {\n      return !!color && !!color.match(/^(#|(rgb|hsl)a?\\()/)\n    },\n\n    badgeClasses (event, type) {\n      const cssColor = this.isCssColor(event.bgcolor)\n      return {\n        [`text-white bg-${event.bgcolor}`]: !cssColor\n      }\n    },\n\n    badgeStyles (event, type, timeStartPosX, timeDurationWidth) {\n      const s = {}\n      s.position = 'absolute'\n      if (this.isCssColor(event.bgcolor)) {\n        s['background-color'] = event.bgcolor\n        s.color = luminosity(event.bgcolor) > 0.5 ? 'black' : 'white'\n      }\n      if (timeStartPosX) {\n        s.left = timeStartPosX(event.time) + 'px'\n      }\n      if (timeDurationWidth) {\n        s.width = timeDurationWidth(event.duration) + 'px'\n      }\n      s['align-items'] = 'flex-start'\n      return s\n    }\n  }\n}\n<\/script>\n"}}]);