FullCalendar

Question

为了满足设计要求，必须在具有 timeGridWeek[=40] 的 FullCalendar 的左上角显示自定义 icon/text =] 和 resourceTimeGridDay 观看次数。

我试过了，但也许这是不可能的，顺便说一句，我在 FullCalendar v5 和 React17*

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

example

initialView: 'timeGridWeek',

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

在遵循了这里的一些建议之后，我最终得到了这样的结果：

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 的唯一 class。一种方法是使用 class 添加具有所需内容的伪元素。如果要渲染图像，可以使用 fontawesome 或背景图像之类的东西。

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

另一种选择是，绑定到 viewDidMount 挂钩，并直接改变 DOM 元素：

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

Answer 2

您可以使用 viewDidMount render hook 并定位其中的那个元素

 var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    initialView: 'timeGridWeek',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'timeGridWeek,timeGridDay'
    },
    events: 'https://fullcalendar.io/demo-events.json',
    viewDidMount :function(view){
      
      view.el.querySelector('.fc-timegrid-axis-frame').innerHTML ='Foo'
      console.log(v)
    }
  });

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

FullCalendar - Is it possible to set custom content on the top left cell?

reactjs

fullcalendar-5