YMD YMD - 1 month ago 21
AngularJS Question

angular-ui/ui-calendar: Display event information with mouseover

On the demo, I saw that the event name was popped up when the day was hovered.
I've been searching the documentation, but I don't see any description as to how to make it happen.

I suppose the event name would be displayed with

mouseover
and changing something in
uiConfig
.

Any advice will be appreciated!

Answer

This is not a built-in feature in ui-calendar.

The demo uses the tooltip component of UI Bootstrap for Angular to display event information. You need to:

  • add ui.bootstrap to your module:

    angular.module('yourAp', ['ui.calendar', 'ui.bootstrap']);
    
  • configure the calendar to display a tooltip for every event:

    $scope.uiConfig = {
      calendar:{
        // This enables the tooltip for every event
        eventRender: function( event, element, view ) {
            element.attr({'tooltip': event.title,
                  'tooltip-append-to-body': true});
            $compile(element)($scope);
        };
      }
    };
    

Obviously, you may use the eventRender hook to add different behavior/UI elements.

EDIT FROM THE POSTER

$scope.uiConfig = {
  calendar:{
    eventRender: function( event, element, view ) {
        element.attr({ 
            "tooltip-placement":"top", 
            "uib-tooltip": event.title, 
            "tooltip-append-to-body": true 
        });
        $compile(element)($scope);
    };
  }
};

Apparently, the version of my Angular and that of Tooltip were inconsistent. The code above solved the problem.