javascript - 根据月份显示jquery完整日历中的行和列总数

Question

我有一个 Jquery 完整日历。要在完整日历中显示的值是从 json 中获取的。这是 Fiddle

完整的日历 HTML 代码

<div id='calendar'></div>
<div id='cols'></div>

J查询代码

var baseEvent;

var $calendar = $('#calendar').fullCalendar({
header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
},
editable: true,
selectable: true,
selectHelper: true,
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"}

    ]
 });

var counts = [0,0,0,0,0,0,0];

baseEvent = $('#calendar').fullCalendar( 'clientEvents')
baseEvent.forEach(function(event) {
counts[event.start.getDay()] += parseInt(event.title);
});



counts.forEach(function(count) {
$('#cols').append(' <label>'+count+'</label> ')
});

我面临的问题是，这会计算该特定列中月份的全部值。我正在尝试实现一种仅在显示的月份显示总值行和列的解决方案。

for eg:- Default loaded month is November.. I want to show values of columns and rows of only for the month of November. When i click to the previous month(October) then only October values for rows and columns has to be displayed. How to achieve this???

Answer 1

步骤:

• 当日历呈现时(发生在初始化和 View 中 更改)，将行和列计数器设置为 0 并在第一行中搜索 灰色的日期。这是您添加到每个事件日期的偏移量 你开始计算行数/列数。
• 检查呈现的每个事件。如果是在当月，则继续。
• 获取事件的日期，增加偏移量，并将其值添加到行和列数组。
• 在最后一个事件呈现后，更新 dom 对象。

(注意，这是针对 fullcalendar v1。v2 使用 Moment 而不是 Date 对象。)

The Fiddle

<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>
    <label>0</label>
</div>      

var $calendar = $('#calendar').fullCalendar({
    ...
    eventRender: eventRenderCallback,
    viewRender: viewRenderCallback,
    eventAfterAllRenderCallback: eventAfterAllRenderCallback,
    ...
});

var rowTotals = [];
var columnTotals = [];
var offset = 0;

function eventRenderCallback(event,element){
    var viewDateMonth = $('#calendar').fullCalendar('getDate').getMonth();
    if(event.start.getMonth() == viewDateMonth){
        addToDateArray(event.start.getDate(), parseInt(event.title));
    }
}

function eventAfterAllRenderCallback(view){
    for (var i = 0; i < 6; i++){
        var label = $("#rows label:nth-child(" + (i+1) + ")");
        label.html(rowTotals[i]);     
    }
    for (var i = 0; i < 7; i++){
        var label = $("#cols label:nth-child(" + (i+1) + ")");
        label.html(columnTotals[i]);     
    }
}

function viewRenderCallback(view,element){
    offset = $("tr.fc-week.fc-first td.fc-other-month").length;
    rowTotals = [0,0,0,0,0,0];
    columnTotals = [0,0,0,0,0,0,0];

    if(view.name == "agendaDay"){
        $("#rows label").show();
        $("#cols label").hide();
        $("#cols label:nth-child(" + (view.start.getDay()+1) + ")").show();
    }else if(view.name == "agendaWeek"){
        $("#cols label").show();
        $("#rows label").hide();
        var row = Math.floor((view.start.getDate() + offset - 1) / 7);
        $("#rows label:nth-child(" + (row+1) + ")").show();
    }else {
        $("#cols label").show();
        $("#rows label").show();
    }
}                   

function addToDateArray(date,num){
    var pos = date + offset;
    var row = Math.floor((pos - 1) / 7);
    var col = (pos - 1) % 7

    rowTotals[row] += num;
    columnTotals[col] += num;
}