adam.goldsmith/reservations_display
1
0
Fork 0
Code Issues Pull Requests 1 Activity

Initial Commit, functional basic calendar

Browse Source
This commit is contained in:
Adam Goldsmith 2020-03-12 13:54:26 -04:00
commit c54de508e5
8 changed files with 122 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
.editorconfig Normal file
View File

@ -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

4
.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
/node_modules/
/.cache/
/dist/
/package-lock.json

3
.prettierrc Normal file
View File

@ -0,0 +1,3 @@
trailingComma: es5
singleQuote: true
jsxBracketSameLine: true

25
package.json Normal file
View File

@ -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"
}
}

62
src/App.vue Normal file
View File

@ -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>

4
src/index.html Normal file
View File

@ -0,0 +1,4 @@
<body>
<div id="app"></div>
<script src="index.ts"></script>
</body>

7
src/index.ts Normal file
View File

@ -0,0 +1,7 @@
import Vue from 'vue';
import App from './App';
let app = new Vue({
render: h => h(App),
}).$mount('#app');

8
tsconfig.json Normal file
View File

@ -0,0 +1,8 @@
{
"compilerOptions": {
"target": "es5",
"strict": true,
"module": "es2015",
"moduleResolution": "node"
}
}