ayanova/src/components/dash-test-day-calendar-widget.vue

@@ -1,15 +1,23 @@
 <template>
   <gz-dash
     icon="$ayiSplotch"
-    :updateFrequency="60000"
+    :updateFrequency="0"
     v-on:dash-refresh="loadData"
     v-on="$listeners"
     v-bind="$attrs"
   >
     <template slot="main">
-      <div class="ml-4 mt-1">
-        <v-calendar color="primary" type="day"></v-calendar>
-      </div>
+      <v-calendar
+        color="primary"
+        type="day"
+        hide-header
+        interval-count="11"
+        first-interval="7"
+        interval-height="24"
+        interval-width="45"
+        :events="events"
+        :event-color="getEventColor"
+      ></v-calendar>
     </template>
   </gz-dash>
 </template>
@@ -20,15 +28,74 @@ export default {
     GzDash
   },
   data() {
-    return {};
+    return {
+      events: []
+    };
   },
   props: {},
-  created() {},
+  created() {
+    // this.loadData();
+  },
   computed: {},
   methods: {
     loadData: function() {
+      let events = [];
+      let now = new Date();
+      let yy = now.getFullYear();
+      let mm = now.getMonth() + 1;
+      let dd = now.getDate();
+      events.push({
+        name: "WO 45",
+        start: getEventTimeStamp(yy, mm, dd, 8, "00"),
+        end: getEventTimeStamp(yy, mm, dd, 8, 45),
+        color: "orange"
+      });
+
+      events.push({
+        name: "WO 22",
+        start: getEventTimeStamp(yy, mm, dd, 9, "00"),
+        end: getEventTimeStamp(yy, mm, dd, 10, 30),
+        color: "blue"
+      });
+
+      events.push({
+        name: "WO 33",
+        start: getEventTimeStamp(yy, mm, dd, 11, "00"),
+        end: getEventTimeStamp(yy, mm, dd, 11, 30),
+        color: "green"
+      });
+
+      events.push({
+        name: "WO 44",
+        start: getEventTimeStamp(yy, mm, dd, 11, "00"),
+        end: getEventTimeStamp(yy, mm, dd, 11, 30),
+        color: "indigo"
+      });
+
+      events.push({
+        name: "WO 55",
+        start: getEventTimeStamp(yy, mm, dd, 11, "00"),
+        end: getEventTimeStamp(yy, mm, dd, 11, 45),
+        color: "purple"
+      });
+
+      events.push({
+        name: "WO 66",
+        start: getEventTimeStamp(yy, mm, dd, 13, "00"),
+        end: getEventTimeStamp(yy, mm, dd, 16, 45),
+        color: "teal"
+      });
+      console.log(events);
+      this.events = events;
       //console.log("GzDashTestDayCalendarWidget::loadData");
+    },
+    getEventColor(event) {
+      return event.color;
     }
   }
 };
+
+function getEventTimeStamp(yy, mm, dd, hh, minutes) {
+  return `${yy}-${mm}-${dd} ${hh}:${minutes}`;
+}
 </script>