jquery - FullCalendar fc-more 在弹出窗口中显示大量重复项

Question

我正在使用 FullCalendar，并且 fc-more 链接存在一个持续存在的错误，该错误显示日历中列出的事件的重复项。

底层 mysql 调用不会产生重复。我认为当事件跨越多天时，日历中的某些内容会产生重复。不确定。有趣的是，为 fc-more 显示的数字是准确的，但一旦单击，弹出窗口就会产生重复的数字。

我附上了几张图片来展示正在发生的事情。我想知道是否有人遇到过类似的问题。

这是生成提要数据的代码

while($row = mysqli_fetch_array($data)) {
    $uniqueid = base64_encode($row['id']);
    $a_json_row["id"] = $row['JobID'];
    $projectid = base64_encode($row['JobID']);
    $company = new Company();
    $company->load($mysqli,$row['CompanyID']);
    $a_json_row["start"] = htmlentities(stripslashes($row['ShowOpen']));
    $a_json_row["end"] = htmlentities(stripslashes($row['ShowClose']));
    $show = htmlentities(stripslashes($row['Show']));
    $project = htmlentities(stripslashes($row['JobID']));
    $mycompany = htmlentities(stripslashes($company->CompanyName));
    $BoothSize = htmlentities(stripslashes($row['BoothSize']));
    if($userid == ''){                       
        $user = new User();
        $user->load($mysqli, $row['AccountManager']);
        $initials = getInitials($user->name);
        $initials = "($initials)";
    }else{
        $initials = '';
    }
    $a_json_row["title"] = "$initials $BoothSize $project"; // $mycompany 

    if($row['Status'] == 7){             
            $a_json_row["color"] = htmlentities("#F1C40F");  // yellow
            $a_json_row["textColor"] = htmlentities('black');             
    }elseif(($row['Status'] == 6)||($row['Status'] == 2)){    
            $a_json_row["color"] = htmlentities("#1a6fad");
            $a_json_row["textColor"] = htmlentities('white');
    }elseif(($row['Status'] == 8)||($row['Status'] == 9)){    
            $a_json_row["color"] = htmlentities("#93AFBF");   // bluish
            $a_json_row["textColor"] = htmlentities('white');
    }elseif($row['Status'] == 4){    
            $a_json_row["color"] = htmlentities("#28B463");  // green
            $a_json_row["textColor"] = htmlentities('white');
    }elseif($row['Status'] == 1){    
            $a_json_row["color"] = htmlentities("#beb098");  // tan
            $a_json_row["textColor"] = htmlentities('white');
    }elseif($row['Status'] == 13){    
            $a_json_row["color"] = htmlentities("#922B21");   // red
            $a_json_row["textColor"] = htmlentities('white');
    }else{    // "Opportunity" = 1
            $a_json_row["color"] = htmlentities("#717D7E");  // gray
            $a_json_row["textColor"] = htmlentities('white');
    }   

    $a_json_row["url"] = "project.php?j=$projectid";
    array_push($a_json, $a_json_row);
}

这是 jQuery

$(document).ready(function() {

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },
        defaultDate: (new Date()).toISOString().substring(0, 10),
        navLinks: true, // can click day/week names to navigate views
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        events: 'include/feed.php',
        eventClick: function(event) {
          if (event.url) {
            window.open(event.url);
            return false;
          }
        }
    });

    $('#calendar').fullCalendar({
        events: function(callback) {
            $.ajax({
                url: 'include/feed.php',
                success: function(doc) {
                    var events = [];
                    $(doc).find('event').each(function(){
                        events.push({
                            id: $(this).attr('id'),
                            title: $(this).attr('title'),
                            start: $(this).attr('start'), // will be parsed
                            url: $(this).attr('url'),
                            color: $(this).attr('color'),
                            textColor: $(this).attr('textColor')
                        });
                    });
                    callback(events);
                }
            });
        }
    });       
});

这是一些示例数据

[{"id":"100041","start":"2019-07-30","end":"2019-07-31","title":"(JG) permanent install-office 100041","color":"#F1C40F","textColor":"black","url":"link.php?j=MTAwMDQx"},{"id":"100063","start":"2019-01-13","end":"2019-01-15","title":"(TJ) 20x20 100063","color":"#717D7E","textColor":"white","url":"link.php?j=MTAwMDYz"},{"id":"100070","start":"2019-02-12","end":"2019-02-14","title":"(KS) 50x80 100070","color":"#717D7E","textColor":"white","url":"link.php?j=MTAwMDcw"},{"id":"100129","start":"2019-05-20","end":"2019-05-22","title":"(AB) 20 x 30 100129","color":"#93AFBF","textColor":"white","url":"link.php?j=MTAwMTI5"},{"id":"100131","start":"2019-06-19","end":"2019-06-21","title":"(ME) 10x10 100131","color":"#717D7E","textColor":"white","url":"link.php?j=MTAwMTMx"},{"id":"100132","start":"2019-06-19","end":"2019-06-21","title":"(ME) 10x10 100132","color":"#717D7E","textColor":"white","url":"link.php?j=MTAwMTMy"},{"id":"100138","start":"2019-06-24","end":"2019-06-26","title":"(ML) 20x20 (2 of 2) 100138","color":"#F1C40F","textColor":"black","url":"link.php?j=MTAwMTM4"},{"id":"100139","start":"2019-08-25","end":"2019-08-27","title":"(ML) 10x20 (2 of 3) 100139","color":"#28B463","textColor":"white","url":"link.php?j=MTAwMTM5"},{"id":"100163","start":"2018-11-03","end":"2018-11-07","title":"(JG) 20x30 pull & prep 100163","color":"#717D7E","textColor":"white","url":"link.php?j=MTAwMTYz"}]

提要数据不包含任何重复。并且数字“更多+”链接不会多次计算条目。但是弹出窗口包含重复项。

这里还有几张屏幕截图，特别强调了 2019 年 6 月 6 日这一天。这一天有 6 个事件，其中一个 100996 在弹出窗口中重复了 6 次，而其他事件则没有。 Feed 数据不包含 100996 的 6 条记录，仅包含 1 条。

弹出代码中存在重复事件的内容，可能与事件跨越数天或数周的时间有关。

Answer 1

为了解决这个问题，我更改了 fullcalendar.js 函数，该函数通过在显示之前从弹出窗口中删除重复事件来生成日期弹出窗口，代码块约为第 8390 行。希望这可以帮助其他人节省一些时间。在 fullcalendar github 页面上看到了类似的错误报告。

原版

resliceDaySegs: function(segs, dayDate) {
  var dayStart = dayDate.clone();
  var dayEnd = dayStart.clone().add(1, 'days');
  var dayRange = new UnzonedRange(dayStart, dayEnd);
  var newSegs = [];
  var i;

  for (i = 0; i < segs.length; i++) {
    newSegs.push.apply(newSegs, this.eventFootprintToSegs(segs[i].footprint, dayRange));
  }
  this.sortEventSegs(newSegs);
  return newSegs;
},

到此

resliceDaySegs: function(segs, dayDate) {
    var dayStart = dayDate.clone();
    var dayEnd = dayStart.clone().add(1, 'days');
    var dayRange = new UnzonedRange(dayStart, dayEnd);
    var newSegs = [];
    var i;

    for (i = 0; i < segs.length; i++) {
        newSegs.push.apply(newSegs, // append
            this.eventFootprintToSegs(segs[i].footprint, dayRange)
        );
    }

    var unique = [];
    var newSegsX = [];

    $.each(newSegs, function(i,el){

        if($.inArray(el.footprint.eventDef.id, unique) === -1){
            unique.push(el.footprint.eventDef.id);
            newSegsX.push(el);
        } 
    });

    this.sortEventSegs(newSegsX);
    return newSegsX;
},