在Fullcalendar中自定义事件

Question

目前，事件看起来像这里的

我想用一些HTML标记和自定义样式进行渲染。最终，它应该看起来像这里

Answer 1

这篇文章给了我一个解决问题的技巧-https://stackoverflow.com/questions/3408723/display-more-text-in-fullcalendar

事件对象看起来是这样的：

title: ` ${firstname} ${lastname} `,
start: new Date("2022-10-10 12:00"),
end: new Date("2022-10-10 13:00"),
id: "1",
extendedProps: {
services: [
{ title: 'text1', price: '80$' },
{ title: 'text2', price: '90$' },
{ title: 'text3', price: '100$' },
]
}
},

在eventDidMount钩子中的fullcalendar v5版本中，我放置了函数(<FullCalendar eventDidMount={returnContent} />(看起来如下：

function returnContent(e) {
const time = e.timeText
const title = e.event['_def'].title
const services = e.event['_def'].extendedProps.services
if(services) {
e.el.innerHTML = `
${time}
${title}
${services.map(({title, price}) => (
`<div class={customClasses}>
<span>${title}</span>
<span>${price}</span>
</div>`
)).join('')}
`
}
}