改变fc-content fullcalendar中img的位置 [英] Changing the position of img inside fc-content fullcalendar

问题描述

我试图在fullcalendar的 .fc-content 内改变图片的位置而不改变内容的位置。

$ b $（b）pre $ 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'>）; $（b）b
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 但没有任何工作。我试图在单元格左下方缺席处显示交叉标记，在单元格右下方显示勾号检查标记。

$ b 图片来自控制器;

pre> var presentEventList = from present 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（））;

返回Json（completeList，JsonRequestBehavior.AllowGet）;


解决方案

我建议为每种类型应用不同的类（事件标题匹配更好，你可以通过 className 来定义），然后它甚至需要成为一个图像吗？你可以完全通过CSS来处理这个问题（但图像也可以工作 。）

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

因此，应用 className 给你各自的元素，所以你可以很容易地为它们着色：

  className：all_day_event
  

使用这个简单的CSS来演示

  .fc-event {
 height：20px; 
职位：亲属; 
 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; 
位置：绝对; 
 left：2px; 
 top：2px; 
颜色：＃00aa00; 
背景颜色：＃006600; 
 display：inline-block; 
 padding：0 4px; 
 height：16px; 
 line-height：16px; 
} 
 
 .all_day_event：before {
 content：✔; 
 padding：0 2px; 
颜色：＃aa0000; 
背景颜色：＃550000; 
} 
  

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

解决方案

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

这篇关于改变fc-content fullcalendar中img的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！