Changing the position of img inside fc-content fullcalendar

问题

I am trying to change the position of the image inside the .fc-content of fullcalendar without changing the content's position.

            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'>");
            }

I have tried position = relative, bottom = 0, float = right but nothing worked. I am trying to display the "cross" mark on the absent to bottom left of the cell, where as the "tick-check" mark on the present to the bottom right of the cell.

UPDATED:

The image is coming from the 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);

回答1:

I'd recommend applying a different class to each type of event (much nicer that matching on event title, you can define via className), and then does it even need to be an image? You could handle this entirely via CSS (but an image would work too.)

For example https://jsfiddle.net/xL5wLfob/

So apply a className to you respective elements, so you can colour them easily:

className: "all_day_event"

Using this shonky CSS to demonstrate

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

回答2:

You should define css properties in style attribute like this:

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

you are missing alt attribute, too. alt atribute is mandatory for images

来源：https://stackoverflow.com/questions/47527202/changing-the-position-of-img-inside-fc-content-fullcalendar

标签

javascript

jquery

css

asp.net-mvc

fullcalendar