Resource Time Ranges not visible

[jason@in-vista.nl]

Hello,

I have enabled the timeRanges feature in my Calendar's configuration, and added several time ranges, linked to resource IDs to my Calendar's ResourceTimeRangeStore store. However, whatever I try, I do not see any time ranges appear in my Calendar.

Am I missing something?

[tasnim]

Could you please share your code for timeranges so we can check what's wrong?
Here is a codepen demo that shows how to add timeranges https://codepen.io/dv-auntik/pen/QwwWEBM?editors=0010

[jason@in-vista.nl]

Hi,

I load my time ranges from a HTTP request. I map these to time range objects and add them to the resourceTimeRangeStore of my Calendar instance.

Snippet:

const availability = {
    "10092": [
        {
            "startDate": "2025-04-17T08:30:00",
            "endDate": "2025-04-17T12:30:00"
        },
        {
            "startDate": "2025-04-17T13:00:00",
            "endDate": "2025-04-17T17:00:00"
        },
        {
            "startDate": "2025-04-17T08:30:00",
            "endDate": "2025-04-17T12:30:00"
        },
        {
            "startDate": "2025-04-17T13:00:00",
            "endDate": "2025-04-17T17:00:00"
        }
    ],
    "10647": [
        {
            "startDate": "2025-04-17T08:30:00",
            "endDate": "2025-04-17T12:30:00"
        },
        {
            "startDate": "2025-04-17T13:00:00",
            "endDate": "2025-04-17T17:00:00"
        }
    ]
}
        

// 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) {
        calendar.resourceTimeRangeStore.add({
            resourceId: resourceId,
            startDate: startDate,
            endDate: endDate
        });
    }
}

Note that I am trying to use resource time ranges, not regular time ranges.

[tasnim]

Calendar does not support the ResourceTimeRange feature, it's a feature for the Scheduler. But it supports the TimeRanges feature
We have a demo showcasing that here https://bryntum.com/products/calendar/examples/timeranges/

[jason@in-vista.nl]

That is unfortunate to hear. Will this be a feature supported in the future?

I am working with a Calendar of employees. Each employee has slots during the day where they have time off. I can't display this without resource-specific time ranges. I can imagine more people are looking for this kind of feature.

[mats]

This is showcased in a few demos, such as this one: https://bryntum.com/products/calendar/examples/date-resource-non-consecutive-dates/

Is it what you need?

Data loaded:

"resourceTimeRanges" : {
    "rows" : [
      {
        "id"         : 1,
        "resourceId" : 2,
        "name"       : "Lunch",
        "cls"        : "lunch",
        "startDate"  : "2025-04-02T12:00:00",
        "endDate"    : "2025-04-02T13:00:00"
      },

[jason@in-vista.nl]

I'm not loading it through the CRUD, like the example does. I load it in runtime accessing the calendar's instance and set it using the following code, as provided:

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

Is that not the way to do it?

[Animal]

What mode do you have visible?

Resource that me ranges are only shown in resource-bound views.

[Animal]

What mode do you have visible?

Resource time ranges are only shown in resource-bound views.

[jason@in-vista.nl]

What mode do you have visible?

I am using a dayview of type resource. Down below you can find my modes configuration in my Calendar instance.

modes: {
    day: null,
    year: null,
    agenda: null,
    dayResources: {
        type: 'resource',
        title: 'Dag',
        resourceWidth: '20em',
        viewGap: 0,
        hideNonWorkingDays: false,
        view: {
            type: 'dayview'
        },
        meta: resource => resource.title
    },
    week: true,
    month: true
}