1. Home
  2. Forum
  3. AngularJS
  4. Disble double click on some events

Disble double click on some events

Hi ! I have some concerns. 

First: I need to stop showing the editor for some appointments. For example, if the appointment is of type "A", I don't want to display the editor. I don't want it to do any action when double-clicking, but if it's type "B", I want to show the editor.  How could I do it ?

Second: when clicking on appointment of type "A", I need to perform an action. How could I assign the click event to be able to assign a new functionality ?

I'm using js, and angular. 

Thank you very much 

5 Replies
RV Ravikumar Venkatesan Syncfusion Team April 6, 2020 12:05 PM UTC

Hi Juan, 

Greetings from Syncfusion support. 

Based on your requirement we have prepared the below sample with the help of popupOpen and eventRendered event of the Schedule. 

Q1: How to disable opening of editor window for the type ‘A’ event 

Step 1: Add custom field called ‘EventType’ to the events like the below. 

    dataSource: [{ 
      Id: 1, 
      Subject: 'Type A event', 
      Location: 'Space Centre USA', 
      StartTime: new Date(2019, 0, 6, 9, 30), 
      EndTime: new Date(2019, 0, 6, 11, 0), 
      CategoryColor: '#1aaa55', 
      EventType: 'A 
    }, { 
      Id: 2, 
      Subject: 'Type B event', 
      Location: 'Newyork City', 
      StartTime: new Date(2019, 0, 7, 12, 0), 
      EndTime: new Date(2019, 0, 7, 14, 0), 
      CategoryColor: '#357cd2', 
      EventType: 'B' 
    }] 

Step 2: Bind the popupOpen event to the Angular schedule like the below. 

    <ejs-schedule #scheduleObj height='650px' [(selectedDate)]="selectedDate" [eventSettings]="eventSettings" 
      (popupOpen)='onPopupOpen($event)' (eventRendered)='onEventRendered($event)'> 
    </ejs-schedule> 

Step 3: Add the definition for the poupOpen event like the below. 

  public onPopupOpen(args: PopupOpenEventArgs) { 
    // Disable the opening of editor window when event click 
    if ((args.data as any).EventType === 'A' && !isNullOrUndefined(args.target) && args.target.classList.contains('e-appointment') && ['QuickInfo', 'Editor'].indexOf(args.type) > -1) { 
        args.cancel = true; 
    } 
  } 

Q2: How to add custom click event to Angular Schedule events. 

Step 1: Bind the eventRendered event to the Schedule like the below. 

    <ejs-schedule #scheduleObj height='650px' [(selectedDate)]="selectedDate" [eventSettings]="eventSettings" 
      (popupOpen)='onPopupOpen($event)' (eventRendered)='onEventRendered($event)'> 

Step 2: Add the definition for the eventRendered event like the below. 

  public onEventRendered(args: EventRenderedArgs) { 
    // Adding the custom click event to the type "A" event 
    if(args.data.EventType === 'A') { 
      args.element.addEventListener('click', this.customClick); 
    } 
  } 

Step 3: Add the custom click event definition like the below and perform your custom action inside of it. 

  public customClick(args) { 
    // You can write a code for new functionality to event click here 
    if(args.detail === 1) { 
      console.log('Custom click event fires'); 
    } 
  } 


Kindly try the above sample and get back to us If you would require further assistance. 



Regards, 
Ravikumar Venkatesan 


JM Juan Manuel Gago April 6, 2020 08:11 PM UTC

Thank you, that works great !!

VM Vengatesh Maniraj Syncfusion Team April 7, 2020 04:16 AM UTC

Hi Juan, 

You are most welcome. 

Please get in touch with us if you would require any further assistance. 

Regards, 
Vengatesh  


BJ BOB JASON TIAMSIC October 25, 2021 11:31 AM UTC

how do we get the appointment details from the customClick method?


SK Satheesh Kumar Balasubramanian Syncfusion Team October 26, 2021 01:47 PM UTC

Hi BOB, 

Thanks for your update.

We have validated your reported query "how do we get the appointment details from the customClick method?" and prepared sample to get appointment details from the customClick method.


app.component.ts:   
  public onEventRendered(args: EventRenderedArgs) {
    // Adding the custom click event to the type "A" event
    if (args.data.EventType === 'A') {
      args.element.addEventListener('click', this.customClick.bind(this));
    }
  }

  public customClick(args) {
    // You can write a code for new functionality to event click here
    if (args.detail === 1) {
      console.log('Custom click event fires');
      const a = this.scheduleObj.getEventDetails(args.currentTarget);
      console.log(a);
    }
  }

Kindly try the above sample and let us know if this meets your requirement.

Regards,
Satheesh Kumar B


Loader.
Up arrow icon