RecurrenceEditorComponent with editorTemplate results in error "Cannot read property 'getTime' of undefined"

[Mark]

Hello,

I'm working with a scheduler that has a custom editorTemplate, and i am trying to use the RecurrenceEditorComponent inside that template.

When do that I see the error "Cannot read property 'getTime' of undefined" when saving the event, or other similar errors.   The error happens in event-window.js and involves "endDate.getTime" and involves recurrenceValidation.

I have created a much simplified version of what I am doing, and it errors the same way my code errors out.   It is fairly simple with an additional component of ApptEditorTemplate as the editorTemplate and it calls the RecurrenceEditorComponent inside that editor:

https://stackblitz.com/edit/editortemplate-with-recurrenceeditorcomponent?file=index.js
 
It seems some of the reoccurance information is not being passed to recurrenceValidation but I'm not sure why.

Thank you for your time.

[Ravikumar Venkatesan]

Hi Mark, 

Greetings from Syncfusion support. 

We have validated your reported problem at our end and the root cause of the problem is the StarTime and EndTime values are required to process the recurrence rule but, they are undefined. Due to the undefined Start and End time values, you are facing the reported problem. We have resolved your problem by adding the StartTime and EndTime fields to the Editor window. For the same, we have prepared a sample which can be available from the below link. 

Sample: https://stackblitz.com/edit/ej2-react-schedule-editortemplate-with-recurrence-editor-sample?file=ApptEditorTemplate.js 

 

[AppEditorTemplate.js] 

const ApptEditorTemplate = props => { 

  let recObject; 

  if (props) { 

    return ( 

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

        <tbody> 

          <tr> 

            <td className="e-textlabel">Start time</td> 

            <td colSpan={4}> 

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

            </td> 

          </tr> 

          <tr> 

            <td className="e-textlabel">End time</td> 

            <td colSpan={4}> 

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

            </td> 

          </tr> 

          <tr> 

            <td className="e-textlabel">Repeat type</td> 

            <td colSpan={4}> 

              <RecurrenceEditorComponent id="RecurrenceEditor" className="e-field" data-name="RecurrenceRule" ref={t => (recObject = t)}/> 

            </td> 

          </tr> 

        </tbody> 

      </table> 

    ); 

  } else { 

    return null; 

  } 

}; 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan 

[Matthew Roberts]

I still get no RecurrenceRule data.

[Ravikumar Venkatesan]

Hi Matthew,

You can set the recurrence editor rule value to the appointment with help of the popupClose event of the Schedule.

Sample: https://stackblitz.com/edit/ej2-react-schedule-editor-template-recurrence?file=index.js

[index.js]

const Schedule = () => {

  let recObject;

 

  const onPopupClose = (args) => {

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

      args.data.RecurrenceRule = recObject.value;

    }

  }

 

  const editorTempalte = props => {

    if (props) {

      return (

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

          <tbody>

            {((!props.RecurrenceID) ?

              <tr>

                <td className="e-textlabel">Repeat type</td>

                <td colSpan={4}>

                  <RecurrenceEditorComponent id="RecurrenceEditor" className="e-field" data-name="RecurrenceRule" ref={t => (recObject = t)} value={props.RecurrenceRule} />

                </td>

              </tr>

              :

              <tr></tr>

            )}

          </tbody>

        </table>

      );

    } else {

      return null;

    }

  };

 

  return (

    <ScheduleComponent currentView="Month"  editorTemplate={event => editorTempalte(event)} popupClose={onPopupClose.bind(this)}>

    </ScheduleComponent>

  );

};

Regards,

Ravikumar Venkatesan