Cursus dag vuejsdevelopers#4

EdwinSchipper · Sep 25, 2020 · a51c035 · a51c035
1 parent 0145cdb
commit a51c035
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -8,7 +8,12 @@
     <link rel="stylesheet" type="text/css" href="/dist/style.css" media="screen" />
 </head>
 <body>
-    <div id="app">{{ msg }}</div>
+    <div id="app">
+
+        <!-- Component App.vue-->
+        <app></app>
+
+    </div>
     <script src="/dist/web.bundle.js"></script>
 </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/App.vue b/src/components/App.vue
@@ -0,0 +1,88 @@
+<template>
+    <div> 
+        {{ msg }}
+
+        <!-- Loop Weeks array data -->
+        <div v-for="currentWeek in weeks">
+
+            Week
+            <!-- loop trough current Week array -->
+            <div v-for="day in currentWeek">{{ day }}</div>
+
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return { 
+                msg: 'Vue Calender',
+                month: 5,
+                year: 2017
+            };
+        },
+
+        computed: {
+            days() {
+
+                // Generating all days in current month
+                let days = [];
+                let currentDay = this.$moment(`${this.year}-${this.month}-1`, 'YYYY-M-D'); // first day of current month
+
+                    // Fill days array: Loop trough month from First Day of the month
+                    do { 
+                        days.push(currentDay);
+                        currentDay = this.$moment(currentDay).add(1, 'days');
+                    } while((currentDay.month() +1) === this.month);
+
+                // Add previous days to start
+                currentDay = this.$moment(days[0]);
+                const SUNDAY = 0;
+                const MONDAY = 1;
+                if(currentDay.day() !== MONDAY) {
+                    do {
+                        currentDay = this.$moment(currentDay).subtract(1, 'days');
+                        days.unshift(currentDay); // Add at start of the array with unshift
+                    } while(currentDay.day() !== MONDAY);
+                }
+
+                // Add following days to end
+                currentDay = this.$moment(days[days.length - 1]); // grabs the last day of the month
+                if(currentDay.day() !== SUNDAY) {
+                    do {
+                        currentDay = this.$moment(currentDay).add(1, 'days');
+                        days.push(currentDay);
+                    } while(currentDay.day() !== SUNDAY);
+                }
+
+                // Return All Days array
+                return days;
+            },
+            weeks() {
+                let weeks = [];
+                let week = [];
+
+                for (let day of this.days) {
+                    week.push(day);
+                    if(week.length === 7) {
+                        weeks.push(week);
+                        week = [];
+                    }
+                }
+
+                // Return complete month in weeks multi-dimensional array
+                // A multi-dimensional array is an array with more than one level or dimension
+                console.log('weeks:');
+                console.log(weeks);
+                return weeks;
+
+            }
+        },
+
+
+        created() {
+            console.log(this.$moment); // Acces to the moment libary
+        }
+    }
+</script>
diff --git a/src/web.entry.js b/src/web.entry.js
@@ -1,8 +1,18 @@
-import Vue from 'vue'
+import Vue from 'vue';
+import './style.scss';
+
+import moment from 'moment-timezone'; // Import time libary
+moment.tz.setDefault("UTC"); // Set default time to UTC zone
+Object.defineProperty(Vue.prototype, '$moment', { get() { return this.$root.moment } }); // Defines a new property directly on an object, create the $Moment object Constructor
+
+import App from './components/App.vue';
 
 new Vue({
   el: '#app',
   data: {
-    msg: 'Hello World'
+    moment // Prop en object shorthand
+  },
+  components: {
+    App
   }
 });