Adding additional fields

[Steven Oketch]

i have an array of objects named scheduleData, am having a hard time displaying some of the fields.

am using react

[
  {
    "title": "Summer School",
    "start_time": "14:00",
    "end_time": "14:00",
    "start_date": "2023-08-14",
    "end_date": "2023-08-21",
    "location": "Diani, Kwale",
    "url": "https://academy.com/events",
    "description": "ACTS Summer School Schedule",
    "reminders": "1440",
    "time_zone": "Africa/Nairobi",
    "facilitators": "Academy",
    "created_at": "2023-05-14T05:40:11.251000",
    "id": 1,
    "user_id": 3
  }
]

start_time, end_time, location, description and title are the only ones displaying in the scheduler, how do i display url and facilitators? here is my code?

<div className='container'>

      <div className='row'>

        <div className='col-lg-12'>

          <ScheduleComponent height='650px' width='100%'

            currentView='Month'

            selectedDate={new Date()}

            rowAutoHeight={true}

            readonly={true}

            eventSettings={{

              dataSource: scheduleData,

              fields: {

                id: 'id',

                subject: { name: 'title' },

                startTime: { name: 'start_time' },

                endTime: { name: 'end_time' },

                description: { name: 'description' },

                location: { name: 'location' },

                facilitators: 'facilitators' ,

                url: 'url'

              },

              allowAdding: false

            }}

            cellClick={(args) => args.cancel = true}

          >

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

          </ScheduleComponent>

        </div>

      </div>

    </div>

[Vijay Ravi]

Hi Steven,

Sample: https://stackblitz.com/edit/react-vbh5dz?file=index.js,package.json

Ug: https://ej2.syncfusion.com/react/documentation/schedule/editor-template#add-additional-fields-to-the-default-editor

Based on your requirements, we have prepared a sample to add additional fields for EventType in the default editor, using the popupOpen method. We also use the eventTemplate to customize the appointment and display the EventType, as shown in the highlighted code snippet below. Please refer to the shared sample and let us know if you require further assistance.

[index.js]

function EditorCustomField() {

    React.useEffect(() => {

        updateSampleSection();

    }, []);

    let scheduleObj;

    const data = extend([], dataSource.eventsData, null, true);

 

    const instance = new Internationalization();

    function getTimeString(value) {

        return instance.formatDate(value, { skeleton: 'hm' });

    }

    function eventTemplate(props) {

        return (<div className="template-wrap">

            <div className="subject" >{props.Subject}</div>

            <div className="time"> time: {getTimeString(props.StartTime)} - {getTimeString(props.EndTime)}</div>

            <div className="eventType">{props.EventType}</div>

        </div>);

    }

    function onPopupOpen(args) {

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

            if (!args.element.querySelector('.custom-field-row')) {

                let row = createElement('div', { className: 'custom-field-row' });

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

                formElement.firstChild.insertBefore(row, formElement.firstChild.firstChild);

                let container = createElement('div', { className: 'custom-field-container' });

                let inputEle = createElement('input', {

                    className: 'e-field', attrs: { name: 'EventType' }

                });

                container.appendChild(inputEle);

                row.appendChild(container);

                let dropDownList = new DropDownList({

                    dataSource: [

                        { text: 'Public Event', value: 'public-event' },

                        { text: 'Maintenance', value: 'maintenance' },

                        { text: 'Commercial Event', value: 'commercial-event' },

                        { text: 'Family Event', value: 'family-event' }

                    ],

                    fields: { text: 'text', value: 'value' },

                    value: args.data.EventType,

                    floatLabelType: 'Always', placeholder: 'Event Type'

                });

                dropDownList.appendTo(inputEle);

                inputEle.setAttribute('name', 'EventType');

            }

        }

    }

  

    return (<div className='schedule-control-section'>

        <div className='col-lg-12 control-section'>

            <div className='control-wrapper'>

                <ScheduleComponent width='100%' height='650px' selectedDate={new Date(2021, 1, 15)} ref={t => scheduleObj = t} eventSettings={{ dataSource: data, template: eventTemplate}} popupOpen={onPopupOpen.bind(this)}  >

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

                </ScheduleComponent>

            </div>

        </div>

    </div>);

}

export default EditorCustomField;

 

Output Screenshot:

Regards,

Vijay Ravi