¿How can I edit group resources in schedule?

[Sergio]

Hi all!

I´m trying to add some more details to my group resources column on my schedule, but I´m not finding info about it. It´s possible? There is some kind of ng-template I can use and I didn´t find yet?

That´s what I have now:

And that´s what I´m trying to get:

As you see, I now have two texts and the second one, if it's not going to fit, cuts out the dots. Also, the second text is a link that redirects to another part of my application.

[Ravikumar Venkatesan]

  

Hi Sergio, 

Greetings from Syncfusion support. 

Q1: How to add more details on the resource header column of the Schedule 

You can add more details to the resource header column of the Schedule by using the resourceHeaderTemplate of the Schedule like below. 

Step 1: Add the resourceHeaderTempalte as ng template in the app.component.html file like below code. 

[app.component.html] 

<div class="control-section"> 

  <ejs-schedule cssClass='schedule-group-editing' width='100%' height='650px' [group]="group" 

    [selectedDate]="selectedDate" [eventSettings]="eventSettings"> 

    <ng-template #resourceHeaderTemplate let-data> 

      <div class='template-wrap'> 

        <div class="resource-details"> 

          <div class="resource-name">{{getEmployeeName(data)}}</div> 

          <a class="resource-designation" 

            rel='nofollow' href="https://ej2.syncfusion.com/angular/demos/#/material/schedule/{{getUrl(data)}}">{{getUrlNames(data)}}</a> 

        </div> 

      </div> 

    </ng-template> 

    <e-views> 

      <e-view option="TimelineMonth"></e-view> 

    </e-views> 

    <e-resources> 

      <e-resource field='ConferenceId' title='Attendees' name='Conferences' [allowMultiple]='allowMultiple' 

        [dataSource]='resourceDataSource' textField='Text' idField='Id' colorField='Color'> 

      </e-resource> 

    </e-resources> 

  </ejs-schedule> 

</div> 

Step 2: Add the method that associated with the resourceHeaderTemplate to the app.component.ts file like below code. 

[app.component.ts] 

  getEmployeeName(value: ResourceDetails | TreeViewArgs): string { 

    return ((value as ResourceDetails).resourceData) ? 

      (value as ResourceDetails).resourceData[(value as ResourceDetails).resource.textField] as string 

      : (value as TreeViewArgs).resourceName; 

  } 

  getUrlNames(value: ResourceDetails | TreeViewArgs): string { 

    let resourceName: string = this.getEmployeeName(value); 

    return (resourceName === 'Margaret') ? 'Group editing demo' : (resourceName === 'Robert') ? 

      'Group with custom work days demo' : 'Resource grouping demo'; 

  } 

 

  getUrl(value) { 

    let resourceName: string = this.getEmployeeName(value); 

    return (resourceName === 'Margaret') ? 'group-editing' : (resourceName === 'Robert') ? 

      'group-custom-work-days' : 'resource-grouping'; 

  } 

UG link: https://ej2.syncfusion.com/angular/documentation/schedule/resources/#simple-resource-header-customization 

Demo link: https://ej2.syncfusion.com/angular/demos/#/material/schedule/group-editing 

API link: https://ej2.syncfusion.com/angular/documentation/api/schedule/#resourceheadertemplate 

Q2: Text Alignment 

You can enable the text over flow to the next line by using the CSS property called white-space like below. 

.resource-url { 

  white-space: initial; 

} 

Sample: https://stackblitz.com/edit/angular-schedule-resource-header-template?file=app.component.html 

Kindly try the above sample and get back to us If you would require further assistance. 

Regards, 

Ravikumar Venkatesan 

 

[Sergio]

That's working for me, thanks a lot!

[Vengatesh Maniraj]

Hi Sergio, 

You are most welcome. 

We are happy that our solution has fulfilled your requirement. 

Regards, 

Vengatesh