ayanova/src/plugins/vuetify.js

@@ -81,6 +81,7 @@ import {
   faClock,
   faClone,
   faCode,
+  faCog,
   faCogs,
   faCoins,
   faColumns,
@@ -263,6 +264,7 @@ library.add(
   faClock,
   faClone,
   faCode,
+  faCog,
   faCogs,
   faCoins,
   faColumns,
@@ -574,6 +576,12 @@ const CUSTOM_ICONS = {
       icon: ["fas", "code"]
     }
   },
+  ayiCog: {
+    component: FontAwesomeIcon,
+    props: {
+      icon: ["fas", "cog"]
+    }
+  },
   ayiCogs: {
     component: FontAwesomeIcon,
     props: {

ayanova/src/views/home-schedule.vue

@@ -1,7 +1,5 @@
 <template>
   <div v-resize="onResize" class="my-n8">
-    <!-- <v-row dense>
-      <v-col> -->
     <v-sheet height="64">
       <v-toolbar flat>
         <v-btn outlined class="mr-4" color="grey darken-2" @click="setToday">
@@ -17,6 +15,17 @@
           {{ $refs.calendar.title }}
         </v-toolbar-title>
         <v-spacer></v-spacer>
+        <v-btn
+          class="mr-3"
+          fab
+          text
+          small
+          color="grey darken-2"
+          @click="settingsDialog = true"
+        >
+          <v-icon small>$ayiCog</v-icon>
+        </v-btn>
+
         <v-menu bottom right>
           <template v-slot:activator="{ on, attrs }">
             <v-btn outlined color="grey darken-2" v-bind="attrs" v-on="on">
@@ -52,7 +61,7 @@
         @click:event="showEvent"
         @click:more="viewDay"
         @click:date="viewDay"
-        @change="updateRange"
+        @change="fetchEvents"
       ></v-calendar>
       <v-menu
         v-model="selectedOpen"
@@ -63,15 +72,15 @@
         <v-card color="grey lighten-4" min-width="350px" flat>
           <v-toolbar :color="selectedEvent.color" dark>
             <v-btn icon>
-              <v-icon>mdi-pencil</v-icon>
+              <v-icon>$ayiEdit</v-icon>
             </v-btn>
             <v-toolbar-title v-html="selectedEvent.name"></v-toolbar-title>
             <v-spacer></v-spacer>
             <v-btn icon>
-              <v-icon>mdi-heart</v-icon>
+              <v-icon>$ayiBell</v-icon>
             </v-btn>
             <v-btn icon>
-              <v-icon>mdi-dots-vertical</v-icon>
+              <v-icon>$ayiBoxes</v-icon>
             </v-btn>
           </v-toolbar>
           <v-card-text>
@@ -85,8 +94,31 @@
         </v-card>
       </v-menu>
     </v-sheet>
-    <!-- </v-col>
+    <template>
-    </v-row> -->
+      <v-row justify="center">
+        <v-dialog max-width="600px" v-model="settingsDialog">
+          <v-card>
+            <v-card-title> </v-card-title>
+            <v-card-text>
+              settings here
+            </v-card-text>
+            <v-card-actions>
+              <v-btn text @click="settingsDialog = false" color="primary">{{
+                $ay.t("Cancel")
+              }}</v-btn>
+              <v-spacer></v-spacer>
+              <v-btn
+                color="primary"
+                text
+                @click="acceptSettings()"
+                class="ml-4"
+                >{{ $ay.t("OK") }}</v-btn
+              >
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-row>
+    </template>
   </div>
 </template>
 
@@ -150,7 +182,8 @@ export default {
         serverError: {}
       },
       rights: window.$gz.role.defaultRightsObject(),
-      calendarHeight: 600
+      calendarHeight: 600,
+      settingsDialog: false
     };
   },
   mounted() {
@@ -194,7 +227,8 @@ export default {
 
       nativeEvent.stopPropagation();
     },
-    updateRange({ start, end }) {
+    fetchEvents({ start, end }) {
+      console.log("UPDATE RANGE:", JSON.stringify({ start: start, end: end }));
       const events = [];
 
       const min = new Date(`${start.date}T00:00:00`);