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

Use proxied ics files instead of google-calendar api

Browse Source 
This means we don't need to expose a google API key to clients
This commit is contained in:
Adam Goldsmith 2021-11-12 13:36:39 -05:00
parent f1995232bb
commit 087601ba31
4 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -2,4 +2,3 @@
/.cache/ /.cache/
/dist/ /dist/
/package-lock.json /package-lock.json
/src/secrets.json

3
package.json
View File

@ -16,10 +16,11 @@
}, },
"dependencies": { "dependencies": {
"@fullcalendar/core": "^5.10.0", "@fullcalendar/core": "^5.10.0",
"@fullcalendar/google-calendar": "^5.6.0", "@fullcalendar/icalendar": "^5.10.1",
"@fullcalendar/timegrid": "^5.6.0", "@fullcalendar/timegrid": "^5.6.0",
"@fullcalendar/vue3": "^5.10.0", "@fullcalendar/vue3": "^5.10.0",
"equicolor": "^1.1.0", "equicolor": "^1.1.0",
"ical.js": "github:ekreative/ical.js#var-ical",
"intl": "^1.2.5", "intl": "^1.2.5",
"vue": "^3.2.20" "vue": "^3.2.20"
} }

10
src/App.vue
View File

@ -14,9 +14,7 @@ import FullCalendar, {
} from '@fullcalendar/vue3'; } from '@fullcalendar/vue3';
import timeGridPlugin from '@fullcalendar/timegrid'; import timeGridPlugin from '@fullcalendar/timegrid';
import dayGridPlugin from '@fullcalendar/daygrid'; import dayGridPlugin from '@fullcalendar/daygrid';
import googleCalendarPlugin from '@fullcalendar/google-calendar'; import iCalendarPlugin from '@fullcalendar/icalendar';
import { googleCalendarApiKey } from './secrets.json';
const calendars: { [key: string]: string } = { const calendars: { [key: string]: string } = {
computer_lab: '6mmjp85e4732ru6skf1dda54ls@group.calendar.google.com', computer_lab: '6mmjp85e4732ru6skf1dda54ls@group.calendar.google.com',
@ -34,12 +32,11 @@ const colors: string[] = equicolor.findNextColors(
); );
const calendarOptions: CalendarOptions = { const calendarOptions: CalendarOptions = {
plugins: [timeGridPlugin, dayGridPlugin, googleCalendarPlugin], plugins: [timeGridPlugin, dayGridPlugin, iCalendarPlugin],
allDaySlot: false, allDaySlot: false,
nowIndicator: true, nowIndicator: true,
initialView: 'timeGridWeek', initialView: 'timeGridWeek',
height: 'auto', height: 'auto',
googleCalendarApiKey,
slotMinTime: '8:00', slotMinTime: '8:00',
slotMaxTime: '22:00', slotMaxTime: '22:00',
businessHours: { businessHours: {
@ -49,7 +46,8 @@ const calendarOptions: CalendarOptions = {
}, },
eventSources: Object.values(calendars).map((id, idx) => { eventSources: Object.values(calendars).map((id, idx) => {
return { return {
googleCalendarId: id, url: "/calendar/ical/" + id + "/public/basic.ics",
format: "ics",
color: colors[idx], color: colors[idx],
eventDataTransform: eventDataTransform, eventDataTransform: eventDataTransform,
}; };

8
vite.config.ts
View File

@ -10,4 +10,12 @@ export default defineConfig({
targets: ['defaults', 'not IE 11', "ios 8.4"] targets: ['defaults', 'not IE 11', "ios 8.4"]
}), }),
], ],
server: {
proxy: {
'/calendar': {
target: 'https://calendar.google.com',
changeOrigin: true,
},
},
},
}); });