Resource Time Ranges not visible

[Animal]

calendar.resourceTimeRangeStore.add({
       resourceId: resourceId,
       startDate: startDate,
       endDate: endDate
});

That should have an id

“Id” is the name of the id field by which links are made.

[Animal]

This is a bit mysterious actually. We need to somehow reproduce this can you share your whole configuration and data?

[Animal]

The time ranges render a header to the side of the event flow, but to do that, they need a name.

Screenshot 2025-04-17 at 07.46.13.png (291.61 KiB) Viewed 172 times

If you do not want to see some rotated text like in the online example, you can use space.

See the example here which uses your setup: https://codepen.io/Animal-Nige/pen/NPPWLoL?editors=0010

[jason@in-vista.nl]

I have tried several things, but still without a working result, even with using the provided example:

• Add a "name" property to the time ranges.
• Add a unique "id" property as index to the time ranges.
• Converted all resource IDs and associated "resourceId" properties of events and time ranges from numbers to strings.
• Double-checked the resource's IDs and the associated time range IDs. They are linked correctly to the expected time range.
• Loading the resources, events, and time ranges all in different orders.

None of these resolved the issue and I still do not see any time ranges in my view. The example does show it for me, though.

[Animal]

Then we need to go deeper.

Is the store loaded?

Screenshot 2025-04-29 at 10.53.03.png (368.89 KiB) Viewed 152 times

[jason@in-vista.nl]

Hi Animal,

It is showing me an empty array. Down below you can find my code on how I add entries to the time range store. Am I doing something wrong?

// Only if the active view is that of a resource, process the availability time ranges.
    if(isResourceView) {
        // Retrieve the availability response.
        const availability = requestTasksResponses[1].value;
        

    // Process the availability as time ranges in the calendar view.
    for (const [resourceIdString, availabilityEntries] of Object.entries(availability)) {
        const resourceId = Number(resourceIdString);
        for (const { startDate, endDate } of availabilityEntries) {
            // Validate start and end date
            if (startDate > endDate)
                continue;

            // Add a new record to the time range store.
            calendar.resourceTimeRangeStore.add({
                resourceId: resourceId,
                startDate: startDate,
                endDate: endDate
            });
        }
    }

[jason@in-vista.nl]

In a console.log of my entire calendar.resourceTimeRangeStore, I noticed that the allRecords property does contain the availability entries. The data property is completely empty.

[Animal]

            calendar.resourceTimeRangeStore.add({
                resourceId: resourceId,
                startDate: startDate,
                endDate: endDate
            });

What about the name?

As stated above (viewtopic.php?p=166832#p166832), The time ranges render a header to the side of the event flow, but to do that, they need a name.

[jason@in-vista.nl]

Even with a "name" property, the resource time ranges are not visible.

[alex.l]

Hi,

Please attach a runnable test case, it will get us a chance to help you out and not guessing! No idea why it didn't work, it does in our examples.