FullCalendar重叠显示不正确的值

Question

嗨，我正在使用fullCalendar插件显示日历。 因为我有一个覆盖“窗口”，只要将鼠标悬停在一个对象上，它就会被激活。 它显示其他信息，例如该元素的位置和描述。

它可以与原始日历设置和数据以及常规的日，周和月视图一起正常工作。 但是我也不想创建删除周末，只显示工作周（星期一至星期五）的功能。

我决定通过销毁日历并使用新的默认设置（weekends：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 );

buttonclick函数：

/*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);
}

最后两个函数调用只是简单的forloops，它们将元素呈现为：

$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

Answer 2

好的，我不知道有没有人读过这本书，因为它已经有几天了，但是可以了。

我更改了日历的初始化方式：

$scope.uiConfig = {
    calendar:{
        height: 450,
        editable: true,
        weekNumbers: true,

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

HTML：

<div class="calendar" ng-model="eventSources" config="uiConfig.calendar" ui-calendar="uiConfig.calendar"></div>

对此：

$(document).ready(function() {

    $('.calendar').fullCalendar({
        height: 450,
        editable: true,
        weekNumbers: true,

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

HTML：

<div class="calendar" ng-model="eventSources" id="calendar"></div>

与其他方式不同，这使我可以使用以下方式动态更改日历选项中的值：

$scope.removeWeekends = function () {
    $('.calendar').fullCalendar('getView').calendar.options.weekends=false;
};

但是mouseOver叠加层现在根本不起作用。 或不显示任何内容。 它是从对象获得的值，因为例如，如果我将鼠标悬停在带有日历的日历对象之一之前的带有工具提示的按钮上，它将起作用，但对于所有事件仅显示相同的对象值。

叠加层的HTML：

<div class="panel bg-white b-a pos-rlt">
        <span class="arrow"></span>
        <div class="h4 font-thin m-b-sm">{{event.title}}</div>
        <div class="line b-b b-light"></div>
        <div><i class="icon-calendar text-muted m-r-xs"></i> {{event.start | date:'medium'}}</div>
        <div class="ng-hide" ng-show='event.end'><i class="icon-clock text-muted m-r-xs"></i> {{event.end | date:'medium'}}</div>
        <div class="ng-hide" ng-show='event.location'><i class="icon-pointer text-muted m-r-xs"></i> {{event.location}}</div>
        <div class="m-t-sm">{{event.info}}</div>
      </div>