HOW TO IMPLEMENT CUSTOM EDIT MASK

[Alex]

Hello everyone,

I’m using the latest Schedule component in React. In the attached screenshot, you can see the Month view along with my group references (functionalCategoryId). Currently, no data is showing up in the scheduler. My data is structured as an array of objects like this:

{

  "id": 1,

  "teamId": 44,

  "startDateTime": "2025-01-01T00:00:00",

  "endDateTime": "2025-01-01T06:00:00",

  "shiftTypeId": 1,

  "shiftStateId": 1,

  "anaUserId": 10,

  "training": 0,

  "trainingFunctionalCategoryId": 9,

  "anaCalendarId": 5,

  "functionalCategoryId": 8

}

Here’s what I need to achieve:

1. Display Data on the Screen
   I want the scheduler to render the events stored in the data array above.

2. Disable Add/Delete Functionality
   Users should not be able to create new events or delete existing ones.

3. Customize the Edit Dialog
   When a user edits an existing event, I don’t want the default scheduler dialog. Instead, I need:

   • Start/End DateTime: Display these fields in a read-only state (e.g., 2025-01-01T00:00:00 and 2025-01-01T06:00:00).
   • Functional Category: A dropdown that is read-only (populated with functionalCategoryId).
   • Title: Replace it with anaUserId (read-only for now; later I will map it to a user’s name).
   • Training: A checkbox to indicate whether the shift is training.
   • Training Functional Category: A combobox for trainingFunctionalCategoryId.
   • Shift State: A combobox for shiftStateId, but it should be read-only.
   • Description: A standard read/write text field.

Could someone help me figure out the best way to implement this custom behavior in the Schedule component? Any examples, code snippets, or step-by-step instructions would be greatly appreciated.

Thanks in advance!

Actual Page:

Actual Edit Template 

Attachment: esempio_4645c590.zip

[Alex]

Hello, I attached the incorrect version of the file.

This is replace the existing one

Attachment: esempio_2_fd7c168f.zip

[Alex]

Hello, I attached the incorrect version of the file.

This is replace the existing one

[Ashokkumar Karuppasamy]

Hi Alex,

We have checked your shared requirements at our end. You can find the possible ways to achieve your shared requirements in the Scheduler below. Try the solutions provided and let us know if you need further assistance.

Q1)Display Data on the Screen

You have achieved your requirement using event field mapping. By utilizing event field mapping, you can meet your requirements, and we have attached the user guide for your reference. Please try the solution and let us know if you need any further assistance.

[index.js]

  const fieldMappings = {

    id: 'id',

    subject: { name: 'anaUserId' },

    startTime: { name: 'startDateTime' },

    endTime: { name: 'endDateTime' }

  };

 

eventSettings={{ dataSource: data, fields: fieldMappings, allowAdding: false, allowDeleting: false }}

 

UG: https://ej2.syncfusion.com/react/documentation/schedule/appointments#binding-different-field-names

Sample: https://stackblitz.com/edit/react-epvz8rpm-eooxljn1?file=index.js

Q2) Disable Add/Delete Functionality

To achieve your requirement using the schedule event settings, set allowDeleting and allowAdding to false. This will prevent adding and deleting. Please try the solution and let us know if you need any further assistance.If the property usin only edit not added or delete Please try the solution and let us know if you need any further assistance.

Sample: https://stackblitz.com/edit/react-epvz8rpm-eooxljn1?file=index.js

eventSettings={{ dataSource: data, fields: fieldMappings, allowAdding: false, allowDeleting: false }}

 

Q3) Customize the Edit Dialog

Based on the shared details, we have prepared a sample for your requirement using the schedule editorTemplate. Please refer to the attached code snippet and sample demonstration of the solution. Kindly try the solution and let us know if you need any further assistance.

Sample: Sample: https://stackblitz.com/edit/react-epvz8rpm-eooxljn1?file=index.js

Regards,

Ashok

[Alex]

Good evening  Ashokkumar Karuppasamy,

thanks for your help your code help me so much. 

I want make other improvement such us to apply a customization to the template of the event in the scheduler to show only few info such as anaUserId and shiftTypeId with fixed sized to see all the text 

How can I do it?

Thanks Alex

[Ashokkumar Karuppasamy]

Hi Alex,

For your last query, we have branched out separately. For further updates, please follow the link below

schedule event Customization - From Forum 195814 | ReactJS Forums | Syncfusion®

Regards,
Ashok

[Alex]

good morning  Ashokkumar Karuppasamy,

You solved my request.

Thanks for the answer.

Alex

[Ashokkumar Karuppasamy]

Hi Alex,

 

You are most welcome. We are happy that our solution was working for you. 

Regards,

Ashok