Clever Geek Handbook

Tooltip ui-calendar function not working

a calendar to display a calendar and a set of events (events are currently hardcoded). But when I hover over the event, the tooltip is not displayed. I searched a lot of answers on the internet and none worked for me, everything else except the hint works. Please help. The following is my js code

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

}]);
Run codeHide result


and if I try the following code the whole event disappears. The event is no longer displayed on the calendar

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

}]);
Run codeHide result


and html code

<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>
Run codeHide result


updated code as per the answer.

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;
                });
                }
            }
           
            
        }
    };
Run codeHide result


+3


source to share


1 answer


You have to set this feature in the calendar configuration definition ( Link ):

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

Don't forget to enter $compile

into the controller:

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

As for our discussion in the comments - you get "TypeError: Unable to read property" fullCalendar "of undefined". Try the following

Paste $timeout

into controller:

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

And wrap this line with $timeout

:

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


So the end result will be:

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

This will fullCalendar

only cause you to call when the view has finished rendering.

And for dessert - watch how you set the tooltip:

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

Note that it adds tooltip="<title of event>

and tooltip-append-to-body="true

, but you need to set the attribute to show the tooltip title

. Change it to:

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

I think you think this is a Bootstrap.UI hint ( http://angular-ui.github.io/bootstrap/#!#tooltip ), so in this case you need to make the necessary changes to implement it correctly. But using it title

ensures that while hovering over the event, the browser will show you the default tooltip (using the native HTML header attribute).

0


source






More articles:


All Articles