在 FullCalendar (React JS) 中更改事件的宽度

Question

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

这里描述的类似问题：

• 如何在全日历中编辑事件的宽度？
• 更改全日历宽度
• 。

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

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 应用于特定事件

通过这种方式，您可以根据添加到事件的自定义道具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;