Create a new event and add it to the scheduler

Question

Hi ! I'm trying to create a new event on the scheduler. On the actionBegin method, I receive the option ids from the modal drop-down lists. With these Ids I further call a back-end api and create a new event. I would like the result of the call to be added to the events that were already added and to be displayed correctly on the scheduler. Instead, the scheduler displays the ids of the drop-down lists that originally came as a parameter on actionBegin and so the mapping is not appropriate. Here is my code : editorTemplate(props) { var allSubjects = this.props.treeViewAndMappingFieldsData.dataSource; return props !== undefined ? (

Subject td>	td> tr>
Classtd>	td> tr>
Fromtd>	DateTimePickerComponent> td> tr>
Totd>	DateTimePickerComponent> td> tr> tbody> table> ) : ( ); };onActionBegin(event) { if (event.requestType === 'eventCreate') { this.props.createSchedule({ startTime: format(new Date(event.data[0].StartTime), 'yyyy-MM-dd kk:mm:ss'), endTime: format(new Date(event.data[0].EndTime), 'yyyy-MM-dd kk:mm:ss'), classId: event.data[0].Class, subjectId: event.data[0].Subject, semigroupId: this.props.semiGroupId, }) .then((schedule) => { this.setState(previousState => ({ scheduleData: [...previousState.myArray, schedule] })); this.scheduleObj.addEvent(schedule); }); } if (event.requestType === 'eventCreate' && this.isTreeItemDropped) { let treeViewData = this.treeObj.fields.dataSource; const filteredSubjects = treeViewData.filter( (item) => item.Id !== this.draggedItemId ); this.treeObj.fields.dataSource = filteredSubjects; let elements = document.querySelectorAll( '.e-drag-item.treeview-external-drag' ); for (let i = 0; i < elements.length; i++) { remove(elements[i]); } } } onEventRendered(args) { if (args.data.SubjectType === "Curs") { args.element.style.backgroundColor = "#357cd2"; } else if (args.data.SubjectType === "Laborator") { args.element.style.backgroundColor = "#ea7a57"; } else if (args.data.SubjectType === "Seminar") { args.element.style.backgroundColor = "#D1C61B"; } } I attach screens with the results received on beginAction and from Back end, but also a video with the result in UI.Can you help me with this problem?Attachment: Screens_3598973.zip

Ravikumar Venkatesan · Answer

Hi Cezar,Greetings from Syncfusion support.We have validated your problem “the scheduler
displays the ids of the drop-down lists that originally came as a parameter on
actionBegin” at our end. In your shared code you didn’t prevent adding of
appointment to the Schedule in the actionBegin event before adding an
appointment through the addEvent method. We suspect that is causing the
problem. So, we suggest you prevent adding of appointment in the actionBegin
event by setting up “args.cancel = true” while adding an appointment
through the addEvent method as mentioned in the below code snippet.[index.js]

onActionBegin(args) {
      if (args.requestType === 'eventCreate') {
        if (!this.allowAdd) {
          var app = { Subject: this.subjectList[+args.data[0].Subject - 1], SubjectId: args.Subject, Class: this.clsList[+args.data[0].Class - 1], StartTime: args.data[0].StartTime, EndTime: args.data[0].EndTime };
          args.cancel = true;
          this.allowAdd = true;
          this.scheduleObj.addEvent(app);
        } else {
          this.allowAdd = false;
        }
      }
    }

Sample: https://stackblitz.com/edit/ej2-react-schedule-add-event-method-sample?file=index.jsKindly try the shared solution and if you still facing
the same problem share the below details to serve you better.
 Share all the Schedule
     related codes or
 Reproduce the problem in
     the shared sample or
 Share a simple issue
     reproducing sample if possible.
  Regards,Ravikumar Venkatesan

Cezar · Answer

Hi ! I tried to solve the problem in the indicated way but it didn't work .

I reproduced the problem by creating two projects (one of Front-End containing only the scheduler and the other of Back-End containing the end-point called).

I want to mention that the flow is as follows: From modal, I send SubjectId and ClassId, and I will make a request with them and based on them to create a new time reservation.

To simplify the example, I have entered in the endpoint only the final schedule object to be displayed on the scheduler.

Finally, although the data appears on the response, the time slot cannot be displayed on the scheduler. Do you have any suggestions to resolving this issue?

PS: Here is FE project : https://github.com/PeleaCezar/test and in attachement is BE project

Attachment: BEapp_fdbb3c0d.zip

Ravikumar Venkatesan · Answer

Hi Cezar,Thanks for the update.We have validated your query “Do you have any
suggestions for resolving this issue?” at our end. You have used the camel
case for appointment fields and the response from the service too returned the
camel case for appointment fields caused the problem. We have resolved the
problem with the below-highlighted changes.[index.js]

async onActionBegin(event) {
      if (event.requestType === 'eventCreate') {
     
    if (!this.allowAdd) {
     
      try {
     
        const response = await SchedulingService.create({
     
          StartTime: format(new Date(startTimeTest), 'yyyy-MM-dd
  kk:mm:ss'),
     
          EndTime: format(new Date(endTimeTest), 'yyyy-MM-dd
  kk:mm:ss'),
     
          ClassId: event.data[0].ClassId,
     
          SubjectId: event.data[0].SubjectId,
     
          SemiGroupId: "3"
     
        })

if (response.data) {
     
          response.data.StartTime = startTimeTest;
     
          response.data.EndTime = endTimeTest;
     
          this.allowAdd = true;
     
          this.scheduleObj.addEvent(response.data);
     
        }
     
      } catch (error) {
     
        console.log(error)
     
      }
     
    }
     
    else {
     
      this.allowAdd = false;
     
    }
      }
    }

[Startup.cs]

using Newtonsoft.Json;
  using Newtonsoft.Json.Serialization;
   
  namespace TestApplication
  {
      public class Startup
      {
          public Startup(IConfiguration
  configuration)
         
  {
             
  Configuration = configuration;
         
  }
   
          public IConfiguration
  Configuration { get; }
   
          // This method gets
  called by the runtime. Use this method to add services to the container.
          public void
  ConfigureServices(IServiceCollection services)
         
  {

services.AddControllers()
             
  .AddNewtonsoftJson(
             
  options =>
             
  {
                 
  options.SerializerSettings.ContractResolver
  = new
  DefaultContractResolver();
                 
  options.SerializerSettings.DateTimeZoneHandling =
  DateTimeZoneHandling.Unspecified;
                 
  options.SerializerSettings.ReferenceLoopHandling =
  ReferenceLoopHandling.Ignore;
             
  });
         
  }
      }
  }

Kindly try the shared solution and let us know if you
need any further assistance.Regards,Ravikumar VenkatesanAttachment: ej2reactschedulesamplewithservice_6914cf5a.zip

Cezar · Answer

Thank you very much for this advice. it was very useful.

I have one more question. I want to add on this scheduler a different design for the editor creator, as well as a different one for the update function that I will implement.

How could the design be adapted so that when I click an existing appointment on scheduler, the button with the text Update is displayed at the bottom right of the screen, while when I click on an empty time slot, the button with the text Create is displayed instead of the update button. Also that , quickInfo I would like to be displayed only when selecting an existing event and not when you want to add a new event.

Ravikumar Venkatesan · Answer

Hi Cezar,Q1: When I click an existing appointment on the
scheduler, the button with the text Update is displayed at the bottom right of
the screen, while when I click on an empty time slot, the button with the text
Create is displayed instead of the update buttonYou can achieve the requirement by changing the default
editor window dialog buttons property in the popupOpen event of
the Schedule as mentioned in the shared code snippet.Q2: I would like to be displayed only when selecting
an existing event and not when you want to add a new eventYou can prevent the opening of a quick info popup on
cell click in the popupOpen event of the Schedule by setting up args.cancel
= true as mentioned in the shared code snippet. [index.js]

onPopupOpen(args) {
      if (args.type === 'QuickInfo' && !args.target.classList.contains('e-appointment')) {
     
    //
  To prevent opening quick info popup on cell click action
     
    args.cancel
  = true;
      } else if (args.type === 'Editor') {
     
    const dialog = args.element['ej2_instances'][0];
     
    const btnContent = args.data.Id ? 'Update' : 'Create';
     
    //
  To change the editor window default buttons
     
    dialog.buttons = [
     
      { buttonModel: { content: "Delete", cssClass: 'e-primary
  e-event-delete e-hide' } },
     
      { buttonModel: { content: btnContent, cssClass: 'e-primary
  e-event-save', isPrimary: true }, click: this.scheduleObj.eventWindow.eventSave.bind(this.scheduleObj.eventWindow) },
     
    ];
      }
    }

API(popupOpen event): https://ej2.syncfusion.com/react/documentation/api/schedule/#popupopenKindly try the shared solution and let us know if you
need any further assistance.Regards,Ravikumar VenkatesanAttachment: ej2reactschedulepreventquickinfopopup_e72621fd.zip

Cezar · Answer

I tried to add a secondary button and when I try to open the editor on the edit action, it gives me this error

dom.js:75 Uncaught TypeError: Cannot read properties of null (reading 'className')

This is code :

    onPopupOpen(args) {
        if (args.type === 'QuickInfo' && !args.target.classList.contains('e-appointment'))      
        {
            args.cancel = true;
        }
        else if (args.type === 'Editor') {
    
            const dialog = args.element['ej2_instances'][0];
            const btnContent = args.data.Id ? 'Update' : 'Create';

            dialog.buttons = [

                { buttonModel: { content: "Cancel", cssClass: 'e-event-cancel e-hide' },
                click: this.scheduleObj.eventWindow.dialogClose.bind(this.scheduleObj.eventWindow) },
                
        
                { buttonModel: { content: btnContent, cssClass: 'e-primary e-event-save', isPrimary: true },
                 click: this.scheduleObj.eventWindow.eventSave.bind(this.scheduleObj.eventWindow) },
        
              ];
      }
}

and in css 
  .e-event-cancel.e-hide {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff; 
  }

Any idea ?

Ruksar Moosa Sait · Answer

Hi Cezar,We have checked the reported problem by opening the editor
on a button click but unfortunately, we are not able to replicate the issue at
our end. Could you please get back to us with the below details that help us to
validate the issue further and provide the solution earlier?
 Share the details of what we have missed in
     our sample to replicate the issue or 
 Replicate the issue in the attached sample
     if possible
onClick(){    const data ={   
  "Id": 3,   
  "Subject": "Teoria
Sistemelor",   
  "Teacher": "Dan
Popescu",   
  "Group": "CR2.2A",   
  "StartTime": "2022-04-19T10:00:00.000Z",   
  "EndTime": "2022-04-19T12:00:00.000Z",   
  "SubjectType": "Course"    }
     this.scheduleObj.openEditor(data, "Save", true);  }Output:Regards,Ruksar Moosa SaitAttachment: ej2reactschedulepreventquickinfopopupModified_e569caec.zip

Cezar · Answer

I solved the creation problem. To the last question I had, I was suggested to add this code for a new button that has different content depending on the action (either edit or created):

onPopupOpen(args) {

if (args.type === 'QuickInfo' && !args.target.classList.contains('e-appointment')) {

// To prevent opening quick info popup on cell click action

args.cancel = true;

} else if (args.type === 'Editor') {

const dialog = args.element['ej2_instances'][0];

const btnContent = args.data.Id ? 'Update' : 'Create';

// To change the editor window default buttons

dialog.buttons = [

{ buttonModel: { content: "Delete", cssClass: 'e-primary e-event-delete e-hide' } },

{ buttonModel: { content: btnContent, cssClass: 'e-primary e-event-save', isPrimary: true }, click: this.scheduleObj.eventWindow.eventSave.bind(this.scheduleObj.eventWindow) },

];

}

I tried to add another button besides the edit button, this being the cancel button, but on the edit action it doesn't work after that.( This action is replicated only when i try to edit an appointment).

I replicated this issue in the archive I uploaded.

Attachment: ej2reactschedulepreventquickinfopopup_e72621fd_d89d6b66.rar

Ruksar Moosa Sait · Answer

Hi Cezar,We have checked on your reported issue and let you know that
it is necessary to add a Delete button as we have performed the edit
actions based on it at our source end. Hence, we have modified the sample by
adding a Delete button like the below code snippet.[index.js]{    buttonModel: { content: "Delete", cssClass: 'e-primary
e-event-delete', isPrimary: true },    click: this.scheduleObj.eventWindow.eventDelete.bind(this.scheduleObj.eventWindow)},Also, we have made the delete button display as none
to maintain your requirement.[index.css].e-event-delete{    display: none;}Kindly try the attached sample and let us know if this meets
your requirements.Regards,Ruksar Moosa SaitAttachment: ej2reactschedulepreventquickinfopopupIssueResolved_b5c0b699.zip

Cezar · Answer

Thank you very much for all asistance

Satheesh Kumar Balasubramanian · Answer

Hi Cezar,Thanks for the update.We are happy that your problem has been resolved now.Regards,Satheesh Kumar B