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