Javascript FullCalendar overlay不'；不能显示正确的值

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

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

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

最后两个函数调用只是简单的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)
    }
};

$scope.renderCourse=函数（数据）{
对于（var j=0；j

---

这实际上带来了一个小问题：有人能解释一下为什么我按此顺序调用这两个函数时效果很好，但是如果我先调用renderCourse函数，第二个函数似乎永远不会被调用吗？

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

更改：

editable: true,
weekends: noWeekend,

致：

---

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

更改：

editable: true,
weekends: noWeekend,

致：

---

好吧，我不知道是否有人会读到这篇文章，因为它已经有几天了，但现在开始了

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

$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:

HTML:

但是鼠标覆盖层现在根本不起作用。或者它没有显示任何内容。它是从对象中获取的值，因为如果我将鼠标悬停在一个按钮上，在其中一个日历对象之前有一个工具提示，它会工作，但只显示所有事件的相同对象值

覆盖的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>

{{event.title}
{{event.start}日期：'medium'}
{{event.end}日期：'medium'}
{{event.location}
{{event.info}

好的，我不知道有没有人会读到这篇文章，因为它已经有几天了，但现在开始了

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

$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:

HTML:

但是鼠标覆盖层现在根本不起作用。或者它没有显示任何内容。它是从对象中获取的值，因为如果我将鼠标悬停在一个按钮上，在其中一个日历对象之前有一个工具提示，它会工作，但只显示所有事件的相同对象值

覆盖的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>

{{event.title}
{{event.start}日期：'medium'}
{{event.end}日期：'medium'}
{{event.location}
{{event.info}

一般来说，我不想周末去那里。就在这一个按钮上，我不想让他们走。我至少无法在不破坏/重新创建的情况下，将该函数的周末设置更改为false。当我尝试时，日历就消失了。一般来说，我不想周末去那里。就在这一个按钮上，我不想让他们走。我至少无法在不破坏/重新创建的情况下，将该函数的周末设置更改为false。当我尝试时，日历就会消失。使用自定义视图怎么样？类似这样的情况：我不确定它在最初的初始化中是否工作（参见下面的答案）。使用新的初始化，它肯定会工作。但是我现在也可以轻松地将周末设置为真/假，因此不需要这样做。现在的问题更多的是覆盖。使用自定义视图怎么样？类似这样的情况：我不确定它在最初的初始化中是否工作（参见下面的答案）。使用新的初始化，它肯定会工作。但是我现在也可以轻松地将周末设置为真/假，因此不需要这样做。现在的问题更多的是覆盖层。

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

<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>