Resources group highlight

Hello
I wonder if there's a highlight for resources group header showing all the event of the group like this example:



Also when a click event fired, should tell me that I clicked on the header of group, and contain it's data of course 

Thank you :) 

1 Reply 1 reply marked as answer

HB Hareesh Balasubramanian Syncfusion Team May 6, 2021 03:38 PM UTC

Hi Omar, 

Greetings from Syncfusion Support..! 

We have prepared a sample based on your shared image using actionComplete, dataBound, and eventRendered events of the Scheduler, which can be viewed from the following link. 


  public onDataBound(): void { 
    if (this.flag) { 
      let length = document.querySelectorAll('.e-resource-group-cells').length; 
      for (let i = 0; i < length; i++) { 
        document.querySelectorAll('.e-resource-group-cells')[i].innerHTML = ''; 
      } 
      this.flag = false; 
    } 
  } 
  public onActionComplete(args: any): void { 
    if ( 
      args.requestType == 'eventCreated' || 
      args.requestType == 'eventChanged' || 
      args.requestType == 'eventRemoved' 
    ) { 
      this.scheduleObj.refreshEvents(); 
      if (args.requestType == 'eventRemoved') { 
        this.flag = 
          this.scheduleObj.getCurrentViewEvents().length == 1 ? true : false; 
      } 
    } 
  } 
  public onEventRendered(args: any): void { 
    if (document.querySelectorAll('.e-appointment').length === 0) { 
      let count: any = 0; 
      let length = document.querySelectorAll('.e-resource-group-cells').length; 
      for (let i = 0; i < length; i++) { 
        document.querySelectorAll('.e-resource-group-cells')[i].innerHTML = ''; 
      } 
      let appLen = this.scheduleObj.getCurrentViewEvents().length; 
      for (let j = 0; j < appLen; j++) { 
        let hr = 
          this.scheduleObj.getCurrentViewEvents()[j].EndTime.getHours() - 
          this.scheduleObj.getCurrentViewEvents()[j].StartTime.getHours(); 
        hr = hr * this.scheduleObj.timeScale.interval; 
        let min = 
          this.scheduleObj.getCurrentViewEvents()[j].EndTime.getMinutes() - 
          this.scheduleObj.getCurrentViewEvents()[j].StartTime.getMinutes(); 
        let ln = 
          (hr + min) / 
          (this.scheduleObj.timeScale.interval / 
            this.scheduleObj.timeScale.slotCount); 
        for (let z = 0; z < ln; z++) { 
          let date = 
            this.scheduleObj.getCurrentViewEvents()[j].StartTime.getTime() + 
            z * 
              ((60 * 1000 * this.scheduleObj.timeScale.interval) / 
                this.scheduleObj.timeScale.slotCount); 
          console.log( 
            document.querySelectorAll( 
              'td[data-date="' + date.toString() + '"].e-resource-group-cells' 
            )[this.scheduleObj.getCurrentViewEvents()[j].ProjectId - 1] 
              .innerHTML 
          ); 
          if ( 
            document.querySelectorAll( 
              'td[data-date="' + date.toString() + '"].e-resource-group-cells' 
            )[this.scheduleObj.getCurrentViewEvents()[j].ProjectId - 1] 
              .innerHTML === '' 
          ) { 
            count = 1; 
          } else { 
            count = 
              parseInt( 
                document.querySelectorAll( 
                  'td[data-date="' + 
                    date.toString() + 
                    '"].e-resource-group-cells' 
                )[this.scheduleObj.getCurrentViewEvents()[j].ProjectId - 1] 
                  .innerHTML 
              ) + 1; 
          } 
          document.querySelectorAll( 
            'td[data-date="' + date.toString() + '"].e-resource-group-cells' 
          )[ 
            this.scheduleObj.getCurrentViewEvents()[j].ProjectId - 1 
          ].innerHTML = count; 
        } 
      } 
    } 
  } 

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

We will be happy to assist you..! 

Regards, 
Hareesh 


Marked as answer
Loader.
Up arrow icon