Kendo-angular: Kendo Angular Scheduler with multiple resources

[cverons]

I'm submitting a...

• Bug report
  _Please search for a similar issue before you submit a bug report._
  --> Done with terms "_scheduler_" and "_resources_"

Current behavior

When the events are bound to multiple resources, only the first resource is used.

For instance, the resources field of EventTemplateDirective only returns an array with the first resource met.

Expected behavior

I want to be able to cutomize the event's color depending on criterias stored in multiple resources.

Minimal reproduction of the problem with instructions

1. Find an example on stackblitz.com.
2. The resources object is displayed in a div element
3. Use F12 in your browser to get the full JSON content of the resources object

Environment

Browser:

• Chrome (desktop) Version 72.0.3626.119 (Build officiel) (64 bits)

System:

• TypeScript version: 3.1.1
• Node version: 10.14.2
• npm version: 6.4.1
• Platform: Windows

[danielkaradachki]

Not sure if I understand the issue. The event template seems to contain all resources:
https://stackblitz.com/edit/angular-xlr9kk?file=app/app.component.ts

Please clarify what you mean by all "only the first resource" and which resources do you want to use in the template.

[cverons]

Thank you for your quick answer :)

Please could you use a fork of the project in the description, so that we can talk to the same thing, that would be less confusing.

In the template, I have access to a property named "resources" and this is what it contains :

[
  {
    "color": "#4caf50",
    "text": "Available",
    "value": "1"
  }
]

Despite the fact that the event has also a resource corresponding to the "source" field (and not only to the "status" field) --> this is what I mean by "only the first resource".

Anyway, I want to change the color of each event, based on a custom method (in this case in particular, if the source field has the value private, use the color associated to the "source" resource, else use the "status" resource's color).

[danielkaradachki]

Sorry, missed the link to the example. Indeed, without groups the resources field will contain only the first resource. We will look into it.

[rsseurope]

Any progress on this issue? I have sort of the same problem. I use two resources (employees and appointment types). The appointment type is used to define the color of the appointment and the scheduler is grouped by employees. When I do not use the grouping on employees the color of the appointment type is shown. but when I group the schedule by the employee resource then the appointment type color will not be shown as the only resource available on the event is the groupped resource. this is a big problem for going live with our product.

[danielkaradachki]

Sorry, haven't had the time to work on this yet.

Could you provide a runnable sample that demonstrates the problem in your scenario or the code that you are using? In general, the color of the event should be taken from the first group.

For the original issue, it should be possible to workaround it by finding the resource items from the resource values that are available on the event.

[rsseurope]

https://stackblitz.com/edit/angular-su7yhx
The event color should be used from the Rooms resource. The Employees resource should only be used for grouping the events.

[tsvetomir]

Starting from version 0.12, all resources assigned to the event are available in the template as a resources array:

<ng-template kendoschedulereventtemplate let-event="event" let-resources="resources">
    {{ event.title }}

    <div>
        <ng-container *ngfor="let resource of resources">
            <span *ngif="!resource.length; else multipleresource">
                <span [style.background]="resource.color"
                    style="padding: 4px; margin: 4px;">
                    {{ resource.text }}
                </span>
            </span>
            <ng-template #multipleresource>
                <span *ngfor="let item of resource" [style.background]="item.color"
                    style="padding: 4px; margin: 4px;">
                    {{ item.text }}
                </span>
            </ng-template>
        </ng-container>
    </div>
</ng-template>

See the example in Event Rendering.

[tsvetomir]

@rsseurope we'll also provide an API for dynamic event color - either a field or a callback that receives the event data. Stay tuned!

[rsseurope]

Perfect!

[cverons]

Thank you @tsvetomir !

All resources are available in the template. Indeed a bindable event color property would be very appreciated :)

Good job