text: (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[171],{d221:function(e,n,r){"use strict";r.r(n),n["default"]="<template>\n  <div style=\"max-width: 800px; width: 100%;\">\n    <div class=\"full-width\">\n      <q-select\n        outlined\n        dense\n        emit-value\n        map-options\n        label=\"Change theme\"\n        v-model=\"theme\"\n        :options=\"themesList\"\n        class=\"col-12\"\n      ></q-select>\n    </div>\n    <q-separator></q-separator>\n    <q-calendar\n      v-model=\"selectedDate\"\n      view=\"week-agenda\"\n      enable-theme\n      :theme=\"theme\"\n      locale=\"en-us\"\n      style=\"height: 400px;\"\n    >\n      <template #day-body=\"{ timestamp }\">\n        <template v-for=\"(agenda) in getAgenda(timestamp)\">\n          <div\n            :key=\"timestamp.date + agenda.time\"\n            :label=\"agenda.time\"\n            class=\"justify-start q-ma-sm shadow-5 bg-grey-6\"\n          >\n            <div v-if=\"agenda.avatar\" class=\"row justify-center\" style=\"margin-top: 30px; width: 100%;\">\n              <q-avatar style=\"margin-top: -25px; margin-bottom: 10px; font-size: 60px; max-height: 50px;\">\n                <img :src=\"agenda.avatar\" style=\"border: #9e9e9e solid 5px;\">\n              </q-avatar>\n            </div>\n            <div class=\"col-12 q-px-sm\">\n              <strong>{{ agenda.time }}</strong>\n            </div>\n            <div v-if=\"agenda.desc\" class=\"col-12 q-px-sm\" style=\"font-size: 10px;\">\n              {{ agenda.desc }}\n            </div>\n          </div>\n        </template>\n      </template>\n    </q-calendar>\n  </div>\n</template>\n\n<script>\nexport default {\n  data () {\n    return {\n      selectedDate: '',\n      theme: {\n        name: 'default'\n      },\n      themes: [\n        {\n          name: 'default'\n        },\n        {\n          name: 'dark',\n          // body\n          colorBody: 'grey-2',\n          backgroundBody: 'blue-grey-8',\n          colorBodyOutside: 'grey-6',\n          backgroundBodyOutside: 'blue-grey-9',\n          colorBodyPast: 'grey-11',\n          backgroundBodyPast: 'blue-grey-10',\n          colorBodyCurrent: 'blue-grey-2',\n          backgroundBodyCurrent: 'blue-grey-10',\n          colorBodyFuture: 'blue-grey-2',\n          backgroundBodyFuture: 'blue-grey-10',\n          // header - weekly only\n          colorHeader: 'blue-grey-2',\n          backgroundHeader: 'blue-grey-10',\n          colorHeaderOutside: 'blue-grey-2',\n          backgroundHeaderOutside: 'blue-grey-10',\n          // header - for daily only\n          colorHeaderPast: 'grey-11',\n          backgroundHeaderPast: 'blue-grey-10',\n          colorHeaderCurrent: 'blue-grey-2',\n          backgroundHeaderCurrent: 'blue-grey-10',\n          colorHeaderFuture: 'blue-grey-2',\n          backgroundHeaderFuture: 'blue-grey-10',\n          // work week - monthly only\n          colorWorkWeekPast: 'blue-grey-8',\n          backgroundWorkWeekPast: 'blue-grey-6',\n          colorWorkWeekCurrent: 'orange-4',\n          backgroundWorkWeekCurrent: 'blue-grey-10',\n          colorWorkWeekFuture: 'yellow-4',\n          backgroundWorkWeekFuture: 'blue-grey-10',\n          // label\n          colorDayLabelOutside: 'blue-grey-2',\n          backgroundDayLabelOutside: 'blue-grey-9',\n          colorDayLabelPast: 'yellow-4',\n          backgroundDayLabelPast: 'blue-grey-10',\n          colorDayLabelCurrent: 'orange-4',\n          backgroundDayLabelCurrent: 'blue-grey-10',\n          colorDayLabelFuture: 'yellow-4',\n          backgroundDayLabelFuture: 'blue-grey-10',\n          // interval body\n          colorIntervalHeader: 'grey-2',\n          backgroundIntervalHeader: 'blue-grey-10',\n          colorIntervalBody: 'grey-2',\n          backgroundIntervalBody: 'blue-grey-10',\n          colorIntervalText: 'grey-2',\n          backgroundIntervalText: 'blue-grey-10',\n          // scheduler body\n          colorSchedulerHeader: 'grey-2',\n          backgroundSchedulerHeader: 'blue-grey-10',\n          colorSchedulerBody: 'grey-2',\n          backgroundSchedulerBody: 'blue-grey-10',\n          colorSchedulerText: 'grey-2',\n          backgroundSchedulerText: 'blue-grey-10'\n        },\n        {\n          name: 'teal',\n          // body\n          colorBody: 'grey-2',\n          backgroundBody: 'teal-8',\n          colorBodyOutside: 'grey-6',\n          backgroundBodyOutside: 'teal-9',\n          colorBodyPast: 'grey-11',\n          backgroundBodyPast: 'teal-10',\n          colorBodyCurrent: 'teal-2',\n          backgroundBodyCurrent: 'teal-10',\n          colorBodyFuture: 'teal-2',\n          backgroundBodyFuture: 'teal-10',\n          // header - weekly only\n          colorHeader: 'teal-2',\n          backgroundHeader: 'teal-10',\n          colorHeaderOutside: 'teal-2',\n          backgroundHeaderOutside: 'teal-10',\n          // header - for daily only\n          colorHeaderPast: 'grey-11',\n          backgroundHeaderPast: 'teal-10',\n          colorHeaderCurrent: 'teal-2',\n          backgroundHeaderCurrent: 'teal-10',\n          colorHeaderFuture: 'teal-2',\n          backgroundHeaderFuture: 'teal-10',\n          // work week - monthly only\n          colorWorkWeekPast: 'teal-8',\n          backgroundWorkWeekPast: 'teal-6',\n          colorWorkWeekCurrent: 'orange-4',\n          backgroundWorkWeekCurrent: 'teal-10',\n          colorWorkWeekFuture: 'yellow-4',\n          backgroundWorkWeekFuture: 'teal-10',\n          // label\n          colorDayLabelOutside: 'teal-2',\n          backgroundDayLabelOutside: 'teal-9',\n          colorDayLabelPast: 'yellow-4',\n          backgroundDayLabelPast: 'teal-10',\n          colorDayLabelCurrent: 'orange-4',\n          backgroundDayLabelCurrent: 'teal-10',\n          colorDayLabelFuture: 'yellow-4',\n          backgroundDayLabelFuture: 'teal-10',\n          // interval body\n          colorIntervalHeader: 'grey-2',\n          backgroundIntervalHeader: 'teal-10',\n          colorIntervalBody: 'grey-2',\n          backgroundIntervalBody: 'teal-10',\n          colorIntervalText: 'grey-2',\n          backgroundIntervalText: 'teal-10',\n          // scheduler body\n          colorSchedulerHeader: 'grey-2',\n          backgroundSchedulerHeader: 'teal-10',\n          colorSchedulerBody: 'grey-2',\n          backgroundSchedulerBody: 'teal-10',\n          colorSchedulerText: 'grey-2',\n          backgroundSchedulerText: 'teal-10'\n        },\n        {\n          name: 'brown',\n          // body\n          colorBody: 'brown-2',\n          backgroundBody: 'brown-8',\n          colorBodyOutside: 'grey-6',\n          backgroundBodyOutside: 'brown-9',\n          colorBodyPast: 'grey-11',\n          backgroundBodyPast: 'brown-10',\n          colorBodyCurrent: 'brown-2',\n          backgroundBodyCurrent: 'brown-10',\n          colorBodyFuture: 'brown-2',\n          backgroundBodyFuture: 'brown-10',\n          // header - weekly only\n          colorHeader: 'brown-2',\n          backgroundHeader: 'brown-10',\n          colorHeaderOutside: 'brown-2',\n          backgroundHeaderOutside: 'brown-10',\n          // header - for daily only\n          colorHeaderPast: 'grey-11',\n          backgroundHeaderPast: 'brown-10',\n          colorHeaderCurrent: 'brown-2',\n          backgroundHeaderCurrent: 'brown-10',\n          colorHeaderFuture: 'brown-2',\n          backgroundHeaderFuture: 'brown-10',\n          // work week - monthly only\n          colorWorkWeekPast: 'brown-8',\n          backgroundWorkWeekPast: 'brown-6',\n          colorWorkWeekCurrent: 'orange-4',\n          backgroundWorkWeekCurrent: 'brown-10',\n          colorWorkWeekFuture: 'yellow-4',\n          backgroundWorkWeekFuture: 'brown-10',\n          // label\n          colorDayLabelOutside: 'brown-2',\n          backgroundDayLabelOutside: 'brown-9',\n          colorDayLabelPast: 'yellow-4',\n          backgroundDayLabelPast: 'brown-10',\n          colorDayLabelCurrent: 'orange-4',\n          backgroundDayLabelCurrent: 'brown-10',\n          colorDayLabelFuture: 'yellow-4',\n          backgroundDayLabelFuture: 'brown-10',\n          // interval body\n          colorIntervalHeader: 'grey-2',\n          backgroundIntervalHeader: 'brown-10',\n          colorIntervalBody: 'grey-2',\n          backgroundIntervalBody: 'brown-10',\n          colorIntervalText: 'grey-2',\n          backgroundIntervalText: 'brown-10',\n          // scheduler body\n          colorSchedulerHeader: 'grey-2',\n          backgroundSchedulerHeader: 'brown-10',\n          colorSchedulerBody: 'grey-2',\n          backgroundSchedulerBody: 'brown-10',\n          colorSchedulerText: 'grey-2',\n          backgroundSchedulerText: 'brown-10'\n        },\n        {\n          name: 'deep purple',\n          // body\n          colorBody: 'grey-2',\n          backgroundBody: 'deep-purple-8',\n          colorBodyOutside: 'grey-6',\n          backgroundBodyOutside: 'deep-purple-9',\n          colorBodyPast: 'grey-11',\n          backgroundBodyPast: 'deep-purple-10',\n          colorBodyCurrent: 'deep-purple-2',\n          backgroundBodyCurrent: 'deep-purple-10',\n          colorBodyFuture: 'deep-purple-2',\n          backgroundBodyFuture: 'deep-purple-10',\n          // header - weekly only\n          colorHeader: 'deep-purple-2',\n          backgroundHeader: 'deep-purple-10',\n          colorHeaderOutside: 'deep-purple-2',\n          backgroundHeaderOutside: 'deep-purple-10',\n          // header - for daily only\n          colorHeaderPast: 'grey-11',\n          backgroundHeaderPast: 'deep-purple-10',\n          colorHeaderCurrent: 'deep-purple-2',\n          backgroundHeaderCurrent: 'deep-purple-10',\n          colorHeaderFuture: 'deep-purple-2',\n          backgroundHeaderFuture: 'deep-purple-10',\n          // work week - monthly only\n          colorWorkWeekPast: 'deep-purple-8',\n          backgroundWorkWeekPast: 'deep-purple-6',\n          colorWorkWeekCurrent: 'orange-4',\n          backgroundWorkWeekCurrent: 'deep-purple-10',\n          colorWorkWeekFuture: 'yellow-4',\n          backgroundWorkWeekFuture: 'deep-purple-10',\n          // label\n          colorDayLabelOutside: 'deep-purple-2',\n          backgroundDayLabelOutside: 'deep-purple-9',\n          colorDayLabelPast: 'yellow-4',\n          backgroundDayLabelPast: 'deep-purple-10',\n          colorDayLabelCurrent: 'orange-4',\n          backgroundDayLabelCurrent: 'deep-purple-10',\n          colorDayLabelFuture: 'yellow-4',\n          backgroundDayLabelFuture: 'deep-purple-10',\n          // interval body\n          colorIntervalHeader: 'grey-2',\n          backgroundIntervalHeader: 'deep-purple-10',\n          colorIntervalBody: 'grey-2',\n          backgroundIntervalBody: 'deep-purple-10',\n          colorIntervalText: 'grey-2',\n          backgroundIntervalText: 'deep-purple-10',\n          // scheduler body\n          colorSchedulerHeader: 'grey-2',\n          backgroundSchedulerHeader: 'deep-purple-10',\n          colorSchedulerBody: 'grey-2',\n          backgroundSchedulerBody: 'deep-purple-10',\n          colorSchedulerText: 'grey-2',\n          backgroundSchedulerText: 'deep-purple-10'\n        },\n        {\n          name: 'indigo',\n          // body\n          colorBody: 'grey-2',\n          backgroundBody: 'indigo-8',\n          colorBodyOutside: 'grey-6',\n          backgroundBodyOutside: 'indigo-9',\n          colorBodyPast: 'grey-11',\n          backgroundBodyPast: 'indigo-10',\n          colorBodyCurrent: 'indigo-2',\n          backgroundBodyCurrent: 'indigo-10',\n          colorBodyFuture: 'indigo-2',\n          backgroundBodyFuture: 'indigo-10',\n          // header - weekly only\n          colorHeader: 'indigo-2',\n          backgroundHeader: 'indigo-10',\n          colorHeaderOutside: 'indigo-2',\n          backgroundHeaderOutside: 'indigo-10',\n          // header - for daily only\n          colorHeaderPast: 'grey-11',\n          backgroundHeaderPast: 'indigo-10',\n          colorHeaderCurrent: 'indigo-2',\n          backgroundHeaderCurrent: 'indigo-10',\n          colorHeaderFuture: 'indigo-2',\n          backgroundHeaderFuture: 'indigo-10',\n          // work week - monthly only\n          colorWorkWeekPast: 'indigo-8',\n          backgroundWorkWeekPast: 'indigo-6',\n          colorWorkWeekCurrent: 'orange-4',\n          backgroundWorkWeekCurrent: 'indigo-10',\n          colorWorkWeekFuture: 'yellow-4',\n          backgroundWorkWeekFuture: 'indigo-10',\n          // label\n          colorDayLabelOutside: 'indigo-2',\n          backgroundDayLabelOutside: 'indigo-9',\n          colorDayLabelPast: 'yellow-4',\n          backgroundDayLabelPast: 'indigo-10',\n          colorDayLabelCurrent: 'orange-4',\n          backgroundDayLabelCurrent: 'indigo-10',\n          colorDayLabelFuture: 'yellow-4',\n          backgroundDayLabelFuture: 'indigo-10',\n          // interval body\n          colorIntervalHeader: 'grey-2',\n          backgroundIntervalHeader: 'indigo-10',\n          colorIntervalBody: 'grey-2',\n          backgroundIntervalBody: 'indigo-10',\n          colorIntervalText: 'grey-2',\n          backgroundIntervalText: 'indigo-10',\n          // scheduler body\n          colorSchedulerHeader: 'grey-2',\n          backgroundSchedulerHeader: 'indigo-10',\n          colorSchedulerBody: 'grey-2',\n          backgroundSchedulerBody: 'indigo-10',\n          colorSchedulerText: 'grey-2',\n          backgroundSchedulerText: 'indigo-10'\n        },\n        {\n          name: 'blue',\n          // body\n          colorBody: 'grey-2',\n          backgroundBody: 'blue-8',\n          colorBodyOutside: 'grey-6',\n          backgroundBodyOutside: 'blue-9',\n          colorBodyPast: 'grey-11',\n          backgroundBodyPast: 'blue-10',\n          colorBodyCurrent: 'blue-2',\n          backgroundBodyCurrent: 'blue-10',\n          colorBodyFuture: 'blue-2',\n          backgroundBodyFuture: 'blue-10',\n          // header - weekly only\n          colorHeader: 'blue-2',\n          backgroundHeader: 'blue-10',\n          colorHeaderOutside: 'blue-2',\n          backgroundHeaderOutside: 'blue-10',\n          // header - for daily only\n          colorHeaderPast: 'grey-11',\n          backgroundHeaderPast: 'blue-10',\n          colorHeaderCurrent: 'blue-2',\n          backgroundHeaderCurrent: 'blue-10',\n          colorHeaderFuture: 'blue-2',\n          backgroundHeaderFuture: 'blue-10',\n          // work week - monthly only\n          colorWorkWeekPast: 'blue-8',\n          backgroundWorkWeekPast: 'blue-6',\n          colorWorkWeekCurrent: 'orange-4',\n          backgroundWorkWeekCurrent: 'blue-10',\n          colorWorkWeekFuture: 'yellow-4',\n          backgroundWorkWeekFuture: 'blue-10',\n          // label\n          colorDayLabelOutside: 'blue-2',\n          backgroundDayLabelOutside: 'blue-9',\n          colorDayLabelPast: 'yellow-4',\n          backgroundDayLabelPast: 'blue-10',\n          colorDayLabelCurrent: 'orange-4',\n          backgroundDayLabelCurrent: 'blue-10',\n          colorDayLabelFuture: 'yellow-4',\n          backgroundDayLabelFuture: 'blue-10',\n          // interval body\n          colorIntervalHeader: 'grey-2',\n          backgroundIntervalHeader: 'blue-10',\n          colorIntervalBody: 'grey-2',\n          backgroundIntervalBody: 'blue-10',\n          colorIntervalText: 'grey-2',\n          backgroundIntervalText: 'blue-10',\n          // scheduler body\n          colorSchedulerHeader: 'grey-2',\n          backgroundSchedulerHeader: 'blue-10',\n          colorSchedulerBody: 'grey-2',\n          backgroundSchedulerBody: 'blue-10',\n          colorSchedulerText: 'grey-2',\n          backgroundSchedulerText: 'blue-10'\n        }\n      ],\n      agenda: {\n        // value represents day of the week\n        1: [\n          {\n            time: '08:00',\n            avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',\n            desc: 'Meeting with CEO'\n          },\n          {\n            time: '08:30',\n            avatar: 'https://cdn.quasar.dev/img/avatar.png',\n            desc: 'Meeting with HR'\n          },\n          {\n            time: '10:00',\n            avatar: 'https://cdn.quasar.dev/img/avatar1.jpg',\n            desc: 'Meeting with Karen'\n          }\n        ],\n        2: [\n          {\n            time: '11:30',\n            avatar: 'https://cdn.quasar.dev/img/avatar2.jpg',\n            desc: 'Meeting with Alisha'\n          },\n          {\n            time: '17:00',\n            avatar: 'https://cdn.quasar.dev/img/avatar3.jpg',\n            desc: 'Meeting with Sarah'\n          }\n        ],\n        3: [\n          {\n            time: '08:00',\n            desc: 'Stand-up SCRUM',\n            avatar: 'https://cdn.quasar.dev/img/material.png'\n          },\n          {\n            time: '09:00',\n            avatar: 'https://cdn.quasar.dev/img/boy-avatar.png'\n          },\n          {\n            time: '10:00',\n            desc: 'Sprint planning',\n            avatar: 'https://cdn.quasar.dev/img/material.png'\n          },\n          {\n            time: '13:00',\n            avatar: 'https://cdn.quasar.dev/img/avatar1.jpg'\n          }\n        ],\n        4: [\n          {\n            time: '09:00',\n            avatar: 'https://cdn.quasar.dev/img/avatar3.jpg'\n          },\n          {\n            time: '10:00',\n            avatar: 'https://cdn.quasar.dev/img/avatar2.jpg'\n          },\n          {\n            time: '13:00',\n            avatar: 'https://cdn.quasar.dev/img/material.png'\n          }\n        ],\n        5: [\n          {\n            time: '08:00',\n            avatar: 'https://cdn.quasar.dev/img/boy-avatar.png'\n          },\n          {\n            time: '09:00',\n            avatar: 'https://cdn.quasar.dev/img/avatar2.jpg'\n          },\n          {\n            time: '09:30',\n            avatar: 'https://cdn.quasar.dev/img/avatar4.jpg'\n          },\n          {\n            time: '10:00',\n            avatar: 'https://cdn.quasar.dev/img/avatar5.jpg'\n          },\n          {\n            time: '11:30',\n            avatar: 'https://cdn.quasar.dev/img/material.png'\n          },\n          {\n            time: '13:00',\n            avatar: 'https://cdn.quasar.dev/img/avatar6.jpg'\n          },\n          {\n            time: '13:30',\n            avatar: 'https://cdn.quasar.dev/img/avatar3.jpg'\n          },\n          {\n            time: '14:00',\n            avatar: 'https://cdn.quasar.dev/img/linux-avatar.png'\n          },\n          {\n            time: '14:30',\n            avatar: 'https://cdn.quasar.dev/img/avatar.png'\n          },\n          {\n            time: '15:00',\n            avatar: 'https://cdn.quasar.dev/img/boy-avatar.png'\n          },\n          {\n            time: '15:30',\n            avatar: 'https://cdn.quasar.dev/img/avatar2.jpg'\n          },\n          {\n            time: '16:00',\n            avatar: 'https://cdn.quasar.dev/img/avatar6.jpg'\n          }\n        ]\n      }\n    }\n  },\n\n  computed: {\n    themesList () {\n      const list = []\n      this.themes.forEach((theme) => {\n        list.push({\n          label: theme.name,\n          value: { ...theme }\n        })\n      })\n      return list\n    }\n  },\n\n  methods: {\n    getAgenda (day) {\n      return this.agenda[parseInt(day.weekday, 10)]\n    }\n  }\n}\n<\/script>\n"}}]);