Question

我的总值显示在列中，我试图使用分隔符来划分这些值（通过标签实现），我在线查找分隔符，但无法找到标签。

这是我正在处理的Fiddle。

请注意： - 我正在尝试按如下方式实现输出 700 | 300 | 300 | 200 | 250 | 200 | 250和行值应为850 | 550 | 500 | 300 | 0 | 0（注意，现在这是列式）我怎么做到这一点？请编辑我的小提琴任何解决方案。谢谢！

预期样品输出与分隔!! 完整的HTML代码： -

<div id='calendar'></div>
<div id='cols'>
<label>0</label>
<label>0</label>
<label>0</label>
<label>0</label>
<label>0</label>
<label>0</label>
<label>0</label>
</div>
<div id="rows">
<label>0</label>
<label>0</label>
<label>0</label>
<label>0</label>
<label>0</label>
<label>0</label>
</div>

完整的Jquery函数代码： - var baseEvent;

var $calendar = $('#calendar').fullCalendar({
header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
},
editable: true,
selectable: true,
selectHelper: true,
eventRender: eventRenderCallback,
viewRender: viewRenderCallback,
defaultView: 'month',
events: [
    {"title":"500","start":"Oct 1 2015"},   
    {"title":"50","start":"Oct 2 2015"},
    {"title":"500","start":"Oct 3 2015"},   
    {"title":"50","start":"Oct 4 2015"},
    {"title":"500","start":"Oct 6 2015"},   
    {"title":"50","start":"Oct 7 2015"},
    {"title":"500","start":"Oct 8 2015"},   
    {"title":"50","start":"Oct 9 2015"},
    {"title":"500","start":"Oct 10 2015"},   
    {"title":"50","start":"Oct 11 2015"},
    {"title":"500","start":"Oct 12 2015"},   
    {"title":"50","start":"Oct 13 2015"},
    {"title":"500","start":"Oct 14 2015"},   
    {"title":"50","start":"Oct 15 2015"},
    {"title":"500","start":"Oct 16 2015"},   
    {"title":"50","start":"Oct 17 2015"},
    {"title":"500","start":"Nov 1 2015"},   
    {"title":"50","start":"Nov 2 2015"},
    {"title":"100","start":"Nov 3 2015"},   
    {"title":"50","start":"Nov 4 2015"},
    {"title":"100","start":"Nov 5 2015"},   
    {"title":"50","start":"Nov 6 2015"},
    {"title":"100","start":"Nov 7 2015"},   
    {"title":"50","start":"Nov 8 2015"},
    {"title":"100","start":"Nov 9 2015"},   
    {"title":"50","start":"Nov 10 2015"},
    {"title":"100","start":"Nov 11 2015"},   
    {"title":"50","start":"Nov 12 2015"},
    {"title":"100","start":"Nov 13 2015"},   
    {"title":"50","start":"Nov 14 2015"},
    {"title":"100","start":"Nov 15 2015"},   
    {"title":"50","start":"Nov 16 2015"},
    {"title":"100","start":"Nov 17 2015"},   
    {"title":"50","start":"Nov 18 2015"},
    {"title":"100","start":"Nov 19 2015"},   
    {"title":"50","start":"Nov 20 2015"},
    {"title":"100","start":"Nov 21 2015"},   
    {"title":"50","start":"Nov 22 2015"},
    {"title":"100","start":"Nov 23 2015"},   
    {"title":"50","start":"Nov 24 2015"},

    {"title":"500","start":"Dec 1 2015"},   
    {"title":"50","start":"Dec 2 2015"}
    ]
});

function eventRenderCallback(event,element){
var viewDateMonth = $('#calendar').fullCalendar('getDate').getMonth();
if(event.start.getMonth() == viewDateMonth){
    addToTotalCol(event.start.getDay(), parseInt(event.title));
    addToTotalRow(Math.floor(event.start.getDate()/7),      parseInt(event.title));
}
}

function viewRenderCallback(view,element){
$("#cols label").html("0");
$("#rows label").html("0");
if(view.name == "agendaWeek"){
    $("#rows label").hide();
    $("#rows label:nth-child(" + (Math.floor(view.start.getDate()/7)+1) + ")").show();
}else{
    $("#rows label").show();        
}
if(view.name == "agendaDay"){
    $("#cols label").hide();
    $("#rows label").hide();
    $("#cols label:nth-child(" + (view.start.getDay()+1) + ")").show();
}else{
    $("#cols label").show();        
}
}                   

function addToTotalCol(col,num){
var label = $("#cols label:nth-child(" + (col+1) + ")");
label.html(num + Number(label.html()));
}

function addToTotalRow(row,num){
var label = $("#rows label:nth-child(" + (row+1) + ")");
label.html(num + Number(label.html()));
}

Answer 1

使用此CSS：

label {border-left: 1px solid #999; padding-left: 3px;}
label:first-child {border-left: 0;}

更新小提琴：http://jsfiddle.net/6jhkLh9x/17/

Answer 2

您可以使用边框或使用“content”属性：

http://jsfiddle.net/6jhkLh9x/18/

label:after {
    content: " |"
}

label:last-child:after {
    content: ""
}

Answer 3

由于您使用的日历（完整日历）组件，这有点棘手。它使用表格，因此您很难确定精确的宽度和高度，以便定位总计。在这种情况下做出响应将成为另一个挑战。另一个挑战是日历视图从月视图更改为周视图或日视图。在这种情况下，表格结构会发生变化，因此难以精确定位总计。

所以，你看到几乎不可能只用CSS做你想做的事。你必须依靠Javascript来完成某些部分。

这是你用CSS做的最好的事情：

cols：

div#calendar { width: 80vw; table-layout: fixed; }
table.fc-border-separate td > div { height: 60px; }
div#cols { width: 80vw; padding: 11px 0px; }
div#cols label {
    display: inline-block; position: relative;
    padding: 0px 4px; width: calc((80vw / 7) - 4px);
}
div#cols label:not(:last-child)::after {
    content: ''; display: block; position: absolute; 
    top: -50%; right: 0;
    border-right: 1px solid #eae1e1; height: 200%; width: 1px;
}

rows：

div#rows { 
    position: absolute; top: 72px; right: 8px; 
    width: 15%; height: auto;
}
div#rows label {
    box-sizing: border-box; display: block; 
    padding: 0px 4px; height: 68px;
}
div#rows label:not(:last-child) { border-bottom: 1px solid #eae1e1; }

小提琴：http://jsfiddle.net/abhitalks/5ht38now/

这里的想法是减少日历表的宽度，并使用剩余的宽度来绝对定位行总数。使用日历表宽度作为总计。在after s上使用label psuedo-element作为边框。当然，由于涉及到表格，因此可以通过反复试验来尝试相当多的宽度/高度。

css中标签的分隔符

3 个答案: