How to ? Visualizing multiple resources, Tasks and status icons

working on prototype(POC) for secheduler application.
Visualization of a Trip showing multiple resources, status and type such as eg. Single Engine, Double Engine, Engine Type, Chair Car, Sleeper Car, Guard Car, Luggage Car, Traveling Ticket Examiner(TTE) Shifts. etc.

Example of Visualization of schedule.

Thank You

1 Like

Hello @Technofreaks,

As I understand from the screenshot, the requirement is to customize event bar, in order to display some additional event properties, am I right?

If so, it’s possible with changing the event_text(day/week/unit) event_bar_text(timeline/multiday events) templates:

You can add additional HTML markup inside these templates, images, and any required data, and connect it with event properties, something like follows:

scheduler.templates.event_bar_text = function(start,end,event){
      return `
      <div class="res"> ${event.resource_1}</div> 
      <div class="icon"> ${event.icon}</div>
      <div class="res"> ${event.resource_2}</div>

Here is a simplified demo:

Kind regards,


These are individual gantt for task and resources placed inside project gantt, its like box inside box.