1. Home
  2. Forum
  3. Vue
  4. how to prevent double click (and many other questions :) )

how to prevent double click (and many other questions :) )

Dear support :


This kind of scheduler is exactly what I would like : 


https://ej2.syncfusion.com/vue/demos/#/material/schedule/group-editing.html


However, I have a couple of questions : 


1/ The fact that there are 2 differents modals when I simple click or double click on the same cell is pretty confusing for the user.
=> how can I desactivate the event when I doube click  (in order not to show the modal anymore), and get directly the edit modal Dialog when I just click once on the cell ?

2/ I don't want the user to be able to add several events on the same cell. 
I just want one event by cell.
=> How can I prevent users from adding several events in one cell ?

3/ To be very concise, when I click on a cell, here is what I would like : 

A - It opens an edit dialog to create a " teaching event".
It this dialog, there would  be a multiselect to select several students, and another to choose the kind of lessons
=> Could it be possible to have an online sample to show how to include a template form in the edit dialog ?

B - When I click on "submit" and save my datas in a MYSQL database, the dialog will close.
==> How can I show in the cell where I have just created an event an information that would be like " 3 students selected" ?

C - Let's imagine that I can only have 3 students by teaching lessons.
=> How can I prevent users from clicking and editing the event if the max. of studdents is reached , and how them a dialog message "Max students number is reached" ? 

4/ How can I populate the scheduler events with my remote datas (from an API ? )

5/ Is it possible to add to theis scheduler a timeline day and a timeline month ?


An online sample to help me would be really great !!

Thank you in advance ! 

4/ How can I set the date in french ?


18 Replies
VD Vinitha Devi Murugan Syncfusion Team July 19, 2021 09:55 AM UTC

Hi Sandra, 
 
Greetings from Syncfusion Support. 
 
Please find the below responses for your queries. 
 
Q1:   You can open a dialog on single click using popupOpen event of our scheduler and same can be available in below link. 
 
 
onPopupOpen: function (args) { 
    if (args.type === "QuickInfo") { 
      let scheduleObj = this.$refs.ScheduleObj.ej2Instances; 
      args.cancel = true; 
      //to open the editor on cell and event click 
      var currentAction = args.target.classList.contains("e-work-cells") 
        ? "Add" 
        : "Save"; 
      scheduleObj.openEditor(args.data, currentAction); 
    } 
  }, 
 
Q2: Yes, we can prevent more than one event creation per slot. Please refer below UG Links 
 
 
Q3-A:  Could it be possible to have an online sample to show how to include a template form in the edit dialog ? 
 
You can use our editorTemplate option to achieve this requirement. Please refer below UG and online sample link: 
 
 
Q3-B:  How can I show in the cell where I have just created an event an information that would be like " 3 students selected" ?  
 
You can use our eventTemplate option to achieve this requirment. Please refer below UG and online sample link: 
 
 
Q3-C: We can prevent the event edit if the max student count is reached by using popupOpen event and same can be available in below link. 
 
 
onPopupOpen: function (args) { 
    if (args.type === "QuickInfo") { 
      
      if (args.data.ConferenceId.length === 3) { 
        return; 
      } 
….       
    } 
    if (args.type === "Editor") { 
      if (args.data.ConferenceId.length === 3) { 
          //prevent users from clicking and editing the event if the max of studdents is reached 
        args.cancel = true; 
        alert("Max Student number is reached"); 
      } 
    } 
  }, 
 
Q4: We have validated your requirement “How can I populate the scheduler events with my remote data” at our end and let you know that we have used C# for backend operation which can be viewed from this link. And also let you know that any kind of remote data services can be bound to the Scheduler. To do so, create an instance of DataManager and provide the service URL to the url option of DataManager and then assign it to the dataSource property within eventSettings. We have prepared a sample in VueJS for your reference.  
 
 
 
Q5: Yes you can add timeline day and timeline month Views to scheduler using below code and same can be available in above sample. 
 
<e-view option="Day"></e-view> 
    <e-view option="WorkWeek"></e-view> 
    <e-view option="Month" :eventTemplate="monthEventTemplate"></e-view> 
    <e-view option="TimelineWeek"></e-view> 
    <e-view option="TimelineDay"></e-view> 
    <e-view option="TimelineMonth" isSelected="true"></e-view> 
</e-views> 
 
import { 
SchedulePlugin,Day,WorkWeek,Month,TimelineViews,TimelineMonth,Resize,DragAndDrop, 
} from "@syncfusion/ej2-vue-schedule"; 
 
provide: { 
    schedule: [Day,WorkWeek,Month,TimelineViews,TimelineMonth,Resize,DragAndDrop,], 
}, 
 
Refer below UG for more information: 
 
Q6:  You can set the localization to the scheduler using ‘locale’ property. Please refer below UG to set French culture to the Scheduler. 
 
 
Kindly try with the above links and get back to us if you need any further assistance 
 
Regards, 
Vinitha 


SB Sandra Bordier July 20, 2021 09:02 PM UTC

( I have to divide my post in sevral part because it was too long to get posted in one go :)



Dear support,


Thank you very much for your answer.


About question 1 :


I cheked your link :https://codesandbox.io/s/vue-template-forked-t5lbo?file=/src/App.vue:5455-5854 , but when I double click in a cell, it still open a dialog.


What I would like is : when I click once, it opens a dialog (this is ok :) ) , and when I double-click in one cell, nothing happens. As if there were no "double click " event.


is it possible ?


About question 2 :


Thank you, this works ! But !

There si something bad : it still opens a dialog !


So when I click on a cell which already contains an appointment, a dialog appears, but when I click save nothing happens => this is OK.

However, would it be possible not to see the dialog at all ?

Like, when I click on a cell where which already contains an appointment, nothings happens ?


About question 3 A and B : thank you, it works!


About question 3 C :


I tried, but it does not work .

Can you help me ? Here is my code, this is in the ScheduleTemplate.vue file, line 308


Questions 4/5 : thank you it works :) :)




Attachment: schedule_1c2ca7c3.zip

SB Sandra Bordier July 21, 2021 08:20 AM UTC

(Here is the rest of my post)


I have a couple of extra questions :)



Question 7 :


When I click once on a slot (create mode), I have this dialog :



When I click once on a slot (edit mode) , I have this dialog :



Is it possible to have the same nice header in the create mode dialog than the one I have in the edit dialog, but without the edit and delete button actions ?



Question 8 :


In my edit dialog, I have the edit button. When I click this button, is it possible to directly save the modifications ?

I do not want to open another dialog to edit the datas, since I can already do it in the first dialog ?


Question 9 :


About mutlti select in dialog :

A - If I select on event on the bottom of the scheduler (on the last line) and select a customer (client ) whom has a long name, en ampty space appears

righ below the customer name.

It makes a gap, and then the "add" button disappears. (See picture below)
How is it possible to make it so that :

1 - the "add" button never disappears ?

2 - the empty space does not appear below the customer name in the multiselect line , if the customer name is long ?


B - When I select a customer, everything is OK => the name of the customers appears just

above the red selected line of the multiselect.

But if I click right on the cross just next to the name, and not on the cross at the end of the line, it closes the dialog.




Is it a bug ? Is there a way to prevent this ? When I click on a cross of the multiselect, not matter which one, I juste would like to remove the customer,

not to close the dialog.


Question 10 :


This is a "teaching lesson" scheduler. So, in the scheduler I have 2 needs.
A - we have to see all the teaching lessons appointments (done)

B - We have to see when teachers are on vacation. ( to do )

=> How can I do to help teachers create vacation events/appointments ?
Can it be done in the same scheduler ?

So when a teacher click on a slot, is it possible to make him choose (in the dialog) between a teaching lesson appointment OR a "vacation" appointement, where he could indicate the start date end and the end date of his vacations ?

=> This means that it must not be possible to select an appointment while the teacher is on vacation




Thank you in advance for your help :)


VD Vinitha Devi Murugan Syncfusion Team July 25, 2021 12:32 PM UTC

Hi Sandra, 
 
Thanks for your update 
 
Please find the below responses for your queries. 
 
Q1: You can prevent the editor window opening on double click using cellDoubleClick event of our scheduler. 
 
 
 
onCellDoubleClick: function (args) { 
    args.cancel = true; 
  }, 
 
:cellDoubleClick="onCellDoubleClick" 
 
Q2: You can prevent the event window opening, if the cell already has events using below code in popupOpen event. Please refer below sample. 
 
 
onPopupOpen: function (args) { 
    if (args.type === "QuickInfo") { 
      let scheduleObj = this.$refs.ScheduleObj.ej2Instances; 
      args.cancel = true; 
     .... 
       // You can prevent the window opeing if the cell having events 
      var isOpen = scheduleObj.isSlotAvailable( 
        args.data.startTime, 
        args.data.endTime 
      ); 
      if (isOpen) { 
        scheduleObj.openEditor(args.data, currentAction); 
      } 
      // You can prevent the window opeing if the cell having events 
    } 
   .... 
  } 
 
Q3 C: We have checked your reported issue in mentioned line, please replace that line with below code to achieve your requirement. 
 
if (multiSelectObject.value.length > 1) { 
    args.cancel = true; 
    alert("1 client par créneau"); 
} 
 
 
Q 3-A, Q 3-b, Q4 and Q5: 
 
We are happy that our solution fulfilled your requirement. 
 
Q7: Is it possible to have the same nice header in the create mode dialog than the one I have in the edit dialog, but without the edit and delete button actions  
 
To fulfill this requirement, apply the same styles from the e-event-header class to the e-cell-header class. 
 
Q8: You can directly save the modification with out opening the another dialog to edit the datas using below code with popupOpen event and same can be available in below link.  
 
 
onPopupOpen: function (args) { 
    let scheduleObj = this.$refs.schedule.ej2Instances; 
    if ( 
        args.type === "Editor" && 
        args.target.classList.contains("e-appointment") && 
        scheduleObj.currentAction === "EditSeries" 
    ) { 
        args.cancel = true; 
        scheduleObj.saveEvent(args.data); 
    } 
}, 
 
Q9 A: We could reproduce your reported problem at our end. To overcome that, we suggest you to add below styles in your sample. Same can be available in above sample. 
 
.e-quick-popup-wrapper 
.e-cell-popup 
.e-popup-content { 
height: 180px; 
overflow-y: scroll; 
} 
 
Q9 B: We could replicate your reported issue at our end. Currently, we are checking the possibilities to overcome it and we will get back to you with further details in two business day (on 28 July, 2021). Kindly be patience until then. 
 
Q10:  Yes, we can create the block event by setting IsBlock field in event data using actionBegin event of our scheduler for the same we have prepared below sample for your reference. 
 
 
onActionBegin: function (args) { 
    if (args.requestType === "eventCreate") { 
      console.log(args.data); 
      if (args.data[0].AppType === "Vacation") { 
        // We can block the particular timeslot using IsBlock field 
        args.data[0].IsBlock = true; 
      } 
    } 
  }, 
 
Refer below UG for more information. 
 
Kindly try with the above solutions and get back to us if you need any further assistance 
 
Regards, 
Vinitha 


VD Vinitha Devi Murugan Syncfusion Team July 28, 2021 12:23 PM UTC

Hi Sandra, 
 
Thanks for your patience. 
 
We have checked your reported problem ‘unnecessarily the quick info popup closes’ further and confirm this as a defect and logged the bug report which can be tracked from the following feedback link. The fix will be included in our upcoming Volume 2 SP1 release scheduled at mid of August 2021 , and would appreciate your patience until then. 
  
  
Regards, 
Vinitha 


SB Sandra Bordier July 29, 2021 11:44 AM UTC

Thank you very much, almost everything is OK, I just got a problem with question 8 :


"In my edit dialog, I have the edit button. When I click this button, is it possible to directly save the modifications ?

I do not want to open another dialog to edit the datas, since I can already do it in the first dialog ?"


In fact, I don't retrieve the datas that have been changed.

the "ChangedRecord" does not give me the new information that I have selected in the dialog.


For instance, I have an event with user "Marie Louise" (user_id 12) and service "Cours dressage" (service_id 2).

When I select the event, I change the datas and select user "Chrissy" (user_id 13) and service "Cours CSO" (service_id 3).


When I click the edit icon to save my datas, I opened the console, and here is what I get :



As you can see, I don't retreive my new datas, I still have the old ones.


=> How can I do to get the new datas I selected and not the old ones ?


= >And just a little "extra" : How can I get "Chrissy" and "Cours CSO" at the left of the dropdownlist, not in the middle of it ?

The code is in my ScheduleTemplate.vue file.

Thank you in advance :)


Attachment: code_cdd91e83.zip


VD Vinitha Devi Murugan Syncfusion Team July 30, 2021 06:40 AM UTC

Hi Sandra, 
 
Thanks for your update. 
 
Q1: We have validated your reported query “the ‘ChangedRecord’ does not give me the new information that I have selected in the dialog.” and achieved your requirement by using popupOpen and popupClose events of our scheduler with below code. 
 
onPopupClose: function (args) { 
    let scheduleObj = this.$refs.schedule.ej2Instances; 
    if ( 
      args.type === "QuickInfo" && 
      args.target.classList.contains("e-appointment") 
    ) { 
  //Here we get updated fields data 
      const eventData = scheduleObj.eventWindow.getObjectFromFormData( 
        "e-quick-popup-wrapper" 
      ); 
      eventData.Id = args.data.Id; 
      scheduleObj.saveEvent(eventData); 
      return; 
    } 
  }, 
  onPopupOpen: function (args) { 
    let scheduleObj = this.$refs.schedule.ej2Instances; 
    if ( 
      args.type === "Editor" && 
      args.target.classList.contains("e-appointment") && 
      scheduleObj.currentAction === "EditSeries" 
    ) { 
      args.cancel = true; 
    } 
  }, 
}, 
 
Q2: You can customize the currently selected value of dropdownlist using valueTemplate option of Dropdownlist. Please refer below UG link for more information. 
 
 
Kindly try with the above solutions and get back to us if you need any further assistance 
 
Regards, 
Vinitha 


SB Sandra Bordier July 30, 2021 02:49 PM UTC

Thank you so much, it works perfectly I can get my new datas when I edit an event :) 

i'll check for the value Template later and get back to you if needed .


SB Sandra Bordier July 31, 2021 03:29 PM UTC

Dear support,


In fact There is a little bug still. When I use this code :

onPopupClose: function (args) {
let scheduleObj = this.$refs.schedule.ej2Instances;
if (
args.type === "QuickInfo" &&
args.target.classList.contains("e-appointment")
) {
//Here we get updated fields data
const eventData = scheduleObj.eventWindow.getObjectFromFormData(
"e-quick-popup-wrapper"
);
eventData.Id = args.data.Id;
scheduleObj.saveEvent(eventData);
return;
}
},


The problem is now that the code is executed whenever the dialog is closed. So if I change some datas but change my mind and close the dialog without wanting to save anything, it triggers the event anyway and save the datas.


How can I execute your code only when I click on the "edit" icon ?

I tried this code :


onPopupClose: function (args) {
let scheduleObj = this.$refs.schedule.ej2Instances;
if (args.data) {console.log('popupclose', scheduleObj.currentAction );
args.data.StartTimezone = "UTC";
args.data.EndTimezone = "UTC";
}
if(scheduleObj.currentAction === "EditSeries" ) {
const eventData = scheduleObj.eventWindow.getObjectFromFormData(
"e-quick-popup-wrapper"
);
eventData.event_id = args.data.id;
scheduleObj.saveEvent(eventData);
}
return;
},


But it does not work everytime. The very first time I click on an event, it does not work ("scheduleObj.currentAction" is null.  Then, if I click one more time on the same event, it works ( "scheduleObj.currentAction" has value "EditSeries")


=> Moreover, I did not understand the role of the onActionBegin function ? is it possible to explain it to me ?

=> And last, I want my dropdownlist "client" to be "required".

How can I do that, and show a red message " Le client est obligatoire" just below the field if it is empty when I save the datas ?


Best regards !


BS Balasubramanian Sattanathan Syncfusion Team August 2, 2021 02:15 PM UTC

Hi Sandra, 

Thanks for the update. 

=> But it does not work everytime. The very first time I click on an event, it does not work ("scheduleObj.currentAction" is null.  Then, if I click one more time on the same event, it works ( "scheduleObj.currentAction" has value "EditSeries") 

We suggest you to replicate your problem in the shared sample and share the issue replication steps with video demo to validate the issue and provide the solution promptly. 

=> Moreover, I did not understand the role of the onActionBegin function ? is it possible to explain it to me ? 

We let you know that the actionBegin is the Scheduler event which will be triggered on every Scheduler actions 

=> And last, I want my dropdownlist "client" to be "required". 

We have validated your requirement at our end and let you know that it can be possible by using the below code snippet. And also we would suggest you to refer the below UG to know more details about FormValidator. 

//FormValidator rule is added for required fields 
const options = { 
  rules: { 
    EmpName: { required: [true, "Le client est obligatoire"] }, 
  }, 
}; 
// defines FormValidator to validate the quickinfo fields 

let formObject = new FormValidator("#form-element", options); 
// validates the fields 
if (!formObject.validate()) { 
  return; 
} 


Kindly refer to the above solution and let us know if you need further assistance.

 
Regards, 
Balasubramanian S 


SB Sandra Bordier August 3, 2021 10:28 AM UTC

We suggest you to replicate your problem in the shared sample and share the issue replication steps with video demo to validate the issue and provide the solution promptly. 


=> I am not sure to understand what you want me to do ?

The problem is in this part of my code :

onPopupClose: function (args) {
let scheduleObj = this.$refs.schedule.ej2Instances;
if (args.data) {
args.data.StartTimezone = "UTC";
args.data.EndTimezone = "UTC";
}
if(scheduleObj.currentAction === "EditSeries" ) {
const eventData = scheduleObj.eventWindow.getObjectFromFormData(
"e-quick-popup-wrapper"
);
eventData.event_id = args.data.id;
scheduleObj.saveEvent(eventData);
}
return;
},


If I have an event, and want to edit datas. So I click on the "edit" icon, that is supposed to save my datas.
===> When I take a look at my debug console, I can see that "scheduleObj.currentAction" is NULL.

So I can't save my new datas since the condition if(scheduleObj.currentAction === "EditSeries"  is not true .

This happens ONLY when I click on the "edit" icon of any event for the 1st time.

However, if I click for the second time on an event, and try to save the datas, then scheduleObj.currentAction value is not null anymore, so the condition  if(scheduleObj.currentAction === "EditSeries" is OK, and I can save my datas.

You can see the code in my zip file, in the scheduleTemplate.vue, onPopUpClose method.


About question 3, I tried to add your validation code : 

onPopupClose: function (args) {
//FormValidator rule is added for required fields
const options = {
rules: {
customerId: { required: [true, "Le client est obligatoire"] },
},
};

let formObject = new FormValidator("#form-element", options);
// validates the fields
if (!formObject.validate()) {
console.log('pas validé');
}

let scheduleObj = this.$refs.schedule.ej2Instances;
if (args.data) {
args.data.StartTimezone = "UTC";
args.data.EndTimezone = "UTC";
}
if(scheduleObj.currentAction === "EditSeries" ) {
const eventData = scheduleObj.eventWindow.getObjectFromFormData(
"e-quick-popup-wrapper"
);
eventData.event_id = args.data.id;
scheduleObj.saveEvent(eventData);
}
return;
},


When I left the customerField Empty, I have this error : 



Can you help me ?

Best regards,


Attachment: code_e0293ea4.zip

VD Vinitha Devi Murugan Syncfusion Team August 4, 2021 12:17 PM UTC

Hi Sandra, 
 
Thanks for your update. 
 
We tried to reproduce your reported issue at our end by preparing sample with your shared files, but no luck. So we request you to share runnable issue replicating sample with us to avoid frequent issue you are facing during integrating our provided solutions in your project. We will resolve all your reported issues and requirements reported in forums 167521 and 167351 in that sample and provide prompt solution. 
 
Regards, 
Vinitha 


SB Sandra Bordier August 5, 2021 09:39 PM UTC

"So we request you to share runnable issue replicating sample"
=> No problem, how can I do that ? 

Di you want me to put my code in one of your online sample  ?


NR Nevitha Ravi Syncfusion Team August 6, 2021 05:15 AM UTC

Hi Sandra, 

Thanks for your update. 

Yes, either replicate the issue in code sandbox shared below or replicate the problem in a sample and share it. 

Regards, 
Nevitha 


SB Sandra Bordier August 8, 2021 08:09 PM UTC

Thank you very much, I am going to do so.

Can you just tell me : When you create an event, is it possible to show something like a spinner  (any kind of loading animation) between the moment you click on "save" and the moment the new event appears in the scheduler ?

I am asking you that because some people have low connections (2G/3G), so a spinner could keep them  waiting


VD Vinitha Devi Murugan Syncfusion Team August 9, 2021 05:35 AM UTC

Hi Sandra, 
 
Thanks for your update. 
 
We have validated your reported query “Show spinner until the data bound to the scheduler” and achieved it by using actionBegin and dataBound events with showSpinner and hideSpinner methods. Please refer to the following sample. 
 
 
onActionBegin: function (args) { 
  if (args.requestType === "eventCreate") { 
    let scheduleObj = this.$refs.schedule.ej2Instances; 
    scheduleObj.showSpinner(); 
  } 
}, 
onDataBound: function (args) { 
  let scheduleObj = this.$refs.schedule.ej2Instances; 
  scheduleObj.hideSpinner(); 
}, 
 
 
Kindly try with the above sample and get back to us if you need any further assistance. 
 
Regards, 
Vinitha 


SB Sandra Bordier August 15, 2021 08:50 PM UTC

Thank you very much, the spinner works ! Is it possible to customize it / make it more visible ? 


VD Vinitha Devi Murugan Syncfusion Team August 16, 2021 07:45 AM UTC

Hi Sandra, 
 
Thanks for your update. 
 
We have validated your reported query “ Is it possible to customize it / make it more visible “ and you can customize our default spinner using below code. 
 
 
import { setSpinner } from "@syncfusion/ej2-vue-popups"; 
beforeMount: function () { 
    setSpinner({ 
      template: 
        '<div style="width:100%;height:100%" class="custom-rolling"><div></div></div>', 
    }); 
  }, 
   
onDataBound: function (args) { 
    document.querySelectorAll(".custom-spinner").forEach((node) => { 
      node.classList.add("e-spin-hide"); 
      node.classList.remove("e-spin-show"); 
    }); 
  }, 
 
  @keyframes custom-rolling { 
    0% { 
      -webkit-transform: translate(-50%, -50%) rotate(0deg); 
      transform: translate(-50%, -50%) rotate(0deg); 
    } 
   
    100% { 
      -webkit-transform: translate(-50%, -50%) rotate(360deg); 
      transform: translate(-50%, -50%) rotate(360deg); 
    } 
  } 
   
  @-webkit-keyframes custom-rolling { 
    0% { 
      -webkit-transform: translate(-50%, -50%) rotate(0deg); 
      transform: translate(-50%, -50%) rotate(0deg); 
    } 
   
    100% { 
      -webkit-transform: translate(-50%, -50%) rotate(360deg); 
      transform: translate(-50%, -50%) rotate(360deg); 
    } 
  } 
   
  .custom-rolling { 
    position: relative; 
  } 
   
  .custom-rolling div, 
  .custom-rolling div:after { 
    border: 16px solid #51CACC; 
    border-radius: 50%; 
    border-top-color: transparent; 
    height: 160px; 
    position: absolute; 
    width: 160px; 
  } 
   
  .custom-rolling div { 
    -webkit-animation: custom-rolling 1.3s linear infinite; 
    animation: custom-rolling 1.3s linear infinite; 
    top: 100px; 
    left: 100px; 
  } 
   
  .custom-rolling div:after { 
    -ms-transform: rotate(90deg); 
    -webkit-transform: rotate(90deg); 
    transform: rotate(90deg); 
  } 
   
  .custom-rolling { 
    -webkit-transform: translate(-31px, -31px) scale(0.31) translate(31px, 31px); 
    height: 62px !important; 
    transform: translate(-31px, -31px) scale(0.31) translate(31px, 31px); 
    width: 62px !important; 
  } 
 
Kindly try with the above sample and get back to us if you need any further assistance. 
 
Regards, 
Vinitha 


Loader.
Up arrow icon