Question

日历显示日历和事件集（事件现在是硬编码的）。但是当我悬停在事件上时，工具提示没有显示。我在网上搜索了很多答案，没有一个对我有效，除了工具提示之外的其他所有内容正在工作。请帮助。以下是我的js代码

＆＃13;

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);
    };

}]);

＆＃13;

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

＆＃13;

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);
            }
        }
    };

}]);

＆＃13;

和html代码

＆＃13;

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

＆＃13;

根据答案更新代码..

＆＃13;

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

＆＃13;

Answer 1

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

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

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

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

至于我们在评论中的讨论 - 您正在获取＆＃34; TypeError：无法读取属性＆＃39; fullCalendar＆＃39;未定义＆＃34; 错误。请尝试以下

将$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>和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＆＃34;标题＆＃34;属性）。

ui-calendar工具提示功能无法正常工作

1 个答案: