diff --git a/package.json b/package.json index 63f5106..f289ebf 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/index.ts b/src/index.ts index 67294a2..21c00ef 100644 --- a/src/index.ts +++ b/src/index.ts @@ -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)) { - return eventData; + eventData.title = `${member}`; + eventData.resourceId = tool; + if (!toolFilter) { + calendar.addResource({ id: tool, title: tool }, false); } } - return false; + return eventData; } 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');