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

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


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}>

        <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' },
              } }   }
                group={{ resources: [ 'Owners'] }}
                ref={t => scheduleObj = t}>
            <ViewDirective option='TimelineDay'/>
            <ViewDirective option='TimelineWeek'/>
            <ViewDirective option='TimelineMonth'/>
            <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'>
            <Inject services={[TimelineViews, TimelineMonth]} />

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;
        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'
        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


3 Replies 1 reply marked as answer

KP Karan Patel November 4, 2022 07:22 AM

is there any update for me ?

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

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


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

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

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


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

        let inputEle = createElement('input', {

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



        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'






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




A screenshot of a computer

Description automatically generated

Marked as answer

KP Karan Patel November 12, 2022 05:52 PM

Thank you it's working.

Live Chat Icon For mobile
Up arrow icon