Replicate the structure of event content in week view

Keeps the classes/formatting
This commit is contained in:
Adam Goldsmith 2022-10-14 11:41:01 -04:00
parent 3a221a0e93
commit 473fe22fb1
3 changed files with 25 additions and 4 deletions

View File

@ -33,6 +33,7 @@
"@fullcalendar/timegrid": "^5.11.3", "@fullcalendar/timegrid": "^5.11.3",
"core-js": "^3.25.5", "core-js": "^3.25.5",
"intl": "^1.2.5", "intl": "^1.2.5",
"preact": "^10.11.1",
"unique-colors": "^1.0.1" "unique-colors": "^1.0.1"
} }
} }

View File

@ -16,6 +16,7 @@ specifiers:
css-loader: ^6.7.1 css-loader: ^6.7.1
file-loader: ^6.2.0 file-loader: ^6.2.0
intl: ^1.2.5 intl: ^1.2.5
preact: ^10.11.1
style-loader: ^3.3.1 style-loader: ^3.3.1
ts-loader: ^9.4.1 ts-loader: ^9.4.1
typescript: ^4.8.4 typescript: ^4.8.4
@ -33,6 +34,7 @@ dependencies:
'@fullcalendar/timegrid': 5.11.3 '@fullcalendar/timegrid': 5.11.3
core-js: 3.25.5 core-js: 3.25.5
intl: 1.2.5 intl: 1.2.5
preact: 10.11.1
unique-colors: 1.0.1 unique-colors: 1.0.1
devDependencies: devDependencies:

View File

@ -1,7 +1,8 @@
import '@fullcalendar/core'; import '@fullcalendar/core';
import { CalendarOptions } from '@fullcalendar/core'; import { CalendarOptions, EventContentArg } from '@fullcalendar/core';
import timeGridPlugin from '@fullcalendar/timegrid'; import timeGridPlugin from '@fullcalendar/timegrid';
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'; import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
import { createElement } from 'preact';
import { common_calendarOptions, main } from './common'; import { common_calendarOptions, main } from './common';
@ -23,13 +24,30 @@ const calendarOptions: CalendarOptions = {
resourceTimeline: 'day', resourceTimeline: 'day',
}, },
initialView: 'resourceTimeline', initialView: 'resourceTimeline',
eventContent: (arg) => { eventContent: (arg: EventContentArg, h: typeof createElement) => {
if (arg.view.type != 'resourceTimeline') { if (arg.view.type != 'resourceTimeline') {
let resources = arg.event let resources = arg.event
.getResources() .getResources()
.map((resource) => resource.id) .map((resource) => resource.id.trim())
.join('; '); .join('; ');
return `${resources}: ${arg.event.title} ${arg.timeText}`; return h(
'div',
{ class: 'fc-event-main' },
h(
'div',
{ class: 'fc-event-main-frame' },
h('div', { class: 'fc-event-time' }, arg.timeText),
h(
'div',
{ class: 'fc-event-title-container' },
h(
'div',
{ class: 'fc-event-title fc-sticky' },
`${resources}: ${arg.event.title}`
)
)
)
);
} }
}, },
}; };