Tuesday, 20 July 2021

How to add custom HTML before each row in FullCalendar?

I'm using FullCalendar 5.8 and would like to add custom HTML before each row. My current code is:

import React from 'react'
import ReactDOM from 'react-dom';
import FullCalendar from '@fullcalendar/react'
import bootstrapPlugin from '@fullcalendar/bootstrap';
import dayGridPlugin from '@fullcalendar/daygrid';

ReactDOM.render(
    <FullCalendar
        themeSystem={'bootstrap'}
        plugins={[bootstrapPlugin, dayGridPlugin]}
        initialView={'dayGridMonth'}
    />,
    document.querySelector('#js-events')
);

Which results in:

Event calendar basic

Is there some kind of event I could use to hook into the rendering process to add some HTML code before each row as show on the image below?

Ideally I would NOT like to alter HTML, but use FullCalendar's native event system.

Desired calendar

I'd be grateful for any snippet or hint. Thanks a million.



from How to add custom HTML before each row in FullCalendar?

No comments:

Post a Comment