Changing img position inside fc-content fullcalendar

Question

I am trying to reposition the image inside .fc-content fullcalendar without repositioning the 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'>"); } 

I tried position = relative , bottom = 0 , float = right , but nothing worked. I’m trying to display a “cross” sign on the missing one at the bottom left of the cell, where as a “tick” mark on the present in the lower right corner of the cell.

UPDATED:

The image comes 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); 

Answer 1

I would recommend applying a different class to each type of event (much better than a match in the title of the event, you can determine through className ), and then even need this image? You can handle this completely with CSS (but the image will work too )

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

Therefore, apply className to the corresponding elements so that you can easily colorize them:

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

Answer 2

You must define the css properties in the style attribute as follows:

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

you also lack the alt attribute. alt attribute is required for images