How to add an icon on the event to delete the event

[meduar]

I am trying to do a functionality to put an icon for deleting an item...

Someone who can give me some advice?

[aparnarajeev]

Did you figure out how to add an icon?

I m also trying to do something similar

[edlahoz]

I managed to add the button, by using: element.append( yourCustomService.CustomFunction(event) );

Example:

    $scope.eventRender = function (event, element, view) {
         element.append(calendarEventService.formatWeekEvent(event));
         $compile(element)($scope);
    }

The service for this example looks like this (adding in $filter just for show):

app.service('calendarEventService', ['$filter', function ($filter) {

    this.formatWeekEvent = function (event) {
        return '<div> event.title </div> <button>little close button</button>';
    }

}]);

The problem I have with this, though, is how to attach an actual event for this button. Because, while ng-click does work, it doesn't seem to pass in the event.

Example for this:

app.service('calendarEventService', ['$filter', function ($filter) {

    this.formatWeekEvent = function (event) {
        return '<div> event.title </div> <button ng-click="myDeleteFunction(event)">little close button</button>';
    }

}]);

When myDeleteFunction is triggered (which it is) the event is passed in as undefined. If someone can shed a light on this, that would be GREAT

[edlahoz]

Managed to workaround the issue by binding a click event to the event render, as follows:

In the html:

app.service('calendarEventService', ['$filter', function ($filter) {

this.formatWeekEvent = function (event) {
    return '<div> event.title </div> <button class="deleteActivity">delete</button>';
}

}]);

In the event render function:

$scope.eventRender = function (event, element, view) {
     element.append(calendarEventService.formatWeekEvent(event));
     element.find(".deleteActivity").bind('click', function () {
         $scope.deleteActivity(event);
         return false;
     });
     $compile(element)($scope);
}

[ianmiddelkamp]

I know this is an old post, I also tried to add an icon into the rendered event. I found the same problem - that the objects were undefined to the ng-click function call. As a solution I json encoded my object as follows: ng-click='openReference(" + JSON.stringify(reference) + ", $event)'. see Below

$scope.openReference = function(Reference, Event){
      Event.stopPropagation();
             
           ....
}


$scope.eventRender = function(event, element, view){
               
            var template = "<div layout='row' class='align-items-center justify-content-between'>" + 
                                  event.title + "<div class='m-2 align-items-center'  layout='row'>";
                   angular.forEach(event.References, function(reference){
                        template+="<span ng-click='openReference(" + JSON.stringify(reference) + ", $event)'>"
                        if(reference.Type=="Quote"){
                             template += "<img height='20px' width='20px' src='images/svg/location.svg'>";
                        }else if (reference.Type=='Contact'){
                             template += "<img height='20px' width='20px' src='images/svg/person.svg'>";
                        }
                        template+="<md-tooltip>" + reference.Label + "</md-tooltip></span>";
                   })
                   
                   template +=      "</div></div>";
           
                   
                  
                 
                   compiled = $compile(template)($scope);
                   element.html(compiled);

              //}
         }