Append a custom class to cell header/ resource group cell and work-cell if it contains blocked appointment

[vasamsetti saikiran]

Hi Team,

I have a requirement to modify the styling of complete column, including TimelinHeader Cells, Group resource Cells and worker-cells if there is a blocked appointment in the worker-cells. 

[Ashokkumar Karuppasamy]

Hi Vasamsetti saikiran,

You can achieve your requirement by overriding the Schedule style using a class selector and renderCells event. The attached code snippet and sample demonstration solution are below. Please try the solution and let us know if you need any further assistance.

[Styles]

    .timeline-resource-grouping.e-schedule .e-timeline-view .e-date-header-wrap table tbody td.e-time-slots, .e-schedule .e-timeline-month-view .e-date-header-wrap table tbody td.e-time-slots {

      background: pink;

    }

    .timeline-resource-grouping.e-schedule .e-block-appointment {

      background-color: red;

    }

 

[App.component.ts]

  public OnRenderCellEvent(args: any): void {

    if (args.elementType === 'dateHeader') {

      args.element.style.backgroundColor = 'yellow';

    } else if(args.elementType === 'workCells') {

      args.element.style.backgroundColor = 'blue';

    } else if (args.elementType === 'resourceGroupCells'){

      args.element.style.backgroundColor = 'green';

    } else {

    }

  }

}

 

[app.component.html]

  <div class="col-lg-12 content-wrapper">

    <ejs-schedule

      #scheduleObj

      width="100%"

      cssClass="timeline-resource-grouping"

      height="650px"

      [selectedDate]="selectedDate"

      [group]="group"

      [workDays]="workDays"

      [eventSettings]="eventSettings"

      (renderCell)="OnRenderCellEvent($event)"

    >

 

Regards,
Ashok