如何在"全日历"标题部分添加图像？

Question

我想在全日历标题部分显示一些文本以及旁边的图像。

我有一个完整的日历，根据日期在下面的列中显示名称作为标题和相对数据。我想在旁边显示名称和图片。我尝试附加 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 元素附加到标题之前的输出。

我尝试将 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);
        }                       
    });

这是将其他 html 元素附加到标题后的输出。

预期成果

Answer 1

你需要 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>';
  }

Answer 2

你必须使用 resourceRender 函数来修改元素。

   resourceRender: function(resourceObj,labelTds, bodyTds) {
      labelTds.append('<img src="<your img url>">'); //using jquery to append the image tag to the element
    },

附言资源 Obj 将保存您的所有资源信息。您可以向保存图像 URL 的资源对象添加一个新值，然后在 resourceRender 函数中使用它。