Recurrence Editor comes back as "undefined"

[Matthew Roberts]

Hello, I no matter what I do I keep getting undefined for the value of the Recurrence Editor Component. I am building a NextJs application and I keep running into issues retrieving the values of certain components. 

import { useState, useEffect, useRef } from 'react';

import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';

import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, DragAndDrop, Resize, ResourcesDirective, ResourceDirective, RecurrenceEditorComponent } from '@syncfusion/ej2-react-schedule';

import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';

import { Placeholder } from '@aws-amplify/ui-react';

import { dehydrate, QueryClient, useQuery } from '@tanstack/react-query';

import axios from 'axios';

import { urlConfig } from '../context/urls';

import ClientModal from '../components/modals/clientModal';

import { L10n } from '@syncfusion/ej2-base';

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

const Schedule = () => {

    const frequencyRef = useRef('');

    const [ frequency, setFrequency ] = useState();

    const [ clients, setClients ] = useState([]);

    const [ clientOpen, setClientOpen ] = useState(false);

    const [ selectedClient, setSelectedClient ] = useState();

    L10n.load({

        'en-US': {

            'schedule': {

                'saveButton': 'Add',

                'newEvent': 'Add Shift'

            },

        }

    });

    const { isLoading, isSuccess, error, data: clientData, isFetching, isPreviousData } =

        useQuery(

            [ "getClients" ], async () => await axios.get(`${urlConfig}/api/clients/getClients/`, {

                params: {

                }

            }

            )

                .then((res) => res.data)

                .catch(err => console.log({ err })), {

            keepPreviousData: true,

            refetchOnWindowFocus: false,

            retry: false,

            retryOnMount: false,

            refetchOnMount: false

        }

        );

    useEffect(() => {

        clientData && setClients(clientData);

        // data && setCount(data.count);

        // leads && data && setBrokerListings([...brokerListings, ...data.data])

        return () => {

            clientData;

        };

    }, [ clientData ]);

    const autoCompleteTemplate = (props) => {

        return (

            { ...props },

            <div className='e-ddl e-popup e-lib e-control e-popup-open auto-complete-footer '>

                <div className='e-content e-dropdownbase'>

                    <ul className='e-list-parent e-ul '>

                        <li onClick={() => setClientOpen(true)} className='e-list-item'>

                            +Add New Client

                        </li>

                    </ul>

                </div>

            </div>

        );

    };

    const editorTemplate = (templateArgs) => {

        console.log({ templateArgs });

        let recObject

        return (

            templateArgs !== undefined ?

                <div className='z-[999] flex flex-col space-y-2'>

                    {!clientOpen &&

                        <AutoCompleteComponent className='e-field' fields={{ value: 'name', id: 'id' }} id='client' data-name='Client' footerTemplate={autoCompleteTemplate} dataSource={clients} placeholder='Client' ></AutoCompleteComponent>

                    }

                    {clientOpen &&

                        <div className='py-3'>

                            <div className='p-2 border rounded-lg border-blue-600'>

                                <h2 className='text-lg font-semibold'>Enter New Client Info</h2>

                                <TextBoxComponent name='name' placeholder="Name" className='hover:border-0 ' cssClass="e-field" floatLabelType="Auto" />

                                <TextBoxComponent name="phone" placeholder="Phone" className='hover:border-0 ' cssClass="e-field" floatLabelType="Auto" />

                                <TextBoxComponent name="email" placeholder="Email" className='hover:border-0 ' cssClass="e-field" floatLabelType="Auto" />

                                <TextBoxComponent name="address" placeholder="Address" className='hover:border-0 ' cssClass="e-field" floatLabelType="Auto" />

                                <button onClick={() => setClientOpen(false)} className='mt-2 bg-blue-600 text-white rounded-lg px-2 py-1'>Cancel</button>

                            </div>

                        </div>

                    }

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

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

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

                </div> : <div></div>

        );

    };

    const removePopup = (openPopUpArgs) => {

        console.log({ openPopUpArgs });

        openPopUpArgs.type === "QuickInfo" ? openPopUpArgs.cancel = true : '';

        return (

            <>

                <AutoCompleteComponent className='e-field' fields={{ value: 'name', id: 'id' }} id='client' data-name='client' footerTemplate={autoCompleteTemplate} dataSource={clients} placeholder='Client' ></AutoCompleteComponent>

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

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

                <RecurrenceEditorComponent change={() => console.log({ openPopUpArgs })} ref={frequencyRef} className="e-field" id="RecurrenceEditor" data-name="RecurrenceRule" />

            </>

        );

    };

    const onPopupClose = (e) => {

        console.log('Pop Up Close: ', { e });

        console.log({ frequencyRef });

        setClientOpen(false);

        setFrequency();

    };

    let data = [];

    return (

        <div>

            <ScheduleComponent

                title='New Shift'

                dataBound={bound => console.log({ bound })}

                actionComplete={actComplete => console.log({ actComplete })}

                dataBinding={binding => console.log({ binding })}

               

                editorTemplate={e => editorTemplate(e)}

                popupClose={(e) => onPopupClose(e)}

                popupOpen={(e) => removePopup(e)}

                height='550px'

                selectedDate={new Date()}

                eventSettings={{

                    fields: {

                        //     id: {name: 'id'},

                        //     isAllDay: { name: 'isAllDay',  },

                        //     startTime: { name: 'startTime' },

                        //     endTime: { name: 'endTime' },

                        // frequency: {name: "frequency"},

                        // client: {name: 'client'},

                        //     phone: {value: 'value'},

                        //     count: {name: 'count'},

                        //     name: {name: 'name'}

                    },

                    dataSource: {

                        data:{

                            RecurrenceRule: "FREQ=WEEKLY;BYDAY=MO,TU,WE;INTERVAL=1;", value: "FREQ=WEEKLY;BYDAY=MO,TU,WE;INTERVAL=1;"

                        }

                    },

                }}>

                <Inject services={[ Day, Week, WorkWeek, Month, Agenda, DragAndDrop, Resize ]} />

            </ScheduleComponent>

        </div>

    );

};

export default Schedule;

export async function getServerSideProps (context) {

    const { query } = context;

    const page = query.page || 1;

    const queryClient = new QueryClient({

        defaultOptions: {

            queries: {

                refetchOnWindowFocus: false,

                refetchOnMount: false

            }

        }

    });

    await queryClient.prefetchQuery([ 'getClients' ], axios.get(`${urlConfig}/api/clients/getClients`, {

        params: {

        }

    }).then(res => res.data).catch(err => err));

    return {

        props: {

            dehydratedState: dehydrate(queryClient, {

            })

        }

    };

}

[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