在FullCalendar中自定义日单元格内容
我使用的是全日历和react。我正在尝试自定义dayGrid视图。根据用于反应的内容注入文档，我可以使用自定义内容来呈现日期和头单元格。dayCellContent“钩子”指出：
生成的内容插入到日单元格的最内部包装器中。它不能取代细胞。
我为dayCellContent提供了一个实现，并注意到我的内容被注入到以下结构中：
<td class="fc-daygrid-day fc-day fc-day-wed fc-day-past rot_time-off_day-cell" data-date="2021-04-07">
<div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
<div class="fc-daygrid-day-top">
<a class="fc-daygrid-day-number">
...custom content goes here
</a>
</div>
<div class="fc-daygrid-day-events"></div>
<div class="fc-daygrid-day-bg"></div>
</div>
</td>现在的问题是，由于元素的位置，此结构只允许您在日期单元格的右上角中插入内容。此外，它是在一个锚元素。
示例：
function renderDayCell(dayCellContent: DayCellContentArg) {
return (
<div>
{dayCellContent.dayNumberText}
</div>
);
}
是否有一种干净的方法来自定义单元格的全部内容？我看到几个使用fullcalendar的站点将其内容直接插入到td中。不确定这是版本依赖的，还是使用基于domNodes或html的替代JS方法。我使用的是完整日历的5.6.0版本。
回答 2
Stack Overflow用户
发布于 2021-07-01 09:26:12
我有同样的要求，虽然没有使用React。按照上面的建议，我使用了DOM元素的手动操作来解决这个问题。我使用jQuery进行选择和操作。如果有人希望看到如何使用DOM操作实现此操作的示例，本文将在此发布。
我实现了dayCellContent，通过将其封装在span中，使日-单元格DOM元素易于识别，并根据年份的日期使用唯一的id属性：
dayCellContent: function(info, create) {
const element = create('span', { id: "fc-day-span-"+info.date.getDayOfYear() }, info.dayNumberText);
return element;
},这个dayCellContent实现对日历没有明显的影响，但可以更容易地识别要在DOM中修改的元素。
然后，通过查找适当的单元格并选择其父单元格的父单元格，实现了dayCellDidMount来执行DOM操作：
dayCellDidMount: function(info) {
let element = "<div style='position: absolute; left: 4px; top: 4px;'><a href='https://www.w3schools.com/'>TEST-"+info.dayNumberText+"</a></div>";
$('#fc-day-span-'+info.date.getDayOfYear()).parent().parent().prepend(element);
},在本例中，我刚刚在单元格的左上角放置了一个指向w3c的链接，其中包含测试文本，其中还包括天数。它会产生这样的细胞：
显然，CSS可以改进，应该移到CSS定义中，但它说明了这一点。
警告：这种方法对FullCalendar生成的DOM结构进行了假设。生成的HTML可能会在产品的未来版本中发生更改，从而使其失效。如果您这样做，那么在执行FullCalendar更新时要小心。
注意，getDayOfYear函数来自ext-all.js库。任何唯一识别这一天的方法都会奏效。
Stack Overflow用户
发布于 2022-04-07 04:29:26
ngAfterViewInit(){ // CSS作为文本变量样式=.fc td, .fc th { vertical-align: top; padding: 0; height: 100px; } a{ color:#3d1cba; }
let styleSheet = document.createElement("style");
styleSheet.innerText = styles;
document.head.appendChild(styleSheet);
let arrTD = document.querySelectorAll('td.fc-timeline-slot');
let arrTR= document.querySelectorAll('td.fc-timeline-lane.fc-resource');
let arrInject= document.querySelectorAll('td.fc-timeline-lane.fc-resource>div.fc-timeline-lane-frame');
console.log(arrTR);
let k=-1;
arrTR.forEach(eachTR => {
let i=1;
let str = '';
k++;
let data_resource_id= eachTR.getAttribute('data-resource-id');
console.log(data_resource_id);
arrTD.forEach(eachTD => {
let k=100*(i-1);
i=i+1;
let data_date= eachTD.getAttribute('data-date');
console.log(data_date);
let data_resource_id= eachTR.getAttribute('data-resource-id');
console.log(data_resource_id);
str = str + '<span data-date="'+data_date+'" data-resource-id="'+data_resource_id+'" class="plus_icon" style="position:relative;top: 0px; left: '+k+'px !important;width:500px;height:500px;z-index:3;-moz-border-radius:100px;border:1px solid #ddd;-moz-box-shadow: 0px 0px 8px #fff;">+</span>';
});
arrInject[k].innerHTML=str;
});
let elementList = this.elRef.nativeElement.querySelectorAll('span.plus_icon');
for(let i=0;i<elementList.length;i++){
elementList[i].addEventListener('click', this.plusClick.bind(this));
}}
https://stackoverflow.com/questions/67231349
复制相似问题
腾讯云开发者
