changing default session duration not working after changing editor template

[Mansi Sharma]

While creating events, I want the session duration to be 1 hr instead of the default 60 mins.

Also, I want to change the editor template along with that. For doing that, I wrote this piece of code.

const editorTemplate = (props) => {

    return (props !== undefined ? (

      <table className="custom-event-editor" style={{ width: '100%', cellpadding: '5' }}>

        <tbody>

          <tr>

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

            <td colSpan={4}>

              <DropDownListComponent id="EventType" placeholder="Choose status" data-name="EventType" className="e-field" style={{ width: '100%' }} dataSource={['Regular Session', '15 min Free Call']} value={props.EventType || null} />

            </td>

          </tr>

          <tr>

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

            <td colSpan={4}>

              <DateTimePickerComponent format="dd/MM/yy hh:mm a" id="StartTime" data-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" data-name="EndTime" value={new Date(props.endTime || props.EndTime)} className="e-field" />

            </td>

          </tr>

        </tbody>

      </table>

    ) : <div />);

  };

  const onPopupOpen = (args) => {

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

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

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

      // eslint-disable-next-line no-param-reassign

      args.duration = 60;

    }

  };



The editor template is changing but the session durations remain 30 mins. If I don't change the editor template, the session duration works fine. 

Please look into this and if there's a solution please reply as soon as possible.

[Balasubramanian Sattanathan]

Hi Mansi,

Greetings from Syncfusion Support.

We can achieve your requirement by using the below code snippet in the popupOpen event of the Scheduler.

Code snippet:

onPopupOpen(args) {
  if (args.type === 'Editor' && (args.target.classList.contains('e-work-cells'))) {
    var endObj = document.querySelector('#EndTime').ej2_instances[0];
    endObj.value = new Date(endObj.value.setMinutes(endObj.value.getMinutes() + 30));
  }
}

Sample: https://stackblitz.com/edit/react-schedule-editor-template-numeric-textbox-mwqsfq?file=index.js

Kindly try the above solution and let us know if this is helpful.

Regards,
Balasubramanian S