From c54de508e5190d6530eafb1eed94137598a60d81 Mon Sep 17 00:00:00 2001
From: Adam Goldsmith <adam@adamgoldsmith.name>
Date: Thu, 12 Mar 2020 13:54:26 -0400
Subject: [PATCH] Initial Commit, functional basic calendar

---
 .editorconfig  |  9 ++++++++
 .gitignore     |  4 ++++
 .prettierrc    |  3 +++
 package.json   | 25 ++++++++++++++++++++
 src/App.vue    | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++
 src/index.html |  4 ++++
 src/index.ts   |  7 ++++++
 tsconfig.json  |  8 +++++++
 8 files changed, 122 insertions(+)
 create mode 100644 .editorconfig
 create mode 100644 .gitignore
 create mode 100644 .prettierrc
 create mode 100644 package.json
 create mode 100644 src/App.vue
 create mode 100644 src/index.html
 create mode 100644 src/index.ts
 create mode 100644 tsconfig.json

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..81ded28
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,9 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+charset = utf-8
+indent_style = space
+indent_size = 2
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..fe722d1
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,4 @@
+/node_modules/
+/.cache/
+/dist/
+/package-lock.json
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..ee6d53c
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,3 @@
+trailingComma: es5
+singleQuote: true
+jsxBracketSameLine: true
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..367604f
--- /dev/null
+++ b/package.json
@@ -0,0 +1,25 @@
+{
+  "browserslist": [
+    "last 1 Chrome versions",
+    "last 1 Firefox versions"
+  ],
+  "scripts": {
+    "start": "parcel src/index.html"
+  },
+  "devDependencies": {
+    "@vue/component-compiler-utils": "^3.0.0",
+    "sass": "^1.23.1",
+    "typescript": "^3.6.4",
+    "vue-template-compiler": "^2.6.10"
+  },
+  "dependencies": {
+    "@fullcalendar/core": "^4.3.1",
+    "@fullcalendar/google-calendar": "^4.3.0",
+    "@fullcalendar/timegrid": "^4.3.0",
+    "@fullcalendar/vue": "^4.3.1",
+    "equicolor": "^1.1.0",
+    "vue": "^2.6.10",
+    "vue-hot-reload-api": "^2.3.4",
+    "vue-property-decorator": "^8.3.0"
+  }
+}
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..5022488
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,62 @@
+<template>
+  <FullCalendar ref="calendar" v-bind="calendarOptions"> </FullCalendar>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
+import equicolor from 'equicolor';
+
+import FullCalendar from '@fullcalendar/vue';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import googleCalendarPlugin from '@fullcalendar/google-calendar';
+
+import '@fullcalendar/core/main.css';
+import '@fullcalendar/daygrid/main.css';
+import '@fullcalendar/timegrid/main.css';
+
+const calendars = {
+  computer_lab: '6mmjp85e4732ru6skf1dda54ls@group.calendar.google.com',
+  electronics: '1g8atbdschshrg2inf162rcqt4@group.calendar.google.com',
+  wood_shop: '4unv3ia1n9mc9u31n2n5lv8nd8@group.calendar.google.com',
+  fiber_arts_studio: '7gbndciog37ge0hd8ug33ml70k@group.calendar.google.com',
+  jewelry_studio: 'l0dl2jq3vhbi9f4lfmaf5negc0@group.calendar.google.com',
+  metal_shop: 'a4p97kiiafatqdr52c3a0cpre0@group.calendar.google.com',
+  room_reservations: 'f4ro53uklj2u6pr0se7ucskm6g@group.calendar.google.com',
+};
+
+const colors = equicolor.findNextColors(
+  ['#ffffff', '#000000'],
+  Object.keys(calendars).length
+);
+
+@Component({ components: { FullCalendar } })
+export default class App extends Vue {
+  calendarOptions = {
+    plugins: [timeGridPlugin, googleCalendarPlugin],
+    allDaySlot: false,
+    nowIndicator: true,
+    defaultView: 'timeGridWeek',
+    height: 'auto',
+    minTime: '8:00',
+    googleCalendarApiKey: 'AIzaSyAQ46fgaqbekkmJqaKR0NCXntaJA6H8JoQ',
+    eventSources: Object.entries(calendars).map(([name, id]) => {
+      return {
+        googleCalendarId: id,
+        color: colors.pop(),
+      };
+    }),
+    slotLabelFormat: {
+      hour: 'numeric',
+      minute: '2-digit',
+      hour12: false,
+    },
+    eventTimeFormat: {
+      hour: 'numeric',
+      minute: '2-digit',
+      hour12: false,
+    },
+  };
+}
+</script>
+
+<style lang="scss"></style>
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..a0434ae
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,4 @@
+<body>
+  <div id="app"></div>
+  <script src="index.ts"></script>
+</body>
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000..844b31f
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,7 @@
+import Vue from 'vue';
+
+import App from './App';
+
+let app = new Vue({
+  render: h => h(App),
+}).$mount('#app');
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..a706abd
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "strict": true,
+    "module": "es2015",
+    "moduleResolution": "node"
+  }
+}