The resource calendar web component displays multiple resources side-by-side (as columns). You can use it in web applications that implement many scheduling workflow scenarios, such as planning shifts (to display employees or locations as columns), reservations of appointments (for car mechanics, hairdressers, doctors), booking shared resources (conference rooms, cars, machines or other tools).
There is an open-source version of the resource calendar that is free to use. The packages for vanilla JavaScript and major frameworks (Angular, React, and Vue) are available at npmjs.com. The open-source version supports many helpful features:
drag and drop moving and resizing of events
styling using CSS themes
customization of individual events (text, HTML, colors, CSS classes, drag and drop support)
loading resource and event data directly from a remote URL in JSON format
easy internationalization (translate date names and specify custom date formatting patterns)
modal dialog for editing event details
The Pro version of the resource calendar (DayPilot Pro for JavaScript) includes advanced features (see the feature matrix), such as:
support for large datasets
progressive rendering of events and grid cells during scrolling
a hierarchy of columns that lets you organize the the resources in groups or display multiple days for each resource
columns that can be resized and rearranged using drag and drop
the resources can be filtered using specified criteria (text, location, etc.)
you can export the calendar view to JPEG, PNG, PDF or print it
add icons and context menus to resources and events
support for touch devices
all-day events that can serve as a queue of events that are not scheduled for an exact time yet