Change width of event in FullCalendar (React JS) - css

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;