reactjs - FullCalendar - 是否可以在左上角单元格上设置自定义内容？

Question

为了满足设计要求，自定义图标/文本必须显示在带有timeGridWeek和resourceTimeGridDay的FullCalendar的左上角> View 。

我已经尝试过，但也许这是不可能的，顺便说一句，我在 FullCalendar v5 和 React 17 下*

所以为了让自己清楚，我想在这个示例中:

example

initialView: 'timeGridWeek',

在左上角单元格上设置自定义内容，例如 map 图例。

遵循这里的一些建议后，我最终的结果是:

   viewDidMount={({ el }: {el:any}) => {                             const topLeftCorner = el.querySelector('.fc-timegrid-axis-frame');                             ReactDOM.render(<div className="fullcalendar-top-left-icon"><WhateverAntdIcon /></div>,                                 topLeftCorner)}}

但是由于我也有 dayMinWidth 属性，所以到目前为止我的方法仅适用于桌面。我仍然需要找到一种方法使其适用于移动设备或使用 css 方法并安装 Awesomefont。

最后我按照 @levi 的建议用 FontAwesome 做到了，谢谢!我刚刚添加了 @font-face 以避免重载我的包:

@font-face {
font-family: "FontAwesome";
font-weight: normal;
font-style : normal;
       src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
       src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
             url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
             url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"),
             url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
             url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
}

.fc-timegrid-axis-frame::before { {
    font-family: FontAwesome;
    content: "\f024";
}

Answer 1

看起来该单元格有一个独特的类fc-timegrid-axis。一种方法是使用该类添加具有所需内容的伪元素。如果您想渲染图像，可以使用 fontawesome 或背景图像之类的东西。

.fc-timegrid-axis:after {
  content: 'hello'
}

另一个选项是绑定(bind)在 viewDidMount 钩子(Hook)上，并直接改变 DOM 元素:

<FullCalendar
    viewDidMount={({ el }) => {
       $(el).find('.fc-timegrid-axis').html("<span>Your content</span>");
  }}
/>