CODEWITHSUNDEEP
javascriptfullcalendarfullcalendar-5
Mike Doe
Mike Doe

Reputation: 17576

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.

Upvotes: 1

Views: 738

Answers (1)

Mike Doe
Mike Doe

Reputation: 17576

The most reliable method I've found is altering the HTML using the viewDidMount property:

        viewDidMount={({el}) => {
            const calendarTbody = el.querySelector(
                '.fc-scrollgrid-sync-table > tbody'
            );

            for (const row of calendarTbody.querySelectorAll('tr')) {
                row.insertAdjacentHTML(
                    'afterbegin',
                    '<td class="fc-daygrid-day">content</td>'
                );
            }
        }}

Update:

This method is flawed though. It's called only once when the calendar renders and does not occur again when the calendar is re-rendered due to a month switch for example.

I need to modify the calendar's final HTML and was disappointed to find there's no such JS event which would give me access to the el object of the calendar when all the rendering is done. The eventDidMount seems useless. Any other suggestions pls?

Upvotes: 1

Related Questions