How to show Active Areas in Angular4

Asked by Carol Braileanu
9 years ago.

I am using DayPilot Pro Angular4 Calendar (and Month Calendar) component and I am trying to enable the delete functionality. I am binding to the BeforeRender event like so:

this.calendar.control.onBeforeEventRender = (args) => this.eventRender(args);

and I am handling it in the following function:

eventRender(event) {
event.e.areas = [{'action':'JavaScript','js':'(function(e) { dp.events.remove(e); })','bottom':9,'w':17,'v':'Hover','css':'event_action_delete','top':3,'right':2}];
}

However, the delete icon does not appear on the event in the calendar. What is the right way to enable active areas in the Angular4 component?

how-to javascript

Answer posted by Dan Letecky [DayPilot]
9 years ago.

You might be defining onBeforeEventRender handler too late in the component lifecycle (after it is rendered). Try adding it to the config object (see also the Angular 4 Calendar tutorial at https://code.daypilot.org/62826/angular-4-calendar-quick-start-project):

  config: any = {
    viewType: "Week",
    startDate: "2017-05-01",
    onBeforeEventRender: args => { 
      event.e.areas = [{'action':'JavaScript','js':'(function(e) { this.calendar.ontrol.events.remove(e); })','bottom':9,'w':17,'v':'Hover','css':'event_action_delete','top':3,'right':2}]; 
    }
  };

Anyway, event deleting functionality is integrated in both the Calendar and Month controls. It's disabled by default. You can enable it using eventDeleteHandling propety:

  config: any = {
    viewType: "Week",
    startDate: "2017-05-01",
    eventDeleteHandling: "Update",
    onEventDelete: args => {
      console.log("Deleting event " + args.e.text());
    }
  };

Comment posted by Carol Braileanu
9 years ago.

I have the following config for my calendar:

public calendarOptions: any = {
startDate: DayPilot.Date.today(),
viewType: 'Week',
showAllDayEvents: true,
eventDeleteHandling: 'Update',
days: 7,
onBeforeEventRender: args => {
args.e.areas = [{action:'JavaScript',js:(function(e) { this.calendar.ontrol.events.remove(e); }),bottom:9,w:17,v:'Hover',css:'event_action_delete',top:3,right:2}];
},
onEventDeleted: (args) => console.log(args)
};

According to the calendar.ts file in the tutorial this should be enough to show the delete icon, but in my calendar it doesn't show.

Comment posted by Dan Letecky [DayPilot]
9 years ago.

You can use the DayPilot UI Builder (https://builder.daypilot.org/) to generate an Angular project with selected settings.

The Calendar builder (https://builder.daypilot.org/calendar) lets you enable event deleting (it adds eventDeleteHandling property and onEventDeleted event handler to the config for you). You can also test event deleting live before downloading the project.

Let me know if it still doesn't work.

This question is more than 1 month old and has been closed. Please create a new question if you have anything to add.