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
WEBINAR  Visualize Customer Survey Reports Using Our React 3D Circular Charts Control —Thursday, May 02, 10:00 A.M. ET REGISTER NOW
close icon
  1. Home
  2. Forum
  3. React - EJ 2
  4. I want remove location field from Popup which added by feault in syncfusion schedular

I want remove location field from Popup which added by feault in syncfusion schedular

Hello, 

I am working on syncfusion scheduler react components and in that I added my location field with drop down location as we required drop down for that on other side where by default components also have default it's  location filed with textbox and I want to remove that from edit popup. I tried to find solution on all sample code and forum but didn't get luck to find out it out that. 

I am using React Typescript with Hooks. Can you please provide any sample that how I can achieve that ?


Sample code for components 


 <Grid container spacing={6}>
      <Grid item xs={12}>
       
        <Card>
         

        <ScheduleComponent  width='100%' height='550px' currentView='TimelineWeek' selectedDate={new Date(2022, 9, 25)} eventSettings={{ dataSource: arrAppointmentData, fields: {  id: 'id',
                subject: { name: 'subject' },
                isAllDay: { name: 'isAllDay' },
                startTime: { name: 'startTime' },
                endTime: { name: 'endTime' },
                description: { name: 'description' },
                location: { name: 'location' },
              } }   }
             
              actionBegin={onActionBegin}
               popupOpen={onPopupOpen.bind(this)}
                group={{ resources: [ 'Owners'] }}
                ref={t => scheduleObj = t}>
        <ViewsDirective>
            <ViewDirective option='TimelineDay'/>
            <ViewDirective option='TimelineWeek'/>
            <ViewDirective option='TimelineMonth'/>
        </ViewsDirective>
            <ResourcesDirective>
            <ResourceDirective field='chsResourceId' title='Owner' name='Owners' allowMultiple={true} dataSource={resourcesData.list.filter(x=>x.isActive==true && x.isAppUser == true)} textField='resourceName' idField='id' groupIDField='GroupId' colorField='#7499e1'>
                </ResourceDirective>
            </ResourcesDirective>
            <Inject services={[TimelineViews, TimelineMonth]} />
        </ScheduleComponent>
            </Card>
            </Grid>
            </Grid>


Sample code for customization of location with drop down 

 function onPopupOpen(args: PopupOpenEventArgs): void {
    if (args.type === 'Editor') {
      // Create required custom elements in initial time
      if (!args.element.querySelector('.custom-field-row')) {
        let row: HTMLElement = createElement('div', { className: 'custom-field-row' });
        let formElement: HTMLElement = args.element.querySelector('.e-schedule-form');
        formElement.firstChild.insertBefore(row, formElement.firstChild.firstChild);
        let container: HTMLElement = createElement('div', { className: 'custom-field-container' });
        let inputEle: HTMLInputElement = createElement('input', {
          className: 'e-field', attrs: { name: 'Location' }
        }) as HTMLInputElement;
        container.appendChild(inputEle);
        row.appendChild(container);
        let dropDownList: DropDownList = new DropDownList({
          dataSource: resourcesData.list.filter(x=>x.isActive==true && x.isAppUser == false),
          fields: { text: 'resourceName', value: 'resourceName' },
          value: args.data.Location as string,
          floatLabelType: 'Always', placeholder: 'Location'
        });
        dropDownList.appendTo(inputEle);
        inputEle.setAttribute('name', 'Location');
      }
    }
  }

Sample Interface Class code

    interface AppointmentData
    {
        id: number,
        subject: string,
        startTime: Date,
        endTime: Date,
        description: string,
        location: string,
        chsResourceId: number,
        OwnerId: number,
        IsAllDay: boolean,
        startTimezone : string ,
        endTimezone : string,
        Location : string


    }Capture.PNG

3 Replies 1 reply marked as answer
KP Karan Patel November 4, 2022 12:22 PM UTC

is there any update for me ?


RM Ruksar Moosa Sait Syncfusion Team November 7, 2022 09:43 AM UTC

You can hide the default location field using the shared CSS class and insert a new location field like the below code.


Sample: https://stackblitz.com/edit/react-wdhhpl?file=index.js,index.css


[index.js]

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.children[1]);

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

        let inputEle = createElement('input', {

          className: 'e-field', attrs: { name: 'Location' }        });

        container.appendChild(inputEle);

        row.appendChild(container);

        let dropDownList = new DropDownList({

          dataSource: [

            { text: 'Room 1', value: 'Room 1' },

            { text: 'Room 2', value: 'Room 2' },

          ],

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

          value: args.data.Location,

          floatLabelType: 'Always',
          placeholder: 'Location'

        });

        dropDownList.appendTo(inputEle);

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

      }


[index.css]

.e-schedule-dialog .e-location-container{

  display: none;

}


Output:

A screenshot of a computer Description automatically generated



Marked as answer
KP Karan Patel November 12, 2022 10:52 PM UTC

Thank you it's working.


Loader.
Live Chat Icon For mobile
Up arrow icon