Failed

[?????? ???????]

Hello, I have a problem with setting up the editor window.

When you try to edit, add, or simply open for editing and any other actions, the error Failed to execute 'closest' on 'Element': '.' appears in the editing window. is not a valid selector.

import * as React from 'react';

import './App.css'

import { ScheduleComponent, Inject, ViewsDirective, ViewDirective, Day } from '@syncfusion/ej2-react-schedule';

import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars'

const App = () => {

  const onPopupOpen = (args) => {

    console.log("Popup opened"); // Логирование при открытии всплывающего окна

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

      console.log("Editor opened"); // Логирование при открытии редактора

      let statusElement = args.element.querySelector('#EventType');

      if (statusElement) {

        statusElement.setAttribute('name', 'EventType');

        console.log("EventType found and attribute set"); // Логирование, если элемент с id 'EventType' найден и атрибут установлен

      }

    }

  }

 

  const editorTemplate = (props) => {

    console.log("Editor template rendering", props);

    return (props !== undefined ?

      <table className='custom-event-editor'>

        <tbody>

          <tr>

            <td className='e-textlabel'>Name</td>

            <td colSpan={4}>

              <input id='name' type="text" className='e-field e-input' name='name' placeholder='Enter name' />

            </td>

          </tr>

          <tr>

            <td className='e-textlabel'>Last name</td>

            <td colSpan={4}>

              <input id='lastName' type="text" className='e-field e-input' name='lastName' placeholder='Enter last name' />

            </td>

          </tr>

          <tr>

            <td className="e-textlabel">Email</td>

            <td colSpan={4}>

              <input id='id' type="text" className='e-field e-input' placeholder='Enter email' />

            </td>

          </tr>

          <tr>

            <td className='e-textlabel'>Phone number</td>

            <td colSpan={4}>

              <input id='phone' type="text" className='e-field e-input' name='phone' placeholder='Enter your phone number' />

            </td>

          </tr>

          <tr>

            <td className="e-textlabel">From</td>

            <td colSpan={4}>

              <DateTimePickerComponent format='dd/MM/yy hh:mm a' id='StartTime' date-name='StartTime' value={new Date(props.startTime || props.StartTime)} className='e-field' />

            </td>

          </tr>

          <tr>

            <td className="e-textlabel">To</td>

            <td colSpan={4}>

              <DateTimePickerComponent format='dd/MM/yy hh:mm a' id='EndTime' date-name='EndTime' value={new Date(props.endTime || props.EndTime)} className='e-field' />

            </td>

          </tr>

          <tr>

            <td className="e-textlabel">Description</td>

            <td>

              <textarea id='Description' cols='50' rows='3' maxLength={100} className='e-field e-input' name='Description' />

            </td>

          </tr>

        </tbody>

      </table>

      : <div></div>)

  }

  const data = [

    {

      id: 2,

      name: 'John',

      lastName: 'Doe',

      email: '[email protected]',

      phone: '123-456-7890',

      startTime: new Date(2024, 1, 27, 10, 0),

      endTime: new Date(2024, 1, 27, 12, 30),

      description: 'Discuss project details',

      isAllDay: false,

      status: 'Completed',

      priority: 'High'

    },

  ];

  const fieldsData = {

    id: 'id',

    subject: { name: 'name' },

    lastName: { name: 'lastName' },

    email: { name: 'email' },

    phoneNumber: { name: 'phone' },

    startTime: { name: 'startTime' },

    endTime: { name: 'endTime' },

    description: { name: 'description' }

  };

  const eventSettings = { dataSource: data, fields: fieldsData }

  return (<ScheduleComponent width='100%' height='550px' eventSettings={eventSettings} views={"Day"}

    showQuickInfo={false}

    popupOpen={onPopupOpen.bind(this)}

    editorTemplate={editorTemplate.bind(this)}

  >

    <ViewsDirective>

      <ViewDirective option='Day' startHour='07:00' endHour='18:00' />

    </ViewsDirective>

    <Inject services={[Day]} />

  </ScheduleComponent>);

}

export default App;

[Venkateshwaran Saravanakumar]

Dear Customer,

Sample: https://stackblitz.com/edit/react-scheduler-closestelement-issue-p6b21t?file=index.js

Based on your query and the shared codes, we have identified that you missed the name attribute for the text-box component used for the email field in the editor template. The name attribute is required when providing the e-field class. Please try the above solution and reach out to us if you need any further assistance.

[index.js]

const editorTemplate = (props) => {

    console.log("Editor template rendering", props);

    return (props !== undefined ?

      <table className='custom-event-editor'>

        <tbody>

          <tr>

            <td className='e-textlabel'>Name</td>

            <td colSpan={4}>

              

              <input id='name' type="text" className='e-field e-input' name='name' placeholder='Enter name' />

            </td>

          </tr>

          <tr>

            <td className='e-textlabel'>Last name</td>

            <td colSpan={4}>

              <input id='lastName' type="text" className='e-field e-input' name='lastName' placeholder='Enter last name' />

            </td>

          </tr>

          <tr>

            <td className="e-textlabel">Email</td>

            <td colSpan={4}>

              <input id='id' type="text" className='e-field e-input' placeholder='Enter email' name='email' />

            </td>

          </tr>

          <tr>

            <td className='e-textlabel'>Phone number</td>

            <td colSpan={4}>

              <input id='phone' type="text" className='e-field e-input' name='phone' placeholder='Enter your phone number' />

            </td>

          </tr>

          <tr>

            <td className="e-textlabel">From</td>

            <td colSpan={4}>

              <DateTimePickerComponent format='dd/MM/yy hh:mm a' id='StartTime' date-name='StartTime' value={new Date(props.startTime || props.StartTime)} className='e-field' />

            </td>

          </tr>

          <tr>

            <td className="e-textlabel">To</td>

            <td colSpan={4}>

              <DateTimePickerComponent format='dd/MM/yy hh:mm a' id='EndTime' date-name='EndTime' value={new Date(props.endTime || props.EndTime)} className='e-field' />

            </td>

          </tr>

          <tr>

            <td className="e-textlabel">Description</td>

            <td>

              <textarea id='Description' cols='50' rows='3' maxLength={100} className='e-field e-input' name='Description' />

            </td>

          </tr>

        </tbody>

      </table>

      : <div></div>)

  }

 

Regards,

Venkatesh