在fc-content fullcalendar

Question

我正在尝试更改fullcalendar的.fc-content内的图像位置而不更改内容的位置。

            if ((event.title).toString() == "Present") {
                eventElement.find("div.fc-content").prepend("<img src='" + event.imageurl + "' width='24' height='24' position = 'relative' float = 'right' bottom = '0'>");
            }
            else if ((event.title).toString() == "Absent"){
                eventElement.find("div.fc-content").prepend("<img src='" + event.imageurl + "' width='24' height='24' position = 'relative' bottom = '0'>");
            }

我尝试了position = relative，bottom = 0，float = right但没有任何效果。我试图在单元格的左下方缺少显示“交叉”标记，其中当前位于单元格右下方的“勾选”标记。

更新：

图像来自控制器;

var presentEventList = from e in presentDates
                                           select new
                                           {
                                               id = EnrollNumber,
                                               title = "Present",
                                               start = ((DateTime)e.Date).ToString("s"),
                                               end = ((DateTime)e.Date).ToString("s"),
                                               borderColor = "#ffffff",
                                               color = "#07b419",
                                               imageurl= "/images/checked.png",
                                               allDay = false
                                           };
                    var presentRows = presentEventList.ToArray();

                    var absentEventList = from e in absentDates
                                           select new
                                           {
                                               id = EnrollNumber,
                                               title = "Absent",
                                               start = ((DateTime)e.Date).ToString("s"),
                                               end = ((DateTime)e.Date).ToString("s"),
                                               borderColor = "#ffffff",
                                               color = "#fa0303",
                                               imageurl = "/images/cross.png",
                                               allDay = false
                                           };
                    var absentRows = absentEventList.ToArray();

                    var completeList = (presentEventList.Concat(absentEventList).ToArray());

                    return Json(completeList, JsonRequestBehavior.AllowGet);

Answer 1

我建议为每种类型的事件应用不同的类（在事件标题上匹配得更好，你可以通过className定义），然后它甚至需要成为一个图像？你可以通过CSS完全处理这个问题（但an image would work也是如此。）

例如https://jsfiddle.net/xL5wLfob/

因此，对您的各个元素应用className，以便您可以轻松地为它们着色：

className: "all_day_event"

使用这个shonky CSS来演示

.fc-event {
  height:20px;
  position:relative;
  padding-left:18px !important;
  line-height:20px !important;
}
.all_day_event {
  background-color:#aa0000 !important;
  border: 1px solid #aa0000 !important;
}

.long_event {
  background-color:#00aa00 !important;
  border: 1px solid #00aa00 !important;
}

.all_day_event:before, .long_event:before {
  content:"x";
  position:absolute;
  left:2px;
  top:2px;
  color:#00aa00;
  background-color:#006600;
  display:inline-block;
  padding:0 4px;
  height:16px;
  line-height:16px;
}

.all_day_event:before {
  content: "✔";
  padding:0 2px;
  color:#aa0000;
  background-color:#550000;
}

Answer 2

您应该在style属性中定义css属性，如下所示：

<img src="..." alt="" style="width:24px;height:24px;position:relative;float:right" />

你也缺少alt属性。 alt atribute对于图像是必需的