在 Fullcalendar 中自定义事件

Question

目前，事件组件看起来是这样的：

我想自定义它，最终的结果应该是这样的：

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$' },
        ]
      }
    },

在 fullcalendar v5 版本的

eventDidMount

钩子中我放置了函数 (

<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('')}
    `
  }
}