Изменить ширину события в FullCalendar (React JS)

Я понял, как это сделать. eventRender больше не существует (v4), а вместо этого есть другие «перехватчики рендеринга событий» (v5):

• eventClassNames: Специально для изменения .css события.
• eventContent: для добавления контента в событие.
• и другие (см.:https://fullcalendar.io/docs/event-render-хуки)

Теперь, в зависимости от того, чего вы хотите достичь, в React JS есть два способа сделать это. (Примечание: я использовал TypeScript)

Применение изменения CSS ко всем событиям

Мы можем использовать styled, чтобы создать собственное определение .css для любого события и использовать его в качестве оболочки (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;

Применение определенного CSS к определенным событиям

Таким образом, вы можете точно сказать FullCalendar, как должно выглядеть событие, в зависимости от самоопределяемых реквизитов, которые вы добавляете к событию. Ваши самоопределяемые реквизиты будут добавлены в extendedProps, которые будут использоваться в нашем хуке рендеринга событий 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;