Changing the position of img inside fc-content fullcalendar

Question

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

It would make far more sense to make this change in HTML/CSS. Could you please edit that code in to your question — Rory McCrossan, Nov 28 '17 at 08:40
@RoryMcCrossan this resides inside and eventRender function, no HTML but a json returns the image from the controller. — , Nov 28 '17 at 08:42

SubjectCurio · Answer 1 · 2017-11-28T09:12:12.687

4

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

edited Nov 28 '17 at 09:12

answered Nov 28 '17 at 09:06

SubjectCurio

4,702
3
32
46

This shows the `content: "✔";` beside the event, which I already have in my current view. I need to have the mark sign on the right bottom and cross on the left bottom of the cell – Nov 28 '17 at 09:12
1

As it's absolute positioning its completely configurable with usage of standard css top/right/bottom/left, eg: https://jsfiddle.net/xL5wLfob/1/ – SubjectCurio Nov 28 '17 at 09:15
It's still residing inside the event content, I want it to be at the bottom most right where the event title has its gap in between. – Nov 28 '17 at 09:16
for example with the all_day_event set to `bottom:2px; right:2px;`, it is stuck to the bottom right corner, to get a gap between event title (without making the cross/tick tiny) you'd just need additional height https://jsfiddle.net/xL5wLfob/4/. – SubjectCurio Nov 28 '17 at 09:25
But this also pulls down the color of the event along with itself. – Nov 28 '17 at 09:28
@Mogambo of course it does - the tick / cross are part of the event. What else should it do? You can't make them part of the outer cell, because a) it's a problem if there are multiple events on that day, and b) it won't work at all in non-month views. Do you mean that the title text should have a background-color, and but not the whole event? Personally I think the version you had before asking the question is better - it looks neater and uses up less space, but provides the same functionality. The requirement to put them below the title is messy and creates wasted blank space IMHO. – ADyson Nov 28 '17 at 10:15
@ADyson I understand but I wanted the tick mark to be separated from the title. Like I already mentioned, at the bottom right corner of the cell. Since I will be populating more icons later on, I want them all to be aligned at the bottom of the cell "Separated from the title" For a) there arent any multiple events on any of those days b) it doesnt have to be shown on non-month views – Nov 28 '17 at 10:47

score 0 · Answer 2 · answered Nov 28 '17 at 08:42

0

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

answered Nov 28 '17 at 08:42

Eduard Void

2,646
1
13
13

1

Actually you shouldn't - inline css is the worst practice ever. – norbidrak Nov 28 '17 at 08:44
yes, you're right. I was trying to point out the place where the problem is. His question was not about performance. – Eduard Void Nov 28 '17 at 09:00
I tried this too `eventElement.find("div.fc-content").prepend("");` but it doesn't work – Nov 28 '17 at 09:05
@EduardVoid not using inline CSS is not about performance either, really, it's about maintainability and re-usability of the code. (In fact, people have claimed that inlining your CSS can actually increase aspects of performance (e.g. load time) in some cases). – ADyson Nov 28 '17 at 09:58
I have experience, where removing inline css speed up load time. But maybe it was caused by re-usable classes. I know it. I answered what is wrong with his code. If he ask for the best practice I will never suggest inline code. – Eduard Void Nov 28 '17 at 10:20

Changing the position of img inside fc-content fullcalendar

2 Answers2

Linked