Vuetify calendar example

<template>
    <v-container class="page">
        <v-toolbar color="#f9e6de" flat class="mt-8">
            <v-row>
                <v-col cols="12" sm="3" class="d-flex justify-center">
                    <v-toolbar-title class="text-h5">
                        My Schedule
                    </v-toolbar-title>
                </v-col>
                <v-col cols="12" sm="3" class="d-flex justify-center">
                    <v-btn
                        outlined
                        class="mr-4 btn-primary"
                        color="darken-2"
                        @click="setToday"
                    >
                        Today
                    </v-btn>
                    <v-btn fab text small color="grey darken-2" @click="prev">
                        <v-icon small>
                            mdi-chevron-left
                        </v-icon>
                    </v-btn>
                    <v-btn fab text small color="grey darken-2" @click="next">
                        <v-icon small>
                            mdi-chevron-right
                        </v-icon>
                    </v-btn>
                </v-col>
                <v-col class="d-flex align-center" v-if="$refs.cal">{{$refs.cal.title}}</v-col>
                <v-spacer />
                <v-col cols="12" sm="3" class="d-flex justify-center">
                    <v-btn
                        @click="type = 'category'"
                        :color="type === 'category' ? '#cae8f0' : '#645c59'"
                        :style="{
                            color: type === 'category' ? 'black' : 'white'
                        }"
                        >Daily
                    </v-btn>
                    <v-btn
                        @click="type = 'week'"
                        :color="type === 'week' ? '#cae8f0' : '#645c59'"
                        :style="{ color: type === 'week' ? 'black' : 'white' }"
                        class="mx-2"
                        >Weekly
                    </v-btn>
                    <v-btn
                        @click="type = 'month'"
                        :color="type === 'month' ? '#cae8f0' : '#645c59'"
                        :style="{ color: type === 'month' ? 'black' : 'white' }"
                        >Monthly
                    </v-btn>
                </v-col>
                <v-spacer />
            </v-row>
        </v-toolbar>
        <v-row class="mt-12">
            <v-col>
                <v-sheet height="600">
                    <v-calendar
                        ref="cal"
                        v-model="focus"
                        color="#eeb49b"
                        :type="type"
                        category-show-all
                        :categories="categories"
                        :events="events"
                        :event-color="getEventColor"
                        @change="fetchAllReservations"
                        id="cal"
                        @click:event="showEvent"
                    ></v-calendar>
                </v-sheet>
            </v-col>
        </v-row>
        <v-row>
            <v-col class="d-flex justify-center">
                <v-btn
                    @click="createDialog = true"
                    class="mt-5 btn-secondary darken-2"
                >
                    <v-icon>mdi-calendar-range</v-icon>
                    <span>Add New</span>
                </v-btn>
            </v-col>
        </v-row>
        <EventHandler
            v-model="createDialog"
            :eventData="null"
            :isNewEvent="true"
            ref="eventCreate"
            :reservations="reservations"
            :userPackage="userPackage"
            @getPackage="getPackage"
            @fetchAllReservations="fetchAllReservations"
        />
        <MyDialog v-model="eventDialog" max-width="30vw">
            <ShowEvent :event="chosenEvent" />
        </MyDialog>
    </v-container>
</template>

<script>
import EventHandler from "@/components/calendars/EventHandler";
import {
    fetchAll as fetchAllRooms,
    rooms
} from "@/repositories/RoomsRepository";
import {
    reservations,
    fetchAll as fetchAllReservations,
    fetchAll
} from "@/repositories/ReservationsRepository";
import { userPackage, fetchPackage } from "@/repositories/PackageRepository";
import MyDialog from "@/components/MyDialog";
import ShowEvent from "@/components/calendars/ShowEvent";
import dayjs from "dayjs";
export default {
    name: "Schedule",
    components: { EventHandler, MyDialog, ShowEvent },
    setup() {
        fetchAll();
        return {
            reservations: reservations.value,
            fetchAllReservations
        };
    },
    data() {
        return {
            type: "category",
            types: ["category", "week", "month"],
            focus: "",
            categories: [],
            rooms: [],
            chosenEvent: null,
            isNewEvent: false,
            eventDialog: false,
            createDialog: false,
            uid: null,
            userPackage: null,
        };
    },
    computed: {
        events() {
            const tempEvents = [];
            if (this.uid) {
                reservations.value.forEach(item => {
                    let eventUid = item?.user[0].itemRefID || {};
                    // let eventUid = "123123";
                    let owner = this.uid === eventUid;
                    if (owner || item.isPayed) {
                        // const first = new Date(item?.start);
                        // const second = new Date(item?.end);
                        tempEvents.push({
                            _id: item?._id,
                            desc: item?.description,
                            name: item?.title,
                            start: dayjs(item?.start).toDate(),
                            end: dayjs(item?.start)
                                .add(item?.hours, "h")
                                .toDate(),
                            // start: first,
                            // end: second,
                            category: `Room ${item?.room[0].item.roomNum}`,
                            timed: true,
                            room: item?.room[0].item || {},
                            owner,
                            isPayed: item?.isPayed,
                            hours: item?.hours,
                            color: this.getColor(item)
                        });
                    }
                });
            }
            return tempEvents;
        }
    },
    watch: {
        chosenEvent(newVal) {
            this.chosenEvent = newVal;
        }
    },
    async mounted() {
        console.log("REFS", this.$refs.cal.title)
        await fetchAllRooms();
        await fetchAllReservations();
        this.rooms = rooms.value;
        this.rooms.forEach(room =>
            this.categories.push("Room " + room.roomNum)
        );
        this.reservations = reservations;
        this?.$refs?.cal?.checkChange();
        this.uid = this.$bageldb.users().getBagelUserID();
        this.getPackage();
    },
    methods: {
        prev() {
            this.$refs.cal.prev();
        },
        next() {
            this.$refs.cal.next();
        },
        getEventColor(event) {
            return event.color;
        },
        setToday() {
            this.focus = "";
        },
        addNewEvent() {
            this.chosenEvent = null;
            console.log(this.chosenEvent);
            this.isNewEvent = true;
            this.toggleEventDialog(true);
        },
        showEvent(e) {
            if (e.event.owner) {
                this.chosenEvent = e.event;
                this.eventDialog = true;
            }
        },
        getColor(item) {
            if (this.uid === (item?.user[0].itemRefID || {}))
                return item.isPayed ? "#b8d998" : "#eeb49b";
            else return "#645c59";
        },
        async getPackage() {
            await fetchPackage();
            this.userPackage = userPackage.value;
        }
    }
};
</script>
<style lang="scss" scoped>
.active {
    background-color: black !important;
    color: white !important;
}
</style>