yii2fullcalendar点击日期事件检测异常：始终返回false问题排查

问题场景 #

使用yii2fullcalendar扩展时，期望实现点击日历日期的交互逻辑：

• 若该日期存在事件，弹出模态框展示事件详情
• 若无事件，弹出添加事件的表单

编写了IsDateHasEvent函数用于检测日期是否存在事件，但无论点击哪个日期，函数始终返回false，alert事件数组时显示[object Object],[object Object],[object Object]。

检测事件的函数代码 #

function IsDateHasEvent(date) {
    var allEvents = [];
    allEvents = $('#w4').fullCalendar('clientEvents');
    var event = $.grep(allEvents, function(v) {
        return +v.start === +date;
    });
    return event.length > 0;
}

点击日期的处理代码 #

function(calEvent) {
var tanggal = calEvent.format(); 
console.log(IsDateHasEvent(tanggal));
if(!IsDateHasEvent(tanggal)){
    var base_url = window.location.origin;
    $.get('index', function(data) {
        $('#modal').modal('show').find('#modalContent').html(data)
    });
}
else{
    var base_url = window.location.origin;
    $.get(base_url+'/pacakplus/dailyreport/input?date='+tanggal, function(data) {
        $('#modal').modal('show').find('#modalContent').html(data)
    });
}
$('#w0').fullCalendar('unselect');
}

问题原因及修复方案 #

核心问题 #

1. 日期类型不匹配：calEvent.format()返回的是字符串格式的日期（如YYYY-MM-DD），而v.start是FullCalendar的Moment对象。直接用+v.start会转成时间戳数字，+date把字符串转数字会得到NaN，两者永远无法相等，导致$.grep找不到匹配事件，函数返回false。
2. alert显示的是事件对象数组：你alert的是allEvents变量，它是存储事件对象的数组，所以会显示[object Object]格式。

修复步骤 #

方案一：用Moment对象的日期比较方法

修改IsDateHasEvent函数，将传入的日期字符串转为Moment对象，再通过Moment的isSame方法判断是否为同一天：

function IsDateHasEvent(dateStr) {
    var targetDate = moment(dateStr);
    var allEvents = $('#w4').fullCalendar('clientEvents');
    var matchedEvents = $.grep(allEvents, function(v) {
        // 只比较日期部分，忽略时分秒
        return v.start.isSame(targetDate, 'day');
    });
    return matchedEvents.length > 0;
}

方案二：统一转成日期字符串比较

如果不想依赖Moment的方法，可将两者都转成YYYY-MM-DD格式的字符串再对比：

function IsDateHasEvent(dateStr) {
    var allEvents = $('#w4').fullCalendar('clientEvents');
    var matchedEvents = $.grep(allEvents, function(v) {
        var eventDate = v.start.format('YYYY-MM-DD');
        return eventDate === dateStr;
    });
    return matchedEvents.length > 0;
}

额外优化

点击处理函数可缓存检测结果，避免重复调用函数，同时明确指定日期格式：

function(calEvent) {
    var tanggal = calEvent.format('YYYY-MM-DD');
    var hasEvent = IsDateHasEvent(tanggal);
    console.log(hasEvent);
    
    var base_url = window.location.origin;
    var url = hasEvent ? base_url+'/pacakplus/dailyreport/input?date='+tanggal : 'index';
    
    $.get(url, function(data) {
        $('#modal').modal('show').find('#modalContent').html(data);
    });
    $('#w0').fullCalendar('unselect');
}

内容的提问来源于stack exchange，提问作者Safira