更改 FullCalendar 中事件的宽度（React JS）

Question

我喜欢在 React JS 上下文中更改事件的宽度。

此处描述的类似问题：

• 如何在 FullCalendar 中编辑事件的宽度？
• 更改 Fullcalendar 宽度
• ...

不幸的是，在引用的问题中什么也没有提到了如何在react环境中解决这个问题。

Answer 1

我想出了如何去做。 eventRender 不再存在 (v4)，而是不同的“事件渲染挂钩”(v5)：

• eventClassNames：专门用于更改事件
• eventContent< 的 .css /code>：将内容注入到事件
• 和其他事件中（请参阅：https://fullcalendar.io/docs/event-render-hooks）

现在，根据您想要实现的目标，在 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 事件的外观取决于您添加到的自定义道具 事件。您自定义的 props 将被添加到 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;