You can start with the following tutorial which displays a resources calendar similar to yours (time on the vertical axis, resources/providers on the horizontal axis):
If you only want to display selected columns, you can modify the backend_resources.php
script (the API endpoint that returns the resources) to accept a list of resources in the query string and just return the data for them. You can do something similar for the event data.
To select the resources, you can use a set of checkboxes or any other UI element that support selecting multiple values.
You can also filter the values on the client side:
1. Let’s say you have a list of all resources:
const columns = [
{ name: "Kamran Kamali", id: 1 },
// ...
];
2. When you change the selection, you need to filter the data as needed:
const visibleColumns = columns.map(c => {
return shouldBeIncluded(c));
});
3. Now you can display the filtered column list:
calendar.update({columns: visibleColumns);