Event Template not working on React v15.5.4

[Lakshay Gupta]

Hi, i wanted to customize the Edit window of schedule component. But when i am trying to use the event template , it causes my component to render infinitely.

This is the error which i am getting =>

Warning: forceUpdate(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

You can find the code here => https://bitbucket.org/lakshay_25/syncfusion-schedule/src/event-template/

My main agenda was to add separate start Date , end Date and start Time and end Time fields on the Editor window with validations such a start Date should not be greater than end date, similarly for time fields.

I couldn't use the default startTime and EndTime fields of the Editor Window as the project requirements are different here and i need separate Date and Time fields.

As an alternative i have added the date and time components on editor window using the popupopen event but i am not sure if i have done that correctly because i am not able to initialize them with proper values and not able to add vaidations.

Any help on this will be much appreciated.

[Ravikumar Venkatesan]

Hi Lakshay,

Greetings from Syncfusion support.

Q1: Event Template not working on React v15.5.4

We have validated your above query at our end. We suggest you upgrade yours react version to 16.2.0 or to the latest version(if possible). We have modified your shared sample with react version 16.2.0 and it works as expected.

Q2: My main agenda was to add separate start Date, end Date, and Start Time and end Time fields on the Editor window with validations such as a Start Date should not be greater than the end date, similarly for time fields

We have prepared a sample with the separate date and time fields with help of the Schedule editorTemplate as mentioned in the below code snippet and added validation for the custom fields on the popupOpen event of the Schedule.

[EventCalendar.jsx]

  onPopupOpen(args) {

    if (args.data.isBlocked) {

      args.cancel = true;

      return;

    }

    if (new Date(args.data.startTime) < new Date()) {

      args.cancel = true;

      return;

    }

 

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

      const formElement = args.element.querySelector('.e-schedule-form');

      var validator = formElement.ej2_instances[0];

      validator.addRules('start', { required: true, range: [this.isValidHourRange, 'Select a valid hour range'] });

      validator.addRules('end', { required: true, range: [this.isValidHourRange, 'Select a valid hour range'] });

    }

  }

 

  isValidHourRange() {

    var start = document.querySelector('#start').value.split(/[: ]/);

    var end = document.querySelector('#end').value.split(/[: ]/);

    var startTime = new Date().setHours((+start[0]) + (start[2] === 'PM' ? 12 : 0), +start[1]);

    var endTime = new Date().setHours((+end[0]) + (end[2] === 'PM' ? 12 : 0), +end[1]);

    return startTime < endTime;

  }

 

  editorTemplate(props) {

    return ((props !== undefined) ?

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

        <tbody>

          <tr>

            <td className="e-textlabel">From</td><td colSpan={4}>

              <DatePickerComponent id="startTime" data-name="startTime" value={new Date(props.startTime || props.StartTime)} className="e-field"></DatePickerComponent>

            </td>

          </tr>

          <tr>

            <td className="e-textlabel">To</td><td colSpan={4}>

              <DatePickerComponent id="endTime" data-name="endTime" value={new Date(props.endTime || props.EndTime)} className="e-field"></DatePickerComponent>

            </td>

          </tr>

          <tr>

            <td className="e-textlabel">Start</td><td colSpan={4}>

              <TimePickerComponent id="start" data-name="start" value={new Date(props.start || props.Start)} className="e-field"></TimePickerComponent>

            </td>

          </tr>

          <tr>

            <td className="e-textlabel">End</td><td colSpan={4}>

              <TimePickerComponent id="end" data-name="end" value={new Date(props.end || props.End)} className="e-field"></TimePickerComponent>

            </td>

          </tr>

          <tr>

            <td className="e-textlabel">Only Virtual</td><td colSpan={4}>

              <CheckBoxComponent id="onlyVirtual" data-name="onlyVirtual" checked={props.onlyVirtual || props.OnlyVirtual} className="e-field" ></CheckBoxComponent>

            </td>

          </tr>

        </tbody>

      </table> : <div></div>);

  }

Kindly try the shared sample and let us know if you need any further assistance.

Regards,

Ravikumar Venkatesan

Attachment: ej2reactschedulewitheditortemplate_356b2856.zip

[Lakshay Gupta]

Hi @Ravikumar Venkatesan, 

Thankyou for getting back to me.

I afraid it won't be possible for us to upgrade the react version. Is there any other way of achieving this ? => My main agenda was to add separate start Date, end Date, and Start Time and end Time fields on the Editor window with validations such as a Start Date should not be greater than the end date, similarly for time fields 

[Ravikumar Venkatesan]

Hi Lakshay,

Thanks for the patience.

We have validated your query “I'm afraid it won't be possible for us to upgrade the react version” at our end. We suggest you use the "@syncfusion/ej2-react-schedule" version “17.2.28-beta” to resolve your problem. For the same, we have prepared a sample for your reference. We have added validations for the editor window input fields as per your requirement.

Kindly try the shared sample and let us know if you need any further assistance.

Regards,

Ravikumar Venkatesan

Attachment: ej2reactschedulewitheditortemplatewithvalidation_6622a971.zip