Timeline - available slots?

[jonathanmcnamee]

I'm using the timeline module, is it possible to get a clean reference to the area behind the rolling mode red bar? I'm using visjs to show meeting room availability and I'd like to highlight empty cells

[brichbe]

It's not entirely clear what you're asking for, but it appears you're using groups, and for those two groups you've highlighted, they have zero items so it sounds like you want to display something across that horizontal space (up until the red bar) to indicate those rooms are available? If so, no it's not as simple as getting a "reference" to that space to highlight it.

But this can achieved by using items of type background for each of those "empty" groups (see an example). Add one of these items to each empty group when your app starts -- each one should have its start be the beginning of your timeline range and its end should be the current time. You mentioned using rolling mode, so each time the timeline's currentTimeTick event occurs, update the end of these background items to become the new current time.

[jonathanmcnamee]

I gathered that might be the case, but it means I have to purge the dataset once the slider moves outside the bounds of that box. It's just a pity that visjs doesn't expose a dom or even a css class to say 'slider overhead'

[brichbe]

but it means I have to purge the dataset once the slider moves outside the bounds of that box

Not sure what you mean by that since you haven't given much detail for how your app is supposed to work. No, you shouldn't have to remove these background items from the DataSet each time the red bar moves forward, even if it moves outside the visible range. However, yes there could be cases where you would in fact remove one of these items, such as when the group is no longer empty (I believe you'd want to remove it because you want it to behave as a "placeholder" while the group is empty).

Anyhow, please close this issue if you have enough information to proceed.

[jonathanmcnamee]

I've managed to resolve this and to help others, details are provided below.

Data is reloaded every few minutes anyway so purging isn't an issue

I have multiple meeting rooms each with multiple meetings. Meetings are mapped to groups and meetings to items.

I'm trying to highlight available meeting rooms at the present moment (the red dateline)

During mapping of meetings to items I calculated the free space. This I could then add in additionally as a a further background item as suggested above. I also used moment.js to convert the date difference to minutes. Still rough-and-ready but sufficient for now.

One thing I've noticed is that backgrounds don't support tooltips, meaning info gets truncated, but I can work around that

  var momentInfo = moment(roomAvailabilityInfo.end).diff(moment(searchDate), 'minutes');
                var humanised = moment.duration(momentInfo, 'minutes').humanize();
                var item =
                    {
                        id: 'availability_' + room.id.replace(' ', ''),
                        content: 'Available for (' + momentInfo + ' mins)',
                        start: roomAvailabilityInfo.start,
                        end: roomAvailabilityInfo.end,
                        type: 'background',
                        group: room.id,
                        className: 'background-availability'
                    };
                meetings.push(item);