javascript - 更改 img 在 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 但没有任何效果。我试图在单元格左下角的缺席处显示“十字”标记，而在单元格右下角的“勾选”标记显示在当前位置。

更新:

图像来自 Controller ；

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;
}