QuickInfoTemplate is throwing error when trying to customizing the format

[Gayathri]

Hi,

I want to customize the quickInfo content on single click in react schedule

<ScheduleComponent id="schedule-container" height="650px" popupOpen={this.popupopen.bind(this)} popupClose={this.popupclose.bind(this)} ref={t => this.scheduleObj = t} currentView="Month" editorTemplate={this.editorTemplate.bind(this)}  renderCell={this.renderCell.bind(this)}

eventSettings={{

dataSource: this.state.beProjectList,

fields: {

id: 'Id',

subject: { name: 'Subject' },

startTime: { name: 'StartTime' },

endTime: { name: 'EndTime' },

}

}} quickInfoTemplates={{

content: this.contentTemplate.bind(this)

}}>

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

<ViewsDirective>

<ViewDirective option='Month' interval={1} />

</ViewsDirective>

</ScheduleComponent>

contentTemplate = (props: any) => {

return (<div>

Add Project

</div>

);

}

Error thrown is "Type '(props: any) => JSX.Element' is not assignable to type 'string'.ts(2322)"

[Ravikumar Venkatesan]

Hi Gayathri, 

Greetings from Syncfusion support. 

We have validated your reported query at our end. We have prepared a sample with the quickInfoTemplate as shown in the below code and it can be available below. 

[App.tsx] 

  const quickInfoTemplatesContent: string | any = (args: { [key: string]: Object })  => { 

    console.log(args) 

    return (<div> 

      {args.elementType === 'cell' ? 

        <div className="e-cell-content e-template"> 

          <form className="e-schedule-form"> 

            <div> 

              <input className="subject e-field e-input" type="text" name="Subject" placeholder="Title" /> 

            </div> 

            <div> 

              <input className="location e-field e-input" type="text" name="Location" placeholder="Location" /> 

            </div> 

          </form> 

        </div> : 

        <div className="e-event-content e-template"> 

          <div className="e-subject-wrap"> 

            {(args.Subject !== undefined) ? 

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

            {(args.Location !== undefined) ? 

              <div className="location">{args.Location}</div> : ""} 

            {(args.Description !== undefined) ? 

              <div className="description">{args.Description}</div> : ""} 

          </div> 

        </div>} 

    </div>); 

  } 

Sample: https://www.syncfusion.com/downloads/support/forum/159369/ze/ej2-react-schedule-with-quickInfoTemplate-functional-component1829811237 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan