fullcalendar - 如何在“fullcalendar”标题部分添加图像?
问题描述
我想在全日历标题部分中显示一些文本以及旁边的图像。
我有一个完整的日历,根据日期在下面的列中显示名称作为标题和相关数据。我想在它旁边显示名称以及图片。我尝试为测试目的附加 html 元素,但没有得到预期的结果。
这是为标题分配值的部分
$.map(SomeJSON, function (resourceitem, i) {
var resource = new Object();
resource.id = resourceitem.UserID.toString();
resource.title = resourceitem.UserName;
if (resourceitem.UserID == scheduleitem.AssignedStaff) {
$('div[id*=calendarAgendaSchedule]').fullCalendar('addResource',
resource, scroll);
}
});
我尝试将 html 标记附加到标题。
$.map(SomeJSON, function (resourceitem, i) {
var resource = new Object();
resource.id = resourceitem.UserID.toString();
resource.title = resourceitem.UserName+'<div class="text-accent">test</div> ';
if (resourceitem.UserID == scheduleitem.AssignedStaff) {
$('div[id*=calendarAgendaSchedule]').fullCalendar('addResource',
resource, scroll);
}
});
解决方案
你需要resourceRender。试试下面的代码。它是在每个资源的左侧显示图像的工作代码,但您可以使用一些 css 来实现您的期望。
resourceRender: function(res){
let imageStyles= "background:url('../assets/media/users/100_4.jpg') left center no-repeat;\
border-radius:50%;\
width: 30px;\
height: 30px;\
background-size: 35px;\
margin-right:10px;\
display: inline-block;"
let elStyles = "display: flex;\
justify-content: center;\
align-items: center;"
res.el.innerHTML = '<div style="'+elStyles+'">\
<div style="'+imageStyles+'">\
</div><div>'+res.resource.title+'</div>\
</div>';
}
推荐阅读
- ios - 多次调用自定义意图的小部件 getTimeline 方法
- laravel - 我在 laravel-modules 中定义的路由出错
- javascript - 你如何阻止 chrome.tabs.executeScript()
- mysql - 如何在 JOINED 表的 SQL UNION 中 ORDER BY 未在结果中显示有序列
- react-native - 当 SectionList 完成渲染时更新状态
- javascript - 如何在博客中添加欢迎语?
- matplotlib - 如何在 Matplotlib 的 f 字符串中显示 LaTeX 大括号
- windows - 带有 .exe 和 .bgi 文件的软件中的兼容性问题
- python-3.x - 无法使用 dbc 文件从 MF4 中提取 Flexray 信号
- haproxy - 使用 Docker (Zalando Spilo) 使用 HA PostgreSQL 集群配置 HAProxy 2.2