Dynamically load Intl modules to allow code splitting
This commit is contained in:
parent
8e4202d658
commit
d9f7785a7d
81
src/index.ts
81
src/index.ts
@ -1,13 +1,4 @@
|
||||
// TODO: could probably be a dynamic import
|
||||
import intl from 'intl';
|
||||
import 'intl/locale-data/jsonp/en.js';
|
||||
|
||||
if (!window.Intl) {
|
||||
// No `Intl`, so use and load the polyfill.
|
||||
window.Intl = intl;
|
||||
}
|
||||
|
||||
import { EventInput, Calendar, CalendarOptions } from '@fullcalendar/core';
|
||||
import { Calendar, CalendarOptions } from '@fullcalendar/core';
|
||||
import iCalendarPlugin from '@fullcalendar/icalendar';
|
||||
import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid';
|
||||
|
||||
@ -31,22 +22,6 @@ const colors: string[] = unique_colors(Object.keys(calendars).length);
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const toolFilter: string[] | undefined = urlParams.get('tool')?.split(';');
|
||||
|
||||
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 = `${member}`;
|
||||
eventData.resourceId = tool;
|
||||
if (!toolFilter) {
|
||||
calendar.addResource({ id: tool, title: tool }, false);
|
||||
}
|
||||
}
|
||||
return eventData;
|
||||
}
|
||||
|
||||
const calendarOptions: CalendarOptions = {
|
||||
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
|
||||
plugins: [iCalendarPlugin, resourceTimeGridPlugin],
|
||||
@ -62,14 +37,6 @@ const calendarOptions: CalendarOptions = {
|
||||
startTime: '10:00',
|
||||
endTime: '21:00',
|
||||
},
|
||||
eventSources: Object.values(calendars).map((id, idx) => {
|
||||
return {
|
||||
url: '/calendar/ical/' + id + '/public/basic.ics',
|
||||
format: 'ics',
|
||||
color: colors[idx],
|
||||
eventDataTransform: eventDataTransform,
|
||||
};
|
||||
}),
|
||||
slotLabelFormat: {
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
@ -90,15 +57,49 @@ const calendarOptions: CalendarOptions = {
|
||||
: [],
|
||||
};
|
||||
|
||||
const calendarEl = document.getElementById('calendar');
|
||||
const calendar = new Calendar(calendarEl!, calendarOptions);
|
||||
function main() {
|
||||
const calendarEl = document.getElementById('calendar');
|
||||
const calendar = new Calendar(calendarEl!, calendarOptions);
|
||||
Object.values(calendars).forEach((id, idx) =>
|
||||
calendar.addEventSource({
|
||||
url: '/calendar/ical/' + id + '/public/basic.ics',
|
||||
format: 'ics',
|
||||
color: colors[idx],
|
||||
eventDataTransform: (eventData) => {
|
||||
// clear the url to prevent clicking on the event
|
||||
delete eventData.url;
|
||||
|
||||
calendar.render();
|
||||
const match = eventData?.title?.match(/([^\/]*) \| ([^-]*) - (.*)/);
|
||||
if (match) {
|
||||
const [, member, shop, tool] = match;
|
||||
eventData.title = `${member}`;
|
||||
eventData.resourceId = tool;
|
||||
if (!toolFilter) {
|
||||
calendar.addResource({ id: tool, title: tool }, false);
|
||||
}
|
||||
}
|
||||
return eventData;
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
function refresh() {
|
||||
calendar.render();
|
||||
|
||||
function refresh() {
|
||||
calendar.refetchEvents();
|
||||
calendar.today();
|
||||
}
|
||||
|
||||
// refresh data every five minutes
|
||||
window.setInterval(refresh, 5 * 60 * 1000);
|
||||
}
|
||||
|
||||
// refresh data every five minutes
|
||||
window.setInterval(refresh, 5 * 60 * 1000);
|
||||
if (!window.Intl) {
|
||||
// No `Intl`, so use and load the polyfill.
|
||||
import('intl').then((intl) => {
|
||||
window.Intl = intl;
|
||||
import('intl/locale-data/jsonp/en.js').then((_) => main());
|
||||
});
|
||||
} else {
|
||||
main();
|
||||
}
|
||||
|
1
src/intl.d.ts
vendored
Normal file
1
src/intl.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
declare module 'intl/locale-data/jsonp/en.js';
|
Loading…
Reference in New Issue
Block a user