Add basic calendar functionality

A too large commit containing too many additions, most of which will be refactored. This commit lays the foundation for the calendar system, providing functionality to navigate months and highlighting dates. The additions can be summarized as follows: - Add component that keeps track of all calendar data and sub-components. Uses JavaScript's type. - Add module containing utility functions for interacting with JavaScript's type. - Add component that lays out a calendar month in a CSS grid. - Add file for localized theme settings. - Disable source maps in production due to Webpack errors. For similar issues, see webpack-contrib/babel-minify-webpack-plugin#68. - Other small things such as setting app-wide styles with , adding (Danish) names for months and weekdays, and adding scss support.
avborup · Jul 2, 2019 · 5440cc5 · 5440cc5 · avborup · Jul 2, 2019
1 parent d9c0dab
commit 5440cc5
Show file tree

Hide file tree

Showing 17 changed files with 392 additions and 113 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# vue-calendar
+# Rollespilsfabrikken's Forum and Calendar frontend
 
 ## Project setup
 ```

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "vue-calendar",
+  "name": "rollespilsfabrikken-forum-calendar-frontend",
   "version": "0.1.0",
   "private": true,
   "scripts": {

diff --git a/public/assets/icons/less-than.svg b/public/assets/icons/less-than.svg
diff --git a/public/index.html b/public/index.html
@@ -5,11 +5,12 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>vue-calendar</title>
+    <link rel="stylesheet" href="./main.css">
+    <title>Rollespilsfabrikken - Forum og Kalender</title>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but vue-calendar doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>Vi beklager, men Rollespilsfabrikkens forum og kalender fungerer ikke uden JavaScript. Aktivér JavaScript for at fortsætte.</strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->

diff --git a/public/main.css b/public/main.css
@@ -0,0 +1,12 @@
+@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html, body {
+    width: 100%;
+    height: 100%;
+}
diff --git a/src/App.vue b/src/App.vue
@@ -1,29 +1,36 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
+    <nav class="temp-spacer">Kalender</nav>
+    <div><router-view /></div>
   </div>
 </template>
 
 <style lang="scss">
+@import '@/assets/scss/theme.scss';
+
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: $fonts;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+
+  height: 100%;
+
+  display: grid;
+  grid-template-rows: auto 1fr;
 }
-#nav {
-  padding: 30px;
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
+</style>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/theme.scss';
+
+.temp-spacer {
+  height: 3rem;
+  background-color: $primary-accent;
+  color: #fff;
+  padding: 0 1rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
 }
 </style>
diff --git a/src/assets/scss/theme.scss b/src/assets/scss/theme.scss
@@ -0,0 +1,2 @@
+$fonts: 'Source Sans Pro', sans-serif;
+$primary-accent: #2b55b6;
diff --git a/src/components/CalendarGrid.vue b/src/components/CalendarGrid.vue
@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <ul>
+      <li
+        v-for="weekDay in weekDays"
+        :key="weekDay"
+        class="weekday-name"
+      >
+        <h5>{{ weekDay }}</h5>
+      </li>
+      <li
+        v-for="emptyDay in gridInfo.firstDay"
+        :key="-1 * emptyDay"
+        class="empty-field"
+      ></li>
+      <li
+        v-for="date in gridInfo.numDays"
+        :key="date"
+        class="day"
+        :class="{
+          'active-date': isSameDay(
+            activeDate,
+            new Date(timestamp.getFullYear(), timestamp.getMonth(), date),
+          ),
+        }"
+      >
+        <h6>{{ date }}</h6>
+      </li>
+      <li
+        v-for="emptyDay in gridInfo.numLeftOverFields"
+        :key="100 - emptyDay"
+        class="empty-field"
+      ></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { weekDayNames } from '@/constants';
+import {
+  today,
+  daysInMonth,
+  getWeekday,
+  // FIXME: Why does ESLint complain that `isSameDay` doesn't exist?
+  // eslint-disable-next-line
+  isSameDay,
+} from '@/dateUtils';
+
+export default {
+  name: 'CalendarGrid',
+
+  props: {
+    timestamp: {
+      type: Date,
+      default: today,
+    },
+    activeDate: {
+      type: Date,
+      default: today,
+    },
+  },
+
+  data() {
+    const year = this.timestamp.getFullYear();
+    const month = this.timestamp.getMonth();
+
+    const numDays = daysInMonth(month, year);
+    const firstDay = getWeekday(year, month, 1);
+    const numUsedFields = numDays + firstDay;
+    const numWeeks = Math.ceil(numUsedFields / 7);
+    const numLeftOverFields = numWeeks * 7 - numUsedFields;
+    const weekDays = weekDayNames.map(weekDay => weekDay.replace(/dag/g, ''));
+
+    return {
+      weekDays,
+      gridInfo: {
+        numDays,
+        numWeeks,
+        firstDay,
+        numLeftOverFields,
+      },
+    };
+  },
+
+  methods: {
+    updateTimestamp(newTimestamp) {
+      this.currentTimestamp = newTimestamp;
+    },
+
+    isSameDay(a, b) {
+      return isSameDay(a, b);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/theme.scss';
+
+$border-style: 1px solid #ccc;
+
+ul {
+  list-style-type: none;
+  display: grid;
+  height: 100%;
+  grid-template-columns: repeat(7, 1fr);
+  grid-template-rows: 2rem auto;
+  border-right: $border-style;
+  /* border-top: $border-style; */
+
+  .weekday-name {
+    border-bottom: $border-style;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    h5 {
+      text-transform: uppercase;
+      font-size: 0.9rem;
+      color: rgba(0, 0, 0, 0.6);
+      font-weight: 600;
+    }
+  }
+
+  .empty-field {
+    border-left: $border-style;
+    border-bottom: $border-style;
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  .day {
+    border-left: $border-style;
+    border-bottom: $border-style;
+    text-align: center;
+    padding: 0.5rem 0.1rem;
+
+    h6 {
+      font-weight: 400;
+      font-size: 0.8rem;
+      width: 1.3rem;
+      height: 1.3rem;
+      border-radius: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 auto;
+    }
+
+    &.active-date h6 {
+      background-color: $primary-accent;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/src/constants.js b/src/constants.js
@@ -0,0 +1,24 @@
+export const monthNames = [
+  'Januar',
+  'Februar',
+  'Marts',
+  'April',
+  'Maj',
+  'Juni',
+  'Juli',
+  'August',
+  'September',
+  'Oktober',
+  'November',
+  'December',
+];
+
+export const weekDayNames = [
+  'Mandag',
+  'Tirsdag',
+  'Onsdag',
+  'Torsdag',
+  'Fredag',
+  'Lørdag',
+  'Søndag',
+];
diff --git a/src/dateUtils.js b/src/dateUtils.js
@@ -0,0 +1,38 @@
+export function today() {
+  return new Date();
+}
+
+export function daysInMonth(month, year) {
+  return new Date(year, month + 1, 0).getDate();
+}
+
+export function monthJump(oldDate, amount, dir = 1) {
+  const numYears = Math.floor(amount / 12);
+  const numMonths = amount % 12;
+
+  const newDate = new Date(oldDate.getTime());
+
+  newDate.setFullYear(numYears * dir + oldDate.getFullYear());
+  newDate.setMonth(numMonths * dir + oldDate.getMonth());
+
+  return newDate;
+}
+
+// Returns 0-indexed day of the week, Monday-Sunday
+export function getWeekday(...args) {
+  // FIXME: Why does the date go one month back by default?
+  const date = monthJump(new Date(args), 1);
+  let weekDay = date.getDay() - 1;
+
+  if (weekDay === -1) {
+    weekDay = 6;
+  }
+
+  return weekDay;
+}
+
+export function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear()
+    && a.getMonth() === b.getMonth()
+    && a.getDate() === b.getDate();
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		$fonts: 'Source Sans Pro', sans-serif;
		$primary-accent: #2b55b6;