Change width of event in FullCalendar (React JS)

Question

I like to change the width of an event in context of React JS.

Similiar questions described here:

• How to edit width of event in FullCalendar?
• Change Fullcalendar width
• ...

Unfortunately, in the quoted questions is nothing mentioned how to solve this in a react environment.

Answer 1

I figured it out how to do it. eventRender does no longer exist (v4) but instead different "event render hooks" (v5):

• eventClassNames: Specifically for changing the .css of an event
• eventContent: To inject content into the event
• and others (see:https://fullcalendar.io/docs/event-render-hooks)

Now, depending what you want to achieve, there are two ways to do this in React JS. (Note: I used TypeScript)

Applying CSS change to all events

We can use styled to create our own .css definition for any event and use that as a wrapper (StyleWrapper)

import React from 'react';
import FullCalendar from '@fullcalendar/react';
import timeGridPlugin from '@fullcalendar/timegrid';
import styled from '@emotion/styled';
export interface ISampleProps {}

//our Wrapper that will go around FullCalendar
export const StyleWrapper = styled.div`
    .fc-event {
        width: 98px !important;
    }
`;
//Reacct Functional Component
const Sample: React.FunctionComponent<ISampleProps> = (props) => {
    
    const events = [ 
       /*some events */  
    ];

    return (
        <>
            <div>
                <StyleWrapper>
                    <FullCalendar
                        plugins={[timeGridPlugin]}
                        initialView="timeGridWeek"
                        events={events}
                    />
                </StyleWrapper>
            </div>
        </>
    );
};

export default Sample;

Apply specific CSS to specific events

With this way, you can tell FullCalendar exactly how an event has to look like depending self-defined props you add to an event. Your self-defined props will be added to extendedProps which will be used in our event render hook eventClassNames

//same imports from earlier (but you don't need "styled" for this one)
const Sample: React.FunctionComponent<ISampleProps> = (props) => {

     function eventAddStyle(arg: any) {
        //all self-created props are under "extendedProps"
        if (arg.event.extendedProps.demanding) {
            return ['maxLevel']; //maxLevel and lowLevel are two CSS classes defined in a .css file 
        } else {
            return ['lowLevel'];
        }
    }  

    const events = [ 
        {
            id: 'a',
            title: 'This is just an example',
            start: '2022-03-19T12:30:00',
            end: '2022-03-19T16:30:00',
            backgroundColor: '#74AAEB',
            demanding: true //our self-created props
        },
        {
            id: 'b',
            title: 'This is another example',
            start: '2022-03-17T08:00:00',
            end: '2022-03-17T11:30:00',
            demanding: false // our self-created props
        }, 
    ];
    return (
        <>
            <div>
                <FullCalendar
                    plugins={[timeGridPlugin]}
                    initialView="timeGridWeek"
                    eventClassNames={eventAddStyle}
                    events={events}
                />
            </div>
        </>
    );
};

export default Sample;