Question

您好我使用fullCalendar插件来显示日历。我有一个叠加窗口＆＃39;只要将鼠标悬停在对象上，就会激活它。它显示额外的信息，例如该元素的位置和描述。

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

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

这实际上带来了一点小问题：任何人都可以解释为什么当我按这个顺序调用这两个函数时它工作正常，但是如果我先调用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>

FullCalendar叠加层未显示正确的值

2 个答案: