text: (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[279],{"427b":function(n,e,t){"use strict";t.r(e),e["default"]="<template>\n  <div class=\"row justify-center full-width q-pa-md\">\n    <q-calendar\n      ref=\"calendar\"\n      v-model=\"selectedDate\"\n      view=\"day-resource\"\n      :resources=\"resources\"\n      :resource-height=\"50\"\n      :locale=\"locale\"\n      sticky\n      bordered\n      style=\"height: 200px; max-width: 800px; width: 100%;\"\n    >\n      <template #resource-header=\"scope\">\n        <div class=\"my-resource-header\">\n          {{ showDate(scope) }}\n        </div>\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\nexport default {\n  data () {\n    return {\n      selectedDate: getCurrentDay(CURRENT_DAY.getDate()),\n      locale: 'en-us',\n      resources: [\n        { label: 'John' },\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\n  methods: {\n    showDate (scope) {\n      if (scope.date) {\n        const date = new Date(scope.date)\n        return this.monthFormatter().format(date)\n      }\n      return ''\n    },\n\n    monthFormatter () {\n      try {\n        return new Intl.DateTimeFormat(this.locale || undefined, {\n          day: '2-digit',\n          month: 'long',\n          year: 'numeric',\n          timeZone: 'UTC'\n        })\n      }\n      catch (e) {\n        //\n      }\n    }\n  }\n}\n<\/script>\n\n<style lang=\"sass\" scoped>\n.my-resource-header\n  display: flex\n  flex-direction: row\n  flex: 1\n  justify-content: center\n  align-items: center\n  position: relative\n  font-size: 10px\n  font-weight: 700\n</style>\n"}}]);