Question

我只是从FullCalendar开始，我正在一个 react 项目中实现它，现在一切都很好，但是我想自定义实际的日历，希望它能满足客户的需求。

我的问题：是否可以像这样在FullCalendar组件中添加 classname ：（我尝试过，但是我的css文件中找不到类名）

                <FullCalendar
                  className= "FullCalendarMonthClient"
                  defaultView= "dayGridMonth"
                  plugins={[dayGridPlugin]} 
                  columnHeaderFormat= {{                    
                    weekday: "long"
                  }} 
                  locale="fr"
                  events={[
                    { title: 'event 1', start: '2019-12-06', end: '2019-12-07' },
                    { title: 'event 1', start: '2019-12-06', end: '2019-12-07' }
                  ]}
                />

，然后使用它用css自定义我的日历。我在同一页面上使用其他日历，即DayView，这就是为什么我要求在组件中放置类名的原因，以便我可以在不触摸Monthview的情况下设置dayview / monthview的样式。或者我该如何创建自己的主题？

感谢社区

Answer 1

确实，样式包装器有效。例如，尝试更改日历中的按钮（下一个、上一个）：

{
  "name": "discord-hypixel-bridge",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "author": "Squag",
  "license": "GPL-3.0",
  "dependencies": {
    "discord.js": "^12.5.1",
    "mineflayer": "^2.40.0",
    "colors": "^1.4.0",
    "follow-redirects": "^1.13.1",
    "safe-buffer": "^5.2.1",
    "nearley": "^2.20.0"
  },
  "scripts": {
    "start": "node ."
  }
}

Answer 2

您可以创建样式化的包装程序，以覆盖内部样式。

import FullCalendar from "@fullcalendar/react";
import styled from "@emotion/styled";


export const StyleWrapper = styled.div`
  .fc td {
    background: red;
  }
`


const MyApp = ()=> {
  return (
    <StyleWrapper>
      <FullCalendar/>
    </StyleWrapper>
  );
}

是否有可能在反应中使用CSS自定义FullCalendar？

2 个答案: