Resources group highlight

[omar errabaany]

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 :) 

[Hareesh Balasubramanian]

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. 

Sample: https://stacrkblitz.com/edit/angular-customzied-event-hour-count-sample?file=app.component.ts 

  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