CODEWITHSUNDEEP
angularjsfullcalendarangular-uiangular-ui-bootstrap
Joza
Joza

Reputation: 173

How to add angular directive to full calendar event

I'm using Angular-UI Calendar (angular version of Arshaw's fullcalendar) and on EventRender I would like to add a Angular-UI-bootstrap popover to the event element.

I have tried these (using coffeescript):

    eventRender: (event, element) ->
        element.find(".fc-event-inner").wrap("<div popover='I appeared on mouse enter!' popover-title='The title.' popover-trigger='mouseenter'></div>")

and

    eventRender: (event, element) ->
        element.find(".fc-event-inner").wrap($compile("<div popover='I appeared on mouse enter!' popover-title='The title.' popover-trigger='mouseenter'></div>")($scope))
        $scope.$apply()

But neither of those seem to be doing anything. I guess the problem with first one at least is that the event is rendered after angular has done it's magic already. But the second one didn't help either. With some static element the popover is working correctly.

Upvotes: 4

Views: 1677

Answers (1)

Joza
Joza

Reputation: 173

Got it working :)

eventRender: (event, element) ->
    element.attr('popover', "Finally it's working")
    element.attr('popover-title', 'Hello world')
    element.attr('popover-trigger', 'mouseenter')
    $compile(element)($scope)

Upvotes: 6

Related Questions