Resource Calendar Tutorials

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