I am using fullcalendar.io JS library to visualize the bookings on my rental company. I store the motorbikes as arrays of categories (engine sizes) with a children array containing all the motrobikes belonging to each, as in the example below:
// The resources array contains information about the motorbikes in a rental store.
// The parent array contains the information about the motorbike engine,
// while the children array contains the information about the unique motorbikes belonging to each engine category.
resources = [{
id: "scooter50",
title: "Scooter 50",
children: [{
id: "aa123ab",
title: "AA 123 AB"
},
{
id: "aa456cd",
title: "AA 456 CD"
},
{
id: "aa789ef",
title: "AA 789 EF"
},
{
id: "aa101gh",
title: "AA 101 GH"
}
]
},
{
id: "scooter125",
title: "Scooter 125",
children: [{
id: "bb123ab",
title: "BB 123 AB"
},
{
id: "bb456cd",
title: "BB 456 CD"
},
{
id: "bb789ef",
title: "BB 789 EF"
},
{
id: "bb101gh",
title: "BB 101 GH"
}
]
},
{
id: "scooter250",
title: "Scooter 250",
children: [{
id: "cc123ab",
title: "CC 123 AB"
},
{
id: "cc456cd",
title: "CC 456 CD"
},
{
id: "cc789ef",
title: "CC 789 EF"
},
{
id: "cc101gh",
title: "CC 101 GH"
}
]
}
];
Then, I have some events (bookings) belonging to each resource:
// The events array contains information about the motorbikes that are rented, including the start and end date of the rental.
events = [{
start: new Date(2025, 0, 6, 0, 0),
end: new Date(2025, 0, 9, 23, 59, 59),
resourceId: "bb101gh",
title: "Event 0"
},
{
start: new Date(2025, 0, 11, 0, 0),
end: new Date(2025, 0, 14, 23, 59, 59),
resourceId: "bb101gh",
title: "Event 1"
},
{
start: new Date(2025, 0, 7, 0, 0),
end: new Date(2025, 0, 11, 23, 59, 59),
resourceId: "bb123ab",
title: "Event 2"
},
{
start: new Date(2025, 0, 9, 0, 0),
end: new Date(2025, 0, 14, 23, 59, 59),
resourceId: "bb456cd",
title: "Event 3"
},
{
start: new Date(2025, 0, 7, 0, 0),
end: new Date(2025, 0, 10, 23, 59, 59),
resourceId: "bb789ef",
title: "Event 4"
},
{
start: new Date(2025, 0, 11, 0, 0),
end: new Date(2025, 0, 15, 23, 59, 59),
resourceId: "bb789ef",
title: "Event 5"
},
{
start: new Date(2025, 0, 6, 0, 0),
end: new Date(2025, 0, 15, 23, 59, 59),
resourceId: "cc101gh",
title: "Event 6"
},
{
start: new Date(2025, 0, 8, 0, 0),
end: new Date(2025, 0, 11, 23, 59, 59),
resourceId: "cc123ab",
title: "Event 7"
}
]
The events can be visualized in this screenshot of my fullcalendar.io timeline chart.
Whenever all motorbikes in a category are fully booked for a certain slot, I’d like to have some red background on the resource level (example here.) That can be easily achieved through background events (https://fullcalendar.io/docs/background-events). My problem is that I haven’t found any way to store the date ranges where the bookings overlap across “n” resources (where “n” is the number of motorbikes in a engine size category) in a reliable and efficient manner.
So far, I have managed to find a semi-working solution by taking the minimum and maximum dates across all events, iterating over them using 30 minutes time frames and storing a background event for the engine category when all its resources are booked at a certain timeslot. Here is the code:
// Get the minimum and maximum date in the events array
minDate = events.map(event => event.start).reduce((a, b) => a < b ? a : b);
maxDate = events.map(event => event.end).reduce((a, b) => a > b ? a : b);
// Iterate between the dates using 30 minutes intervals.
unavailableDateRanges = [];
for (let i = minDate; i <= maxDate; i.setMinutes(i.getMinutes() + 30)) {
// Filter the events that are happening at this time and get the resources that are being used.
let usedResources = events.filter(event => event.start <= i && event.end >= i).map(event => event.resourceId);
// If all resources from a certain category are used, store a 30 minutes unavailable range for that category.
let unavailableCategories = resources.filter(resource => resource.children.every(child => usedResources.includes(child.id))).map(resource => resource.id);
for (category of unavailableCategories) {
let start = new Date(i);
let end = new Date(i);
end.setMinutes(end.getMinutes() + 30);
unavailableDateRanges.push({
start: start,
end: end,
resourceId: category,
title: "Unavailable",
display: "background"
});
}
}
This does not reliably achieve the desired result since it only checks 30 minutes intervals while a booking could start at a different minutage. Say that a booking starts at 9:45, this code would not mark the period from 9:45 to 10:00 as unavailable. Since the red background would be visible at differnt levels of detail, that will be an issue.
Since dates represent a continuous variable (UNIX), I guess that it could be achievable to filter the events by the parent engine size category and then check what date ranges have an overlap across “n” number of motorbikes, assuming that bookings for a certain motorbike do not overlap (which I’ve already made sure of). I tried to code this solution with no results.
I know that there are some libraries to work with date ranges, like date-fns, but it does not look like it can help.
Can anyone more experienced please help me?
