ui-calendar tooltip function not working

Question

calendar to display a calendar and set of events(events being hardcoded as of now).But when i hover on the event the tooltip is not displayed.I searched for many answers online and none worked for me ,Everything else except tooltip is working.Please help.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);
    };

}]);

and if i try the following code the whole event disappears.The event is no more displayed on the calender

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

}]);

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

updated code as per 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;
                });
                }
            }
           
            
        }
    };

Alon Eitan · Accepted Answer · 2017-05-11T13:40:14.943

1

You must set that function in the calendar configuration definition (Reference):

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

Don't forget to inject $compile to your controller:

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

As for our discussion in the comments - You're getting "TypeError: Cannot read property 'fullCalendar' of undefined" error. Try the following

Inject $timeout to the 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 final result will be:

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

This will make sure that you call fullCalendar only after the view was finished rendering.

And for dessert - Take a look on 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 in order to show the tooltip, you need to set a title attribute. Change it to:

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

I guess that you think it's Bootstrap.UI tooltip (http://angular-ui.github.io/bootstrap/#!#tooltip) so in that case you need to make the necessary changes to implement it correctly. But using title will ensure that while hovering over the event the browser will show you the default tooltip (Using the native HTML "title" attribute).

edited May 11 '17 at 13:40

answered May 11 '17 at 11:41

Alon Eitan

11,997
8
49
58

i have included all the dependencies – Vikhyath Maiya May 11 '17 at 12:29
updated the question again.I think i have added the myCalendar part as well – Vikhyath Maiya May 11 '17 at 12:36
@vikk See my updated answer, let me know if it helped – Alon Eitan May 11 '17 at 12:47
u mean to say just add $timeout(function() { uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.events[0].start); }); after closing ui.config right ? that shows the type error twice – Vikhyath Maiya May 11 '17 at 12:58
@vikk Yes, as described in the updated answer. I had a similar issue, so I looked at my code and saw that I solve it by wrapping it with `$timeout`, so just make sure you're wrapping that line – Alon Eitan May 11 '17 at 13:00
the same line is there in the eventAfterAllRender function right ...should i delete it or keep both – Vikhyath Maiya May 11 '17 at 13:16
@vikk Delete the line that is not inside `$timeout` - Basically you just need to add `$timeout(function() {` BEFORE this line, and `});` AFTER that line – Alon Eitan May 11 '17 at 13:19
updated the question with new code.That made the error go away ,but tooltip still not displayed – Vikhyath Maiya May 11 '17 at 13:25
This answer works like a charm.But is it possible to use bootstrap tooltip.If i include ui.bootstrap in the module whole page disappears..anyway i am accepting the answer as at least default tooltip is displaying – Vikhyath Maiya May 11 '17 at 14:01
@vikk Glad to help - About bootstrap, i'm not sure. Try figuring it out and post a new question if it doesn't work (Because as you said, it's out of the original question scope). You can comment here if you eventually opened a new question and i'll take a look and try to help there - Note that you now need `uib-tooltip` and not `tooltip` using bootstrap.ui – Alon Eitan May 11 '17 at 14:03
eventRender will execute more than once, so you should not put that in there – alecellis1985 Sep 12 '17 at 21:30

ui-calendar tooltip function not working

1 Answers1