javascript - FullCalendar 叠加层不显示正确的值

Question

您好，我正在使用 fullCalendar 插件来显示日历。因为我有一个覆盖“窗口”，每当有人将鼠标悬停在对象上时就会激活该窗口。它显示额外的信息，例如该元素的位置和描述。

它可以很好地处理原始日历设置和数据以及常规的日、周和月 View 。但我也不想创建一个删除周末并仅显示工作周(周一至周五)的功能。

我决定通过销毁日历并使用新的默认设置(周末:false)重新初始化它并再次渲染事件来实现此目的。这是点击按钮即可激活的功能。这就是覆盖开始失败的地方。根据我在单击按钮之前所做的操作，它要么仅显示一个空的叠加层，要么显示我在单击按钮之前悬停在其上的任何对象的信息。因此，无论我将鼠标悬停在哪个对象上，都会显示相同的信息。有人对出了什么问题以及我是否可以改变一些东西有任何意见吗？

叠加函数:

$scope.overlay = $('.fc-overlay');
$scope.alertOnMouseOver = function( event, jsEvent, view ){
    $scope.event = event;
    $scope.overlay.removeClass('left right top').find('.arrow').removeClass('left right top pull-up');
    var wrap = $(jsEvent.target).closest('.fc-event');
    var cal = wrap.closest('.calendar');
    var left = wrap.offset().left - cal.offset().left;
    var right = cal.width() - (wrap.offset().left - cal.offset().left + wrap.width());
    var top = cal.height() - (wrap.offset().top - cal.offset().top + wrap.height());
    if( right > $scope.overlay.width() ) {
        $scope.overlay.addClass('left').find('.arrow').addClass('left pull-up')
    }else if ( left > $scope.overlay.width() ) {
        $scope.overlay.addClass('right').find('.arrow').addClass('right pull-up');
    }else{
        $scope.overlay.find('.arrow').addClass('top');
    }
    if( top < $scope.overlay.height() ) {
        $scope.overlay.addClass('top').find('.arrow').removeClass('pull-up').addClass('pull-down')
    }
    (wrap.find('.fc-overlay').length == 0) && wrap.append( $scope.overlay );

按钮点击函数:

/*remove weekends from calendar*/
$scope.removeWeekends = function (noWeekend) {
    $(".calendar").fullCalendar('destroy');
    $(".calendar").fullCalendar({
        defaultView: 'agendaWeek',
        height: 400,
        editable: true,
        weekends: noWeekend,
        weekNumbers: true,

        header:{
            left: 'prev',
            center: 'title',
            right: 'next'
        },
        dayClick: $scope.alertOnEventClick,
        eventDrop: $scope.alertOnDrop,
        eventResize: $scope.alertOnResize,
        eventMouseover: $scope.alertOnMouseOver
    });

    $scope.renderAcademy($scope.academy);
    $scope.renderCourse($scope.events);
}

最后两个函数调用只是简单的 for 循环，将元素呈现为:

$scope.renderCourse= function (data) {
    for (var j = 0; j < data.length; j++) {
        $('.calendar').fullCalendar('renderEvent',{
            id: data[j].id,
            title: data[j].title,
            start:  data[j].start,
            end: data[j].end,
            className: data[j].className,
            editable: false,
            location: data[j].location,
            info: data[j].info
        }, true)
    }
};

这实际上带来了一个小问题:谁能解释为什么当我按这个顺序调用这两个函数时它工作得很好，但如果我先调用 renderCourse 函数，第二个函数似乎永远不会被调用？

Answer 1

Fullcalendar 已经支持通过将周末设置为 false 来隐藏周末的功能。您无需销毁/重新创建对象

更改:

editable: true,
weekends: noWeekend,

致:

editable: true,
weekends: false