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

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

View File

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

View File

@ -8,9 +8,8 @@ if (!window.Intl) {
}
import { EventInput, Calendar, CalendarOptions } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import iCalendarPlugin from '@fullcalendar/icalendar';
import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid';
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 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
delete eventData.url;
const match = eventData?.title?.match(/([^\/]*) \| ([^-]*) - (.*)/);
if (match) {
const [, member, shop, tool] = match;
eventData.title = `${tool} - ${member}`;
if (toolFilter === null || tool.includes(toolFilter)) {
eventData.title = `${member}`;
eventData.resourceId = tool;
if (!toolFilter) {
calendar.addResource({ id: tool, title: tool }, false);
}
}
return eventData;
}
}
return false;
}
const calendarOptions: CalendarOptions = {
plugins: [timeGridPlugin, dayGridPlugin, iCalendarPlugin],
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
plugins: [iCalendarPlugin, resourceTimeGridPlugin],
allDaySlot: false,
nowIndicator: true,
initialView: 'timeGridWeek',
initialView: 'resourceTimeGrid',
height: 'auto',
slotMinTime: '8:00',
slotMaxTime: '22:00',
@ -75,6 +76,14 @@ const calendarOptions: CalendarOptions = {
minute: '2-digit',
hour12: false,
},
resources: toolFilter
? toolFilter.map((tool) => {
return {
id: tool,
title: tool,
};
})
: [],
};
const calendarEl = document.getElementById('calendar');