FullCalendar -可以在左上角单元格上设置自定义内容吗？
FullCalendar -可以在左上角单元格上设置自定义内容吗？
提问于 2021-07-14 15:19:00
为了满足设计需求，必须在带有resourceTimeGridDay、timeGridWeek、和视图的FullCalendar的左上角显示自定义图标/文本。
我试过了，但也许这是不可能的，我在FullCalendar v5和React 17*
所以，让我说清楚，我想在这个样本中：
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-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";
}回答 2
Stack Overflow用户
回答已采纳
发布于 2021-07-18 00:03:57
看起来这个单元格有一个独特的fc-timegrid-axis类。一种方法是使用该类添加一个包含所需内容的伪元素。如果你想渲染一个图像，你可以使用像方阵或背景图像这样的东西。
.fc-timegrid-axis:after {
content: 'hello'
}另一个选项是绑定到viewDidMount钩子上，并直接变异DOM元素：
<FullCalendar
viewDidMount={({ el }) => {
$(el).find('.fc-timegrid-axis').html("<span>Your content</span>");
}}
/>Stack Overflow用户
发布于 2021-07-18 00:21:29
您可以使用渲染钩并将其内的元素作为目标。
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)
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68380801
复制相关文章
相似问题
腾讯云开发者
