Customizing events in Fullcalendar

Question

Currently, the events look like here

I want to render with some HTML tags and custom styles. Eventually, it should look like here

Answer 1

This post gave me a tip to solve my issue - https://stackoverflow.com/questions/3408723/display-more-text-in-fullcalendar

Event object looks this way:

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

In fullcalendar v5 version in eventDidMount hook I put function (<FullCalendar eventDidMount={returnContent} />) that looks the following way:

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