javascriptreactjscalendarevent-handlingfullcalendar

Customizing events in Fullcalendar


Currently, the event component looks as follows:

single event component

I want to customize it, and the final result should look as follows:

customized event component


Solution

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