We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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.
Live Chat Icon For mobile
Up arrow icon