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

Use Resource TimeGrid view; we can use it for free since we are a non-profit

Browse Source
This commit is contained in:
Adam Goldsmith 2021-11-15 20:24:53 -05:00
parent 134fdd5d08
commit fc487ee0b8
2 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -25,7 +25,7 @@
"dependencies": { "dependencies": {
"@fullcalendar/core": "^5.10.0", "@fullcalendar/core": "^5.10.0",
"@fullcalendar/icalendar": "^5.10.1", "@fullcalendar/icalendar": "^5.10.1",
"@fullcalendar/timegrid": "^5.6.0", "@fullcalendar/resource-timegrid": "^5.10.1",
"core-js": "^3.19.1", "core-js": "^3.19.1",
"ical.js": "github:ekreative/ical.js#var-ical", "ical.js": "github:ekreative/ical.js#var-ical",
"intl": "^1.2.5", "intl": "^1.2.5",

29
src/index.ts
View File

@ -8,9 +8,8 @@ if (!window.Intl) {
} }
import { EventInput, Calendar, CalendarOptions } from '@fullcalendar/core'; import { EventInput, Calendar, CalendarOptions } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import iCalendarPlugin from '@fullcalendar/icalendar'; import iCalendarPlugin from '@fullcalendar/icalendar';
import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid';
import { unique_colors } from 'unique-colors'; import { unique_colors } from 'unique-colors';
@ -27,28 +26,30 @@ const calendars: { [key: string]: string } = {
const colors: string[] = unique_colors(Object.keys(calendars).length); const colors: string[] = unique_colors(Object.keys(calendars).length);
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
const toolFilter: string | null = urlParams.get('tool'); const toolFilter: string[] | undefined = urlParams.get('tool')?.split(';');
function eventDataTransform(eventData: EventInput): EventInput | false { function eventDataTransform(eventData: EventInput): EventInput {
// clear the url to prevent clicking on the event // clear the url to prevent clicking on the event
delete eventData.url; delete eventData.url;
const match = eventData?.title?.match(/([^\/]*) \| ([^-]*) - (.*)/); const match = eventData?.title?.match(/([^\/]*) \| ([^-]*) - (.*)/);
if (match) { if (match) {
const [, member, shop, tool] = match; const [, member, shop, tool] = match;
eventData.title = `${tool} - ${member}`; eventData.title = `${member}`;
if (toolFilter === null || tool.includes(toolFilter)) { eventData.resourceId = tool;
return eventData; if (!toolFilter) {
calendar.addResource({ id: tool, title: tool }, false);
} }
} }
return false; return eventData;
} }
const calendarOptions: CalendarOptions = { const calendarOptions: CalendarOptions = {
plugins: [timeGridPlugin, dayGridPlugin, iCalendarPlugin], schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
plugins: [iCalendarPlugin, resourceTimeGridPlugin],
allDaySlot: false, allDaySlot: false,
nowIndicator: true, nowIndicator: true,
initialView: 'timeGridWeek', initialView: 'resourceTimeGrid',
height: 'auto', height: 'auto',
slotMinTime: '8:00', slotMinTime: '8:00',
slotMaxTime: '22:00', slotMaxTime: '22:00',
@ -75,6 +76,14 @@ const calendarOptions: CalendarOptions = {
minute: '2-digit', minute: '2-digit',
hour12: false, hour12: false,
}, },
resources: toolFilter
? toolFilter.map((tool) => {
return {
id: tool,
title: tool,
};
})
: [],
}; };
const calendarEl = document.getElementById('calendar'); const calendarEl = document.getElementById('calendar');