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

Question

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

此处描述的类似问题：

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

不幸的是，在引用的问题中没有提到如何在反应环境中解决这个问题。

Answer 1

我知道怎么做了。 eventRender 不再存在（v4）而是不同的“事件渲染挂钩”（v5）：

eventClassNames: 专门用于更改事件的.css
eventContent: 向事件中注入内容
和其他人（参见：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 应用于特定事件

通过这种方式，您可以根据添加到事件中的 self-defined 道具准确地告诉 FullCalendar 事件的外观。您的 self-defined 道具将被添加到 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;

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

Change width of event in FullCalendar (React JS)

css

fullcalendar

reactjs