1. Home
  2. Forum
  3. React - EJ 2
  4. Customize scheduler popup using functional components

Customize scheduler popup using functional components

Hello,


We would like to know how to customize the scheduler popup- we are using a react functional component with typescript. All of your samples are in class components- and none of them seem to adapt to functional components- and still work---and we are using react HOOKS---do you have a sample or can help us get this working?


Thanks


7 Replies
VM Vengatesh Maniraj Syncfusion Team May 1, 2020 04:06 AM UTC

Hi Umair, 

Greetings from Syncfusion Support. 

We have validated your requirement that “Template in functional component” and we have prepared the sample based on your requirement that can be download from the below link. 


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

Regards, 
Vengatesh 


UA Umair Ahmed May 1, 2020 11:18 PM UTC

Thanks, this works for the quickInfoTempaltes, do we have something similar for the editorTempaltes using functional components ?

VM Vengatesh Maniraj Syncfusion Team May 4, 2020 05:11 AM UTC

Hi Umair, 

Thanks for the update. 

Based on your requirement, we have prepared the sample which can be downloaded from the below link. 


Please check  the above sample and get back to us for further assistance. 

Regards, 
Vengatesh 


UA Umair Ahmed May 5, 2020 11:44 PM UTC

Thanks that worked, can you also please provide sample for changing event background color as well as tooltip template using functional component.

RV Ravikumar Venkatesan Syncfusion Team May 6, 2020 02:06 PM UTC

Hi Umair, 

Thanks for the update. 

We have validated your reported query “provide sample for changing event background color as well as tooltip template using functional component” at our end. We have achieved your requirement with the help of below code. 

function App() { 
  let data: Object[] = extend([], (scheduleData as any), true) as Object[]; 
 
  const template: string | any = (args: { [key: string]: Object }) => { 
    return (<div className="tooltip-wrap"> 
      <div className={"image " + args.EventType}></div> 
      <div className="content-area"><div className="event-name">{args.Subject}</div> 
        {(args.City !== null && args.City !== undefined) ? <div className="city">{args.City}</div> : ''} 
        <div className="time">From&nbsp;:&nbsp;{args.StartTime.toLocaleString()}</div> 
        <div className="time">To&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp; 
    {args.EndTime.toLocaleString()}</div> 
      </div></div>); 
  } 
 
  const renderEvent = (args: EventRenderedArgs) => { 
    var scheduleObj = (document.querySelector('.e-schedule') as any).ej2_instances[0]; 
    let color = args.data.CategoryColor; 
    let categoryColor: string = (isNullOrUndefined(color) ? '#e3165b' : color).toString(); 
    if (!args.element || !categoryColor) { 
      return; 
    } 
    if (scheduleObj.currentView === 'Agenda') { 
      let firstChild: HTMLElement = (isNullOrUndefined(args) ? args.element.firstChild : args.element) as HTMLElement; 
      firstChild.style.backgroundColor = categoryColor; 
    } 
    else { 
      args.element.style.backgroundColor = categoryColor; 
    } 
  } 
 
  return ( 
    <ScheduleComponent id="schedule" selectedDate={new Date(2018, 3, 1)} eventSettings={{ dataSource: data, enableTooltip: true, tooltipTemplate: template }} eventRendered={renderEvent}> 
      <ViewsDirective> 
        <ViewDirective option='Day' /> 
        <ViewDirective option='Week' /> 
        <ViewDirective option='WorkWeek' /> 
        <ViewDirective option='Month' /> 
      </ViewsDirective> 
      <Inject services={[Day, Week, WorkWeek, Month, DragAndDrop, Resize]} /> 
    </ScheduleComponent> 
  ); 
} 


Kindly try the above sample and get back to us If you would require further assistance. 

Regards, 
Ravikumar Venkatesan 


UA Umair Ahmed May 16, 2020 12:08 AM UTC

Thanks that worked, is there a way to attach a specific field corresponding to each cell (or  may be for each day) and on "eventCreate" we can read it 

 if (args.requestType === 'eventCreate')

//Read that field

we should be able to read that field.

RV Ravikumar Venkatesan Syncfusion Team May 18, 2020 09:07 AM UTC

Hi Umair, 

Thanks for the update. 

We have tried to understand your reported query ‘is there a way to attach a specific field corresponding to each cell (or maybe for each day) and on "eventCreate" we can read it’ at our end. But, we are unable to understand it. So, kindly share more details like the below to serve you better. 

  • Video demo/ images of your requirement

Regards, 
Ravikumar Venkatesan 


Loader.
Up arrow icon