Recurrence Editor comes back as "undefined"

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, {
            })
        }
    };
}



1 Reply

RV Ravikumar Venkatesan Syncfusion Team December 12, 2022 12:35 PM UTC

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


Loader.
Up arrow icon