Our powerful JS Calendar component


Post by vconstruct »

Hi Team,

We have given colors to the event and when we uncheck the resource the event store gets filtered. Since the assignment store has the link between the resource and the event this creates issue when we have multiple resources assigned to an event and one of them is removed, the event still shows the color of the resource removed . The resource store has a field for color which gets associated to the events.

This is how we are setting out EventStore

({
                                "id": element.activityguid,
                                "name" : projectDetails.NUMBER + ' | ' + element.name,
                                "objectId":element.originalprojid,
                                "projectId": projectDetails.NUMBER,
                                "projectName": projectDetails.NAME,
                                "startDate" : element.startdate,
                                "endDate" : element.enddate,
                                "isCritical": element.iscritical,
                                "activityId": element.activityid,
    })

This is how we are setting our ResourceStore

 ({
 						"id": link.hra_id,
                                        "name": link.hra_id +" - " +link.hra_description,
                                        "eventColor": link.hra_color
 })

This is how we are setting our AssignmentStore

({
   				    	"id": i,
                                    "eventId": element.activityguid,
                                    "resourceId" : link.hra_id
})
hracolor.mp4
(1.43 MiB) Downloaded 23 times

Post by Animal »

The colour comes from resources[0]. It has to make some decision so the first one is used.

I suppose it could do a scan to find the first one which is not filtered out? I will consult the team. This would mean a scan of the resources for every event render.


Post by Animal »

If you put this into your app, make sure the calendar is in scope, and that EventModel is imported.

// Property getter for resource which gets the first resource in the list which is still selected in the ResourceFilter
Object.defineProperty(EventModel.prototype, 'resource', {
    get() {
        const { resources } = this;
        return resources.length ? resources.find(r => calendar.widgetMap.resourceFilter.selected.includes(r)) : null
    }
});

So instead of using the default getter which always returns resources[0], the event rendering will pick up the first still selected resource and use the eventColor from that.


Post by Animal »

There's still an issue for ResourceView getting the correct colour - the colour of the view's resource, not resources[0], so I will fix that.

I'll also include an example of the filtering above:

https://github.com/bryntum/support/issues/6772


Post by Animal »

So I added a config to resourceFilter:

        sidebar : {
            resourceFilter : {
                // When rendering wants a resource to get a colour from, ensure
                // we use the first resource that is still filtered in
                filterEventResources : true
            }
        },

You can see it working in this example. When I uncheck Dave, the first event flips to be Dan's colour:

eventcolour.mov
(1.76 MiB) Downloaded 27 times

Post by vconstruct »

Animal wrote: Fri May 12, 2023 4:18 pm

There's still an issue for ResourceView getting the correct colour - the colour of the view's resource, not resources[0], so I will fix that.

I'll also include an example of the filtering above:

https://github.com/bryntum/support/issues/6772

When can we expect the release?


Post by Animal »

Normally every two weeks.


Post Reply