bokoness

Vuetify calendar example

Dec 6th, 2021
886
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.     <v-container class="page">
  3.         <v-toolbar color="#f9e6de" flat class="mt-8">
  4.             <v-row>
  5.                 <v-col cols="12" sm="3" class="d-flex justify-center">
  6.                     <v-toolbar-title class="text-h5">
  7.                         My Schedule
  8.                     </v-toolbar-title>
  9.                 </v-col>
  10.                 <v-col cols="12" sm="3" class="d-flex justify-center">
  11.                     <v-btn
  12.                        outlined
  13.                        class="mr-4 btn-primary"
  14.                        color="darken-2"
  15.                        @click="setToday"
  16.                    >
  17.                         Today
  18.                     </v-btn>
  19.                     <v-btn fab text small color="grey darken-2" @click="prev">
  20.                         <v-icon small>
  21.                             mdi-chevron-left
  22.                         </v-icon>
  23.                     </v-btn>
  24.                     <v-btn fab text small color="grey darken-2" @click="next">
  25.                         <v-icon small>
  26.                             mdi-chevron-right
  27.                         </v-icon>
  28.                     </v-btn>
  29.                 </v-col>
  30.                 <v-col class="d-flex align-center" v-if="$refs.cal">{{$refs.cal.title}}</v-col>
  31.                 <v-spacer />
  32.                 <v-col cols="12" sm="3" class="d-flex justify-center">
  33.                     <v-btn
  34.                        @click="type = 'category'"
  35.                        :color="type === 'category' ? '#cae8f0' : '#645c59'"
  36.                        :style="{
  37.                            color: type === 'category' ? 'black' : 'white'
  38.                        }"
  39.                        >Daily
  40.                     </v-btn>
  41.                     <v-btn
  42.                        @click="type = 'week'"
  43.                        :color="type === 'week' ? '#cae8f0' : '#645c59'"
  44.                        :style="{ color: type === 'week' ? 'black' : 'white' }"
  45.                        class="mx-2"
  46.                        >Weekly
  47.                     </v-btn>
  48.                     <v-btn
  49.                        @click="type = 'month'"
  50.                        :color="type === 'month' ? '#cae8f0' : '#645c59'"
  51.                        :style="{ color: type === 'month' ? 'black' : 'white' }"
  52.                        >Monthly
  53.                     </v-btn>
  54.                 </v-col>
  55.                 <v-spacer />
  56.             </v-row>
  57.         </v-toolbar>
  58.         <v-row class="mt-12">
  59.             <v-col>
  60.                 <v-sheet height="600">
  61.                     <v-calendar
  62.                        ref="cal"
  63.                        v-model="focus"
  64.                        color="#eeb49b"
  65.                        :type="type"
  66.                        category-show-all
  67.                        :categories="categories"
  68.                        :events="events"
  69.                        :event-color="getEventColor"
  70.                        @change="fetchAllReservations"
  71.                        id="cal"
  72.                        @click:event="showEvent"
  73.                    ></v-calendar>
  74.                 </v-sheet>
  75.             </v-col>
  76.         </v-row>
  77.         <v-row>
  78.             <v-col class="d-flex justify-center">
  79.                 <v-btn
  80.                    @click="createDialog = true"
  81.                    class="mt-5 btn-secondary darken-2"
  82.                >
  83.                     <v-icon>mdi-calendar-range</v-icon>
  84.                     <span>Add New</span>
  85.                 </v-btn>
  86.             </v-col>
  87.         </v-row>
  88.         <EventHandler
  89.            v-model="createDialog"
  90.            :eventData="null"
  91.            :isNewEvent="true"
  92.            ref="eventCreate"
  93.            :reservations="reservations"
  94.            :userPackage="userPackage"
  95.            @getPackage="getPackage"
  96.            @fetchAllReservations="fetchAllReservations"
  97.        />
  98.         <MyDialog v-model="eventDialog" max-width="30vw">
  99.             <ShowEvent :event="chosenEvent" />
  100.         </MyDialog>
  101.     </v-container>
  102. </template>
  103.  
  104. <script>
  105. import EventHandler from "@/components/calendars/EventHandler";
  106. import {
  107.     fetchAll as fetchAllRooms,
  108.     rooms
  109. } from "@/repositories/RoomsRepository";
  110. import {
  111.     reservations,
  112.     fetchAll as fetchAllReservations,
  113.     fetchAll
  114. } from "@/repositories/ReservationsRepository";
  115. import { userPackage, fetchPackage } from "@/repositories/PackageRepository";
  116. import MyDialog from "@/components/MyDialog";
  117. import ShowEvent from "@/components/calendars/ShowEvent";
  118. import dayjs from "dayjs";
  119. export default {
  120.     name: "Schedule",
  121.     components: { EventHandler, MyDialog, ShowEvent },
  122.     setup() {
  123.         fetchAll();
  124.         return {
  125.             reservations: reservations.value,
  126.             fetchAllReservations
  127.         };
  128.     },
  129.     data() {
  130.         return {
  131.             type: "category",
  132.             types: ["category", "week", "month"],
  133.             focus: "",
  134.             categories: [],
  135.             rooms: [],
  136.             chosenEvent: null,
  137.             isNewEvent: false,
  138.             eventDialog: false,
  139.             createDialog: false,
  140.             uid: null,
  141.             userPackage: null,
  142.         };
  143.     },
  144.     computed: {
  145.         events() {
  146.             const tempEvents = [];
  147.             if (this.uid) {
  148.                 reservations.value.forEach(item => {
  149.                     let eventUid = item?.user[0].itemRefID || {};
  150.                     // let eventUid = "123123";
  151.                     let owner = this.uid === eventUid;
  152.                     if (owner || item.isPayed) {
  153.                         // const first = new Date(item?.start);
  154.                         // const second = new Date(item?.end);
  155.                         tempEvents.push({
  156.                             _id: item?._id,
  157.                             desc: item?.description,
  158.                             name: item?.title,
  159.                             start: dayjs(item?.start).toDate(),
  160.                             end: dayjs(item?.start)
  161.                                 .add(item?.hours, "h")
  162.                                 .toDate(),
  163.                             // start: first,
  164.                             // end: second,
  165.                             category: `Room ${item?.room[0].item.roomNum}`,
  166.                             timed: true,
  167.                             room: item?.room[0].item || {},
  168.                             owner,
  169.                             isPayed: item?.isPayed,
  170.                             hours: item?.hours,
  171.                             color: this.getColor(item)
  172.                         });
  173.                     }
  174.                 });
  175.             }
  176.             return tempEvents;
  177.         }
  178.     },
  179.     watch: {
  180.         chosenEvent(newVal) {
  181.             this.chosenEvent = newVal;
  182.         }
  183.     },
  184.     async mounted() {
  185.         console.log("REFS", this.$refs.cal.title)
  186.         await fetchAllRooms();
  187.         await fetchAllReservations();
  188.         this.rooms = rooms.value;
  189.         this.rooms.forEach(room =>
  190.             this.categories.push("Room " + room.roomNum)
  191.         );
  192.         this.reservations = reservations;
  193.         this?.$refs?.cal?.checkChange();
  194.         this.uid = this.$bageldb.users().getBagelUserID();
  195.         this.getPackage();
  196.     },
  197.     methods: {
  198.         prev() {
  199.             this.$refs.cal.prev();
  200.         },
  201.         next() {
  202.             this.$refs.cal.next();
  203.         },
  204.         getEventColor(event) {
  205.             return event.color;
  206.         },
  207.         setToday() {
  208.             this.focus = "";
  209.         },
  210.         addNewEvent() {
  211.             this.chosenEvent = null;
  212.             console.log(this.chosenEvent);
  213.             this.isNewEvent = true;
  214.             this.toggleEventDialog(true);
  215.         },
  216.         showEvent(e) {
  217.             if (e.event.owner) {
  218.                 this.chosenEvent = e.event;
  219.                 this.eventDialog = true;
  220.             }
  221.         },
  222.         getColor(item) {
  223.             if (this.uid === (item?.user[0].itemRefID || {}))
  224.                 return item.isPayed ? "#b8d998" : "#eeb49b";
  225.             else return "#645c59";
  226.         },
  227.         async getPackage() {
  228.             await fetchPackage();
  229.             this.userPackage = userPackage.value;
  230.         }
  231.     }
  232. };
  233. </script>
  234. <style lang="scss" scoped>
  235. .active {
  236.     background-color: black !important;
  237.     color: white !important;
  238. }
  239. </style>
  240.  
RAW Paste Data