3

日历以显示日历和一组事件（截至目前，事件被硬编码）。但是当我将鼠标悬停在事件上时，工具提示不会显示。我在网上搜索了很多答案，但没有一个对我有用，除了工具提示之外的所有其他东西都在工作。请帮助。以下是我的js代码

var app = angular.module('myApp', ['ui.calendar', 'ui.router']);
app.controller('myNgController', ['$scope', '$http', 'uiCalendarConfig', function($scope, $http, uiCalendarConfig) {

    $scope.SelectedEvent = null;
    var isFirstTime = true;

    $scope.events = [];
    $scope.eventSources = [$scope.events];
    $scope.events.push({
        title: "event",
        description: "jahsojoaisjjoijaso",
        start: new Date("2017-05-03"),
        end: new Date("2017-05-03"),
        allDay: false,
        stick: false
    });

    $scope.uiConfig = {
        calendar: {
            height: 450,
            editable: false,
            displayEventTime: false,
          
            header: {
                left: 'month basicWeek basicDay agendaWeek agendaDay',
                center: 'title',
                right: 'today prev,next'
            },
            eventClick: function(event) {
                $scope.SelectedEvent = event;
            },
            eventAfterAllRender: function() {
                if ($scope.events.length > 0 && isFirstTime) {
                    //Focus first event
                    uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.events[0].start);
                    isFirstTime = false;
                }
            }
        }
    };
    
    
    
    $scope.eventRender = function( event, element, view ) { 
        element.attr({'tooltip': event.title,
                     'tooltip-append-to-body': true});
        $compile(element)($scope);
    };

}]);

如果我尝试以下代码，整个事件就会消失。事件不再显示在日历上

var app = angular.module('myApp', ['ui.calendar', 'ui.router']);
app.controller('myNgController', ['$scope', '$http', 'uiCalendarConfig', function($scope, $http, uiCalendarConfig) {

    $scope.SelectedEvent = null;
    var isFirstTime = true;

    $scope.events = [];
    $scope.eventSources = [$scope.events];
    $scope.events.push({
        title: "event",
        description: "jahsojoaisjjoijaso",
        start: new Date("2017-05-03"),
        end: new Date("2017-05-03"),
        allDay: false,
        stick: false
    });

    $scope.uiConfig = {
        calendar: {
            height: 450,
            editable: false,
            displayEventTime: false,
          
            header: {
                left: 'month basicWeek basicDay agendaWeek agendaDay',
                center: 'title',
                right: 'today prev,next'
            },
            eventClick: function(event) {
                $scope.SelectedEvent = event;
            },
            eventAfterAllRender: function() {
                if ($scope.events.length > 0 && isFirstTime) {
                    //Focus first event
                    uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.events[0].start);
                    isFirstTime = false;
                }
            },
            eventRender : function( event, element, view ) { 
                element.attr({'tooltip': event.title,
                             'tooltip-append-to-body': true});
                $compile(element)($scope);
            }
        }
    };

}]);

和html代码

<h1> calendar</h1>
            <div ng-controller="myNgController">
               <div class="row">
                  <div class="col-md-8">
                     <div id="calendar" ui-calendar="uiConfig.calendar" ng-model="eventSources" calendar="myCalendar"></div>
                  </div>
                  <div class="col-md-4">
                     <div class="alert alert-success" style="margin-top:50px" ng-controller="MyDbController">
                        <h2 style="margin-top:0px;text-align:center;" ng-repeat="elem in data"> {{elem.balance}}  Available  </h2>
                        <a ui-sref="apply" onclick="closeNav()" class="btn btn-success" role="button" style="display: block; margin: 0 auto;" >Reques(s)</a>
                     </div>
                  </div>
               </div>
            </div>

根据答案更新代码..

var app = angular.module('myApp', ['ui.calendar', 'ui.router']);
app.controller('myNgController',['$scope', '$timeout', '$http', '$compile', 'uiCalendarConfig', function($scope, $timeout, $http, $compile, uiCalendarConfig){

    $scope.SelectedEvent = null;
    var isFirstTime = true;

    $scope.events = [];
    $scope.eventSources = [$scope.events];
    $scope.events.push({
        title: "event",
        description: "jahsojoaisjjoijaso",
        start: new Date("2017-05-03"),
        end: new Date("2017-05-03"),
        allDay: false,
        stick: false
    });

    $scope.uiConfig = {
        calendar: {
            height: 450,
            editable: false,
            displayEventTime: false,
          
            header: {
                left: 'month basicWeek basicDay agendaWeek agendaDay',
                center: 'title',
                right: 'today prev,next'
            },
            eventClick: function(event) {
                $scope.SelectedEvent = event;
            },
            eventRender : function( event, element, view ) { 
                element.attr({'tooltip': event.title,
                             'tooltip-append-to-body': true});
                $compile(element)($scope);
            },
            eventAfterAllRender: function() {
                if ($scope.events.length > 0 && isFirstTime) {
                    //Focus first event
                	$timeout(function(){
                	uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.events[0].start);
                    isFirstTime = false;
                });
                }
            }
           
            
        }
    };

4

1 回答 1

1

您必须在日历配置定义（参考）中设置该功能：

$scope.uiConfig = {
    calendar: {
        eventRender: $scope.eventRender,
        ... reset of the configuration
    }
}

不要忘记注入$compile您的控制器：

app.controller('myNgController', ['$scope', '$http', '$compile', 'uiCalendarConfig', function($scope, $http, $compile, uiCalendarConfig) {

至于我们在评论中的讨论-您收到“TypeError：无法读取未定义的属性'fullCalendar'”错误。尝试以下

注入$timeout控制器：

app.controller('myNgController', ['$scope', '$timeout', '$http', '$compile', 'uiCalendarConfig', function($scope, $timeout, $http, $compile, uiCalendarConfig) {

并用以下内容包装这一行$timeout：

uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.events[0].start);

所以最终的结果将是：

$timeout(function() {
    uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.events[0].start);
});

这将确保您fullCalendar仅在视图完成渲染后调用。

对于甜点 - 看看你是如何设置工具提示的：

element.attr({
    'tooltip': event.title,
    'tooltip-append-to-body': true
});

请注意，它添加了tooltip="<title of event>and tooltip-append-to-body="true，但为了显示工具提示，您需要设置一个title属性。将其更改为：

element.attr({
    'title': event.title,
    'tooltip-append-to-body': true
});

我猜你认为它是 Bootstrap.UI 工具提示（http://angular-ui.github.io/bootstrap/#!#tooltip），所以在这种情况下，你需要进行必要的更改才能正确实现它。但是使用title将确保在将鼠标悬停在事件上时，浏览器会向您显示默认工具提示（使用本机 HTML“标题”属性）。

于 2017-05-11T11:41:50.223 回答