How can we customize task which comes in the popup, when we click on the multiple task indicator.

Question

We want template of task in popup of multiple task indicator, same as main page.

For main page we can privde the template as below.

<ViewDirective option='TimelineDay'

displayName= {getLocalString('Days')}

eventTemplate={eventTemplate}/>

</ViewsDirective>

But for template even i tried "eventRendered" properties . But in this i can apply specific style . I want to apply full template.

eventRendered={this.onEventRendered.bind(this)}

onEventRendered (args: Object) {
  const taskType = getLodash(args.data, 'type');
  if(taskType === TASK) {
    const taskColor = getLodash(args.data, 'statusColor');
    args.element.classList.add(TASK);
    args.element.style.backgroundColor = taskColor;
  }
}
Please let me how task will be cusotmized in the popup. Please find attached screen shot.

Attachment: Custom_Scheduler_Task_Template_c9e2fbc8.zip

Hareesh Balasubramanian · Answer

Hi Sudhanshu, 

Greetings from Syncfusion Support…! 

We have validated your shared query “Please let me how task will be cusotmized in the popup. Please find attached screen shot” at our end. And for that we have prepared a sample using popupOpen event and it can be viewed from the following link. 

Code snippet: 




  onPopupOpen(args) { 
    if (args.type == "EventContainer") { 
      let length = args.data.event.length; 
      for (let i = 0; i < length; i++) { 
        if (args.data.event[i].TaskType == "Task") { 
          (args.element.querySelector(`[data-guid="${(args.data).event[i].Guid}"]`)).style.backgroundColor = "blue"; 
        } 
      } 
    } 
  } 

Sample: https://stackblitz.com/edit/react-ggkd1i?file=index.js 

Kindly try the above sample and revert us if you have any further assistance. 

Regards, 
Hareesh

Sudhanshu Jain · Answer

Hi ,In popup task, color applying is fine . I was asking about applying task template in popup task , same as we apply eventTemplate.How we can do it ????

Vengatesh Maniraj · Answer

Hi Sudhanshu, Sorry for the inconvenience. We have checked the reported problem with applying the eventTemplate for the task and it could be working fine. Could you please look into the below details? timelineEventTemplate(props) { return (

{props.Subject}

); } Task template in main page Task Template in Popup window Sample: https://stackblitz.com/edit/react-ggkd1i-ybvfry?file=index.js Kindly check the above sample and if you still face the problem please reproduce the issue in the above sample to serve you better. Regards, Vengatesh

Sudhanshu Jain · Answer

Hi i am applying the same code but it is not working for me . Can we have a quick call ???

Hareesh Balasubramanian · Answer

Hi Sudhanshu, 
 
Thanks for the update. 
 
We have created a new support incident #283122 under your account, please follow the incident for further assistance. Kindly log on to our support website to check further updates on it.https://www.syncfusion.com/Account/Logon?ReturnUrl=/support/directtrac 
 
Regards, 
Hareesh

matteomessmer · Answer

Hi, nice solution, it works for me! How would you align the arrows on the right when the task is longer than the selected period?Thank you,Matteo Messmer

Vinitha Devi Murugan · Answer

Hi Matteo, 
 
Thanks for your update. 
 
We have validated your reported query “How would you align the arrows on the right when the task is longer than the selected period” at our end and suspect that you want to add right arrow in appointment (Blue highlighted part) within more indicator popup, if the task is longer than the selected date as in appointment rendered on work area (green highlighted part). 
Please confirm whether the above scenario is your requirement or not. If not, please share more details like image or video demo depicting your requirement based on that we will provide prompt solution. 
 
  
 
Regards, 
Vinitha

Vinitha Devi Murugan · Answer

Hi Mohit, 
 
Thanks for your update. 
 
We have validated your reported  
 
We have achieved your requirement “reduce the height of row to around 32px" by making use of below CSS. You can refer the sample from the following link. 
 
https://stackblitz.com/edit/angular-reduce-scheduler-grid-height-and-app-height-u4hffr?file=app.component.ts  
 
.e-schedule .e-timeline-view .e-resource-cells, .e-schedule .e-timeline-month-view .e-resource-cells { 
  height: 32px !important; 
} 
.e-schedule .e-timeline-view .e-resource-group-cells { 
  height: 32px !important; 
} 
.e-schedule .e-timeline-view .e-work-cells, .e-schedule .e-timeline-month-view .e-work-cells { 
  height: 32px !important; 
} 
/*  Reduce Appointment Height */ 
.e-schedule .e-timeline-view .e-appointment, .e-schedule .e-timeline-month-view .e-appointment { 
  height:10px !important; 
} 
 
Output: 
  
 
Note: The minimum height of resource cells and work cells are dynamically assigned based on scheduler height internally. We could not reduce the height of the resource cells and work cells below the minimum-height. So we suggest you to set minimum height to the Scheduler to achieve above requirement. 
 
Kindly try with the above sample and get back to us if you need any further assistance. 
 
Regards, 
Vinitha