Save does not work

[Sandra Bordier]

Dear Support,

I use your scheduler.

When I add an event, it works very well : 




But when I click on "more details" and try to save an event with the save button, it doesnt work, nothing is triggered when I check the console :

I don't understand where I need to put my code to make the "save" button work , and trigger the event ?

Can you help me ? Here is my code in the zip file.

Moreover, I have a couple of questions : 

1/ Would it be possible to get the code of your dialog template, the one that appears when you click on the " more details" button ?

2/ In your "editor template" (the one that appears by clicking on the "more details button", I would like to remove one or two fields (timeZone and Event Location)
Is it possible ? 

3/ Can I change the label of the fields ?

4/ How can I change the text of the "more details button" ?

Best regards,

Attachment: code_schedule_58d4f01e.zip

[Vinitha Devi Murugan]

Hi Sandra, 

 

Q1: We have validated your reported problem “But when I click on "more details" and try to save an event with the save button, it doesnt work.” and tried to replicate it at our end by preparing sample with your shared code. But unfortunately, we are unable to replicate it. Custom elements in header bar working fine after view change too. We have shared the working sample with the latest version for your reference. 

 

https://codesandbox.io/s/scheduler-editor-template-forked-mg8z2?file=/src/App.vue:5765-5870  

  

Kindly try the above sample, If you still face the problem at your end, please replicate same in above sample which would help us to provide the solution at earliest.  

 

Q2: Please confirm whether you want our default editor fields in to editor template. 

 

Q3: You can remove the timezone and location fields from default editor window using below CSS. 

 

<style> 

.e-location-container { 

  display: none; 

} 

.e-time-zone-container { 

  display: none; 

} 

</style> 

 

Q4: Yes, you can change the label of the default window fields. Please refer below UG Link. 

 

https://ej2.syncfusion.com/vue/documentation/schedule/editor-template/#how-to-change-the-label-text-of-default-editor-fields  

 

Q5: We can change the text of the “more details” button using below code and same can be available in below sample. 

 

L10n.load({ 

    "en-US": { 

      schedule: { 

        moreDetails: "Open Detailed Window", 

      }, 

    }, 

  }); 

 

Sample for Q3 & Q5: https://codesandbox.io/s/scheduler-default-window-field-remove-5szoo?file=/src/App.vue:1178-1281  

 

Kindly try with the above solutions and get back to us if you need any further assistance 

 

Regards, 

Vinitha 

[Sandra Bordier]

Dear support,

Thank you for your answer .

About question 1, this is not what I would like.

In your sample, you use a template that I don't wish to use.

I really would like to use your own dialog, the one I showed above. Your default editor fields and your default editor template is what I wish to use :

=> The reason why I asked you if you can share with me the code of your editor template is because I would like to customize it with french labels (and I would like to remove one or two fields).

Saving datas with the QuickInfo dialog works very well.

My problem is that when I click on the "enregistrer" button from the editor dialog, it does not work.

= >Where am I supposed to save the datas when I click on the "Enregistrer" button ? in the inActionBegin method ? In the onPopUpClose method ? Somewhere else ?

About the question 3 : It's ok :)

About the question 4 : I have been able to change the name of several fields.
However, I can I change the name of "All day", "repeat", "repeat every" and "End" ? 
I have not found their names in the documentation you mentionned.

Thank you very much for your help,

[Sandra Bordier]

Sorry 3 more questions :

=> How can I make the employee field readonly ?

Moreover there is something I don't understand : How can the field "employee" be in the editor template whereas it does not appear in the eventSettings "fields" ?

=> How can I change the title, message and the label buttons of this ?

=> How can I change the title of the editor dialog and remove the "supprimer" button ? : 

here is my code.

Thank you in advance !

Attachment: code_bb74db9f.zip

[Balasubramanian Sattanathan]

Hi Sandra, 

Thanks for the update. 

Please find the below responses for your queries. 

Q1: Where am I supposed to save the datas when I click on the "Enregistrer" button ? 

 

We have analyzed your requirement at our end and let you know that we can save the data using actionBegin event and as well as in popupOpen event like the below code snippet 

 

onPopupOpen: function (args) { 

  let scheduleObj = this.$refs.ScheduleObj.ej2Instances; 

  if (args.type === "Editor") { 

    args.element.querySelector("#OwnerId").ej2_instances[0].readonly = true; 

    let eventSave = args.element.querySelector(".e-event-save"); 

    if (eventSave) { 

      eventSave.addEventListener("click", this.onEventSave); 

    } 

  } 

}, 

onEventSave: function () { 

  // It will be triggered when we press Save button of the Editor Window 

  // And also we can save the Data 

}, 

onActionBegin: function (args) { 

  if (args.requestType === "eventCreate") { 

    // It is also triggerred when we click the save button of both quick popup and editor window 

  } 

}, 

 

Q3: How can I make the employee field readonly ? 

 

We can make resource field as readonly by using below highlighted code snippet. 

 

onPopupOpen: function (args) { 

  let scheduleObj = this.$refs.ScheduleObj.ej2Instances; 

  if (args.type === "Editor") { 

    args.element.querySelector("#OwnerId").ej2_instances[0].readonly = true; 

    let eventSave = args.element.querySelector(".e-event-save"); 

    if (eventSave) { 

      eventSave.addEventListener("click", this.onEventSave); 

    } 

  } 

} 

 

We can change the title of the resource field by using the below highlighted code snippet. 

<e-resources> 

  <e-resource 

    field="OwnerId" 

    title="Ownerss" 

    :dataSource="resourceDataSource" 

    allowMultiple="true" 

    name="Owners" 

    textField="OwnerText" 

    idField="OwnerId" 

    colorField="Color"> 

  </e-resource> 

 

Q4: I have been able to change the name of several fields. However, I can I change the name of "All day", "repeat", "repeat every" and "End" ? 

 

We can change the label text of the Scheduler by defining like the below. And also we would suggest you to refer the below link to know more Scheduler labels and its values. 

https://github.com/syncfusion/ej2-locale/blob/master/src/en-US.json 

 

L10n.load({ 

  "en-US": { 

    schedule: { 

      moreDetails: "Open Detailed Window", 

      allDay: "All-day", 

      saveButton: "enregistrer", 

      delete: "supprimer", 

      deleteButton: "supprimer", 

      deleteTitle: "Remove Event", 

      deleteContent: "Are you sure you want to remove this event?", 

    }, 

    recurrenceeditor: { 

      repeat: "Repeatt", 

      repeatEvery: "Repeat-every", 

      on: "Repeat-On", 

      end: "Endd", 

    }, 

  }, 

}); 

 

Sample for all queries: https://codesandbox.io/s/scheduler-single-level-resources-dvr4g?file=/src/App.vue 

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

 

Regards 

Balasubramanian S 

[Sandra Bordier]

Thank you very much, everything works.

I've got one last problem :

When I want to edit an event and click the "save" button, it creates a new event instead of updating the current one, because I dont retrieve the id of the event in the "changedRecord" data : 

How can I get the id of the event so as to update my event ?

Thank you in advance : !

Attachment: code_cbbfbe0c.zip

[Satheesh Kumar Balasubramanian]

Hi Sandra,

Thanks for your update.

We have validated your reported query "because I dont retrieve the id of the event in the "changedRecord" data" and let you know that you need to maintain Id field in your events dataSource to resolve the reported issue. If you are maintaining it, you can access the Id of the event using eventClick event as shown in the image. Kindly try the above solution and let us know if this works at your end. If you still face any problem, please share the issue replication details.

UG: https://ej2.syncfusion.com/vue/documentation/schedule/appointments/#built-in-fields

Regards,

Satheesh Kumar B

[Sandra Bordier]

Thank you it works ! 

i've got one last question : 

how can I remove (hide) the StartTimeZone and EndTimeZone field ? 

I tried this, but is does not work : 

.e-start-time-zone-container {

display: none;

}

.e-start-time-zone-container {

display: none;

}

Thank you in advance

[Satheesh Kumar Balasubramanian]

Hi Sandra, 

  

Thanks for your update. 

  

We have validated your reported query "how can I remove (hide) the StartTimeZone and EndTimeZone field ?" and suggest you to use the below customized style to achieve your requirement. For the same we have modified the sample which can be viewed from the following link. 

Sample: https://codesandbox.io/s/scheduler-single-level-resources-forked-5k49p?file=/src/App.vue 

  

App.vue:  

<style> 

.e-schedule-dialog .e-time-zone-row.e-enable { 

  display: none; 

} 

</style> 

  

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

  

Regards, 

Satheesh Kumar B 

[Sandra Bordier]

Thank you very much, it works ! 

I saw something that I don't understand : 

When I create a new event and save datas from the editor template, the request payload shows that "added" field is empty but "changed" field contains the datas.



Why is the "added" field empty, whereas I am creating a new event ? 

I thought that "changed" was filled when I edit an event, and that "add" is filled when I create an event ? 

It seems that when you create an event from Quickinfo template, the "added" field is completed, but when you create an event from Editor template, this is the "changed" field that is completed.

It makes things a little more difficult when I get datas in the controller, because I used to check the "added" field when I create an event, and the "changed" field when I edit an event.
But in this case, I also have to check the "changed" field when I create an event.

Is there any way to get datas in the "added" field whenever I create an event , whether the creation is from Quickinfo or Editor template ? 

[Vinitha Devi Murugan]

Hi Sandra, 

 

Thanks for your update. 

 

We have validated your reported problem “When I create a new event and save datas from the editor template, the request payload shows that "added" field is empty but "changed" field contains the datas.” by preparing sample with your shared code and could replicate it at our end. The reason for the reported issue is in your code you using saveEvent public method in popupClose event like below which causing that issue. So to resolve your reported issue, we suggest you to remove below line from popupClose event and same can be available in below link. 

 

Sample: https://codesandbox.io/s/customer-sample-167645-vgiti?file=/src/App.vue:5501-5934  

 

 

onPopupClose: function (args) { 

    if (args.data) { 

        args.data.StartTimezone = "UTC"; 

        args.data.EndTimezone = "UTC"; 

        if (args.type === "Editor") { 

            args.data.agenda_id = this.agendaIdList[0]; 

            let scheduleObj = this.$refs.schedule.ej2Instances; 

            //Remove below line to resolve issue 

            //  scheduleObj.saveEvent(args.data); 

        } 

    } 

} 

 

Kindly try with the above sample and get back to us if you need any further assistance. 

 

Regards, 

Vinitha 

[Sandra Bordier]

Thank you very much ! 

I am not sure if you answered about this question : 

"Q2: Please confirm whether you want our default editor fields in to editor template. "

I really would like to see your quickInfo template and your editor template, because I would like to keep them the wat they are, and just add in each one a dropdownlist.

Is it possible ?

Best regards.

[Vinitha Devi Murugan]

Hi Sandra, 

 

Sorry for the inconvenience. 

 

We have validated your reported query “ I really would like to see your quickInfo template and your editor template, because I would like to keep them the wat they are, and just add in each one a dropdownlist “ and achieved your requirement by making use of popupOpen event with below code. We have prepared the below sample for your reference. 

 

Sample: https://codesandbox.io/s/additional-dropdown-field-in-quickinfo-and-eventwindow-y5li5  

 

onPopupOpen: function (args) { 

    if (args.type === "Editor" || args.type === "QuickInfo") { 

      // Create required custom elements in initial time 

      if (!args.element.querySelector(".custom-field-row")) { 

        let row = createElement("div", { className: "custom-field-row" }); 

        if (args.type === "Editor") { 

          let formElement = args.element.querySelector(".e-schedule-form"); 

          formElement.firstChild.insertBefore( 

            row, 

            args.element.querySelector(".e-title-location-row") 

          ); 

        } 

        if (args.type === "QuickInfo") { 

          let popupcontent = args.element.querySelector(".e-popup-content"); 

          popupcontent.appendChild(row); 

        } 

        let container = createElement("div", { 

          className: "custom-field-container", 

        }); 

        let inputEle = createElement("input", { 

          className: "e-field", 

          attrs: { name: "EventType" }, 

        }); 

        container.appendChild(inputEle); 

        row.appendChild(container); 

        var dropDownList = new DropDownList({ 

          dataSource: [ 

            { text: "Public Event", value: "public-event" }, 

            { text: "Maintenance", value: "maintenance" }, 

            { text: "Commercial Event", value: "commercial-event" }, 

            { text: "Family Event", value: "family-event" }, 

          ], 

          fields: { text: "text", value: "value" }, 

          value: args.data.EventType, 

          floatLabelType: "Always", 

          placeholder: "Event Type", 

        }); 

        dropDownList.appendTo(inputEle); 

        inputEle.setAttribute("name", "EventType"); 

      } 

    } 

  }, 

 

Also, we suggest you to refer below UG and showcase sample to add additional field in default editor. 

 

SB: https://ej2.syncfusion.com/vue/demos/#/material/schedule/editor-customfields.html  

UG: https://ej2.syncfusion.com/vue/documentation/schedule/editor-template/#add-additional-fields-to-the-default-editor  

 

Kindly try with the above sample and get back to us if you need any further assistance. 

 

Regards, 

Vinitha 

[Sandra Bordier]

Thank you very much it works very well, I have added my new dropdownlist.

However, I have some questions :

1/ When I want to edit my event, I have this "UTC" info that appears: 

How can I do to remove it ? 

2/ When I want to edit an event, I would like to put my new dropdownlist "readonly" in the quickinfo dialog.
I tried this : 

if (args.type === "QuickInfo") {

args.element.querySelector("#customerId").readonly = true;

}

But it does not work .

3/ Also, for this problem that I described above "When I create a new event and save datas from the editor template, the request payload shows that "added" field is empty but "changed" field contains the datas."

You advice me to remove these lines of code : 

onPopupClose: function (args) { 

    if (args.data) { 

        args.data.StartTimezone = "UTC"; 

        args.data.EndTimezone = "UTC"; 

        if (args.type === "Editor") { 

            args.data.agenda_id = this.agendaIdList[0]; 

            let scheduleObj = this.$refs.schedule.ej2Instances; 

            //Remove below line to resolve issue 

            //  scheduleObj.saveEvent(args.data); 

        } 

    } 

} 

 However, when I do it, it does not save anything, and nothing is triggered (as if I did not press the "save button").

Moreover, I don't know how to get the ID of my event on edition Mode. I don't retrieve it in my args.data array.
I tried to create an eventId data to set it by myself, but it does not work.
Can you help ? 

4/ Last, on edition mode, in the quickInfo dialog, I would like the subject (title) to be set by default and readonly.
How can I do that ?

here is my code, evrything is in the "scheduleTemplate.vue" thank you very much for your help.

Attachment: code_f9147ee8.zip

[Sandra Bordier]

Sorry I have 3 more questions.

I tested my code on a mobile phone (Samsung Galaxy S10) and there a a couple of differences : 

5/ First, in black, The dropdownlist "Choisir une prestation" is not supposed to be visible in the QuickInfo windows. It should appers only in the MoreDetails windows.

On desktop version it works, but here as you can see there is the dropdownlist.
How can I make it for the dropdownlist to be visible ONLY in the "more details" windows on every support (desktop, ipad and smartphone ? )

6/ The fields surrounded in blue are supposed to be display "none" in CSS. It is OK on desktop, but not smartphone.
How can I make them not be visible ?

7/ In purple, it is not very intuitive to understand that you need to press the arrow icon to close the window.
is it possible the change it with a cross icon ? 
is it also possible to change the save icon with another one ? 
Or is it possible te replace the icon with button actions ? 

[Vinitha Devi Murugan]

Hi Sandra, 

 

Thanks for your update. 

 

Please find below sample for all your queries. 

 

Sample: https://codesandbox.io/s/additional-dropdown-field-in-quickinfo-and-eventwindow-forked-n8ipm  

 

Q1: You can hide the UTC info from quick info event popup using below CSS. 

 

 

.e-quick-popup-wrapper .e-event-popup .e-time-zone { 

    display: none; 

  } 

 

Q2: We have achieved your requirement “When I want to edit an event, I would like to put my new dropdownlist "readonly" in the quickinfo dialog ” by making use of popupOpen with below highlighted code.  

 

onPopupOpen: function (args) { 

    if (args.type === "Editor" || args.type === "QuickInfo") { 

      // Create required custom elements in initial time 

      if (!args.element.querySelector(".custom-field-row")) { 

        let row = createElement("div", { className: "custom-field-row" }); 

     .... 

     ... 

        var dropDownList = new DropDownList({ 

          dataSource: [ 

            { text: "Public Event", value: "public-event" }, 

            { text: "Maintenance", value: "maintenance" }, 

            { text: "Commercial Event", value: "commercial-event" }, 

            { text: "Family Event", value: "family-event" }, 

          ], 

          fields: { text: "text", value: "value" }, 

          value: args.data.EventType, 

          floatLabelType: "Always", 

          placeholder: "Event Type", 

          readonly: (args.type === "QuickInfo" && args.target.classList.contains("e-appointment")) 

              ? true: false, // Make dropdownlist "readonly" in the quickinfo dialog 

        }); 

        dropDownList.appendTo(inputEle); 

        inputEle.setAttribute("name", "EventType"); 

      } 

    } 

  }, 

 

Q3: We suggest you to try with below highlighted code to overcome the reported issue. 

 

onPopupClose: function (args) {  

    if (args.data) {  

        args.data.StartTimezone = "UTC";  

        args.data.EndTimezone = "UTC";  

        if (args.type === "Editor") {  

            args.data.agenda_id = this.agendaIdList[0];  

            let scheduleObj = this.$refs.schedule.ej2Instances;  

           scheduleObj.addEvent(args.data); 

        }  

    }  

}  

 

Q4: We can set default value to subject field by using fields option of eventSettings property. Also you can make subject field readonly for quickinfo using popupOpen with below highlighted code. 

 

 

eventSettings: { 

    dataSource: [], 

    fields: { 

      subject: { 

        default: "Add Summary", // Set default value to subject 

      }, 

    }, 

  }, 

 

  onPopupOpen: function (args) { 

    //To set the subject  readonly 

    if (args.type === "Editor" || args.type === "QuickInfo") { 

      if ( 

        args.type === "QuickInfo" && 

        !args.target.classList.contains("e-appointment") 

      ) { 

        args.element.querySelector(".e-subject").readOnly = true; 

      } 

      .... 

 

    } 

 

Please refer below UG to set default value to default fields. 

https://ej2.syncfusion.com/documentation/schedule/appointments/#event-field-settings  

 

Q5:  In our scheduler by default mobile mode, we opened editor window from quick info popups. We don’t have device like quick info in mobile mode. 

 

Q6: We could reproduce your reported issue at our end. To overcome this we suggest you to use below CSS in your sample to hide StartTimezone and EndTimezone fields. 

 

.e-time-zone-container { 

  display: none; 

} 

   

.e-schedule-dialog .e-time-zone-row.e-enable .e-start-time-zone-container, 

.e-schedule-dialog .e-time-zone-row.e-enable .e-end-time-zone-container { 

  display: none; 

} 

 

Q7: Yes, we can change the close icon and save icon in mobile editor window using below CSS. 

 

.e-schedule-dialog.e-device .e-back-icon::before { 

    content: "\e7fc"; // Change close icon Refer https://ej2.syncfusion.com/vue/documentation/appearance/icons/#material  for inbuild icons 

  } 

  .e-schedule-dialog.e-device .e-save-icon::before { 

    content: "\e735"; // Chage save icon 

  } 

 

Please refer below link to know more about in-built available icons. 

https://ej2.syncfusion.com/vue/documentation/appearance/icons/#material  

 

Kindly try with the above solutions and get back to us if you need any further assistance. 

 

Regards, 

Vinitha 

[Sandra Bordier]

Thank you so much for your answer, almost everything is OK !

Q1 => Works perfectly, thank you !

Q2 => Also works perfeclty, thanks !

I was wondering if maybe instead of making the dropdownlist readonly like this :


I could just display my customer info "Lea Durand" Like you did above with "Laeti" and the date "10 Septembre 2021", just in text without a drowpdownlist ?

This way it would appears like this :

[icon] 10 Septembre 2021 (09:00 - 10:00)
[icon] Laeti
[Icon] Lea Durand (for this one is it possible to chosse the icon since it is a customized field ? )

Q3 => It works, but now I have the opposite problem :


When I want to edit an event (for instance here the "Chrissy" event).
I can no longer just update the event, because it systematically create a new event instead of filling the changed data in the Request payload.

In fact, it seems like the Editor windows is not able to differentiate when I create a new event from when I update an event.
Is there any way to correct that ? (I add my code in the zip file, the probleme seems to be in the onPopUpClose event in the scheduleTemplate.vue)

Q4, 5, 7 => Works perfectly, thank you !

Q6 => Ok, thanks for the info :)

Attachment: code_e2b63fc4.zip

[Vinitha Devi Murugan]

Hi Sandra, 

 

Thanks for your update. 

 

We are happy that our solution fulfils your requirements. 

 

Q2: We have achieved your requirement “I could just display my customer info "Lea Durand" Like you did above with "Laeti" and the date "10 Septembre 2021", just in text without a drowpdownlist ? " in the quickinfo dialog ” by making use of popupOpen with below highlighted code.   

 

Sample: https://codesandbox.io/s/additional-dropdown-field-in-quickinfo-and-eventwindow-forked-kwkbj?file=/src/App.vue:4809-4814  

 

.e-quick-popup-wrapper .e-event-popup .custom-field-row { 

    display: flex; 

} 

.e-quick-popup-wrapper .e-event-popup .custom-field-row .e-date-time-icon { 

    display: -ms-flexbox; 

    display: flex; 

    padding-top: 16px; 

} 

 

.e-quick-popup-wrapper .e-event-popup .custom-field { 

    color: rgba(0, 0, 0, 0.87); 

    display: -ms-flexbox; 

    display: flex; 

    padding-top: 16px; 

    font-size: 14px; 

} 

 

onPopupOpen: function (args) { 

    //To set the subject  readonly 

    if (args.type === "Editor" || args.type === "QuickInfo") { 

      if ( 

        args.type === "QuickInfo" && 

        !args.target.classList.contains("e-appointment") 

      ) { 

        args.element.querySelector(".e-subject").readOnly = true; 

      } 

      // Create required custom elements in initial time 

      if (!args.element.querySelector(".custom-field-row")) { 

        let row = createElement("div", { className: "custom-field-row" }); 

        if (args.type === "Editor") { 

          let formElement = args.element.querySelector(".e-schedule-form"); 

          formElement.firstChild.insertBefore( 

            row, 

            args.element.querySelector(".e-title-location-row") 

          ); 

        } 

        // Only shown the dropdown on cell click 

        if ("QuickInfo" && !args.target.classList.contains("e-appointment")) { 

          let popupcontent = args.element.querySelector(".e-popup-content"); 

          popupcontent.appendChild(row); 

        } 

        // Here we displayed the dropdown information 

         if ("QuickInfo" && args.target.classList.contains("e-appointment")) { 

            let row = createElement("div", { className: "custom-field-row" });   

            let iconRow =createElement("div", { className: "e-date-time-icon e-icons" }); 

            row.append(iconRow); 

            let textRow =createElement("div", { className: "custom-field" }); 

             textRow.innerHTML = args.data.EventType; 

             row.append(textRow); 

            args.element.querySelector('.e-popup-content').append(row) 

            } 

        let container = createElement("div", { 

          className: "custom-field-container", 

        }); 

        let inputEle = createElement("input", { 

          className: "e-field", 

          attrs: { name: "EventType" }, 

        }); 

        container.appendChild(inputEle); 

        row.appendChild(container); 

        var dropDownList = new DropDownList({ 

          dataSource: [ 

            { text: "Public Event", value: "public-event" }, 

            { text: "Maintenance", value: "maintenance" }, 

            { text: "Commercial Event", value: "commercial-event" }, 

            { text: "Family Event", value: "family-event" }, 

          ], 

          fields: { text: "text", value: "value" }, 

          value: args.data.EventType, 

          floatLabelType: "Always", 

          placeholder: "Event Type", 

        }); 

        dropDownList.appendTo(inputEle); 

        inputEle.setAttribute("name", "EventType"); 

      } 

    } 

  }, 

}, 

}); 

 

Output: 

 

 

Q3: We suggest you to try with below highlighted code to overcome the reported issue. 

 

onPopupClose: function (args) { 

    if (args.data) { 

      args.data.StartTimezone = "UTC"; 

      args.data.EndTimezone = "UTC"; 

      // Enregistrement des datas si réalisédepuis la fenetre d'édition 

      if (args.type === "Editor") { 

        //args.data.agenda_id = this.agendaIdList[0]; 

        let scheduleObj = this.$refs.schedule.ej2Instances; 

        if(scheduleObj.eventWindow.isCrudAction){ 

          if(scheduleObj.currentAction === 'Save'){ 

            scheduleObj.saveEvent(args.data); 

          }  

          if(scheduleObj.currentAction === 'Add') { 

            scheduleObj.addEvent(args.data); 

          } 

        } 

      } 

    } 

} 

 

Kindly try with the above solutions and get back to us if you need any further assistance.  

 

Regards, 

Vinitha 

[Sandra Bordier]

Thank you very much.

about Q2

It works but I am not sure that I implemented it the right way.

I first copied this code of yours : 

      if ("QuickInfo" && args.target.classList.contains("e-appointment")) { console.log('mode edition');

              let row = createElement("div", { className: "custom-field-row" });
              let iconRow =createElement("div", { className: "e-description-icon e-icons" });
              row.append(iconRow);
              let textRow =createElement("div", { className: "custom-field" });
              textRow.innerHTML = args.data.horse_name_list;
              row.append(textRow);
              args.element.querySelector('.e-popup-content').append(row)              }

          let container = createElement("div", {
            className: "custom-field-container",
          });

          let inputEle = createElement("input", {
           className: "e-field",
            attrs: { name: "EventType" },

          });

But once I've created an event and tried/delete it, I had 2 errors : 

- When I try to edit : "   Uncaught TypeError: Cannot read properties of null (reading 'append')"
- When I try to delete : "  ScheduleTemplate.vue?3e8c:317 Uncaught TypeError: Cannot read properties of undefined (reading 'classList')"

So I changed the code with the lines in bold. :

    if(args.target){

      if ("QuickInfo" && args.target.classList.contains("e-appointment")) { console.log('mode edition');

              let row = createElement("div", { className: "custom-field-row" });
              let iconRow =createElement("div", { className: "e-description-icon e-icons" });

              row.append(iconRow);

              let textRow =createElement("div", { className: "custom-field" });

              textRow.innerHTML = args.data.horse_name_list;

              row.append(textRow);

              if(args.element.querySelector('.e-popup-content')) {
                args.element.querySelector('.e-popup-content').append(row)
              }

      }

          let container = createElement("div", {
            className: "custom-field-container",

          });

          let inputEle = createElement("input", {
            className: "e-field",
            attrs: { name: "EventType" },
          });

    }

Now it works, but I am pretty sure that is not the good way to do it. Can you tell me if there is a better way to proceed ? Also, I am not sure if I put the code in the good position in my file. (The file is zip here, line 316).

Should I put in in another place in my code ?

Also, I would like to ask a couple of things about this windows : 


A=> Where can I get the name of all the icons you use ? Like e-description-icon, e-location-icon ... Because I would like to use other icons but I don't know the list of what you have.

I saw this thing : https://ej2.syncfusion.com/vue/documentation/list-box/icons-and-templates/
but it seems different that the icons you use in the Editor window.

B=> "Amstrong is my customized field. Is it possible to display it just below the first field (the date) ?

C=> Can I change the default icon of "Pré 5" with another one ? 

D=> When I try to create an event which is at the bottom of the scheduler (means that I want to select the latest available slot of the day) it cuts the windows and does not show the action buttons anymore : 



How can I display the whole window, no matter which slot I choose, at the top, bottom, or middle of the scheduler ? 

About Q3 :

It works for the "add" action, but unfortunately it does not work when I try to edit. I put some console.log, and it seems like the "if(scheduleObj.currentAction === 'Save')" condition is never triggered.

You can check my code, it's the block at line 462.

Thank you very much for all your help.

Attachment: code_7fdb5783.zip

[Praveenkumar Narasimhanaidu]

Hi Sandra, 

Thanks for you update. 

Please find the responses below for your queries 

Q1: . It works but I am not sure that I implemented it the right way. 

We have checked your shared code and you can resolve this problem using args.type ===”QuickInfo” instead of just “QuickInfo”. 

if (args.type === "QuickInfo" && 

              !args.target.classList.contains("e-appointment")) { 

            let popupcontent = args