Initial Commit, functional basic calendar
This commit is contained in:
commit
c54de508e5
9
.editorconfig
Normal file
9
.editorconfig
Normal 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
4
.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
/node_modules/
|
||||
/.cache/
|
||||
/dist/
|
||||
/package-lock.json
|
3
.prettierrc
Normal file
3
.prettierrc
Normal file
@ -0,0 +1,3 @@
|
||||
trailingComma: es5
|
||||
singleQuote: true
|
||||
jsxBracketSameLine: true
|
25
package.json
Normal file
25
package.json
Normal 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
62
src/App.vue
Normal 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
4
src/index.html
Normal file
@ -0,0 +1,4 @@
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="index.ts"></script>
|
||||
</body>
|
7
src/index.ts
Normal file
7
src/index.ts
Normal 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
8
tsconfig.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"strict": true,
|
||||
"module": "es2015",
|
||||
"moduleResolution": "node"
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user