DayPilotA JavaScript resource calendar displays appointments for people, rooms, equipment or other resources side by side. Each resource has its own column, with time running vertically. Users can compare availability and move appointments between resources in the same view.
The layout is part of the JavaScript Calendar. Flat resource columns are available in Lite and Pro; Pro adds grouped headers, fixed-width scrolling and progressive event rendering. The Lite and Pro feature comparison covers the edition differences.
Resources as Columns
The Calendar normally displays dates as columns. Resources view replaces those columns with people, rooms or other bookable entities. Each appointment has a resource assignment as well as start and end times, so users can see who or what is occupied at a particular time.
Resource columns suit daily appointment booking, technician allocation and room scheduling. The time axis can also use day- or week-sized cells in Pro for longer planning windows. Try the interactive resource calendar demo for the resource-column layout.
Grouped Resource Headers
Hierarchical column headers organize resources into departments, locations or categories. The example separates meeting rooms from workspaces, keeping individual booking columns beneath their group names.
The same hierarchy can combine resources and dates: show resources under each day or several days under each resource. Multiple header levels keep those relationships visible, and column names, widths and content can reflect the information users need to identify the resource.
In Pro, users can reorder resource columns or move them between groups by dragging their headers. Column resizing lets them adjust the space given to individual resources. Both interactions support grouped headers as well as a flat resource list.
Many Resources and Horizontal Scrolling
By default, columns share the available width. With a large resource list, fixed column widths preserve readable names and appointment details. The Calendar adds horizontal scrolling when the columns no longer fit.
Progressive event rendering prepares loaded appointments near the viewport as users scroll through fixed-width columns. Rendering and data loading remain separate: the application supplies the resources and events, while the Calendar controls when their event elements appear.
Resource Calendar UI Builder
The Resource Calendar UI Builder lets you configure columns, grouped headers, time slots and interactions against a live preview. Download a ready-to-run starter project for JavaScript, TypeScript, Angular, React, Next.js or Vue.
Application and Framework Integration
The resource layout uses the same Calendar component and event model as day and week views. Resource IDs connect appointments to columns, while per-column dates support layouts that combine dates and resources. The resource-view documentation includes JavaScript and framework configuration examples.
Creation, editing and drag-and-drop callbacks connect the UI to your application data. The JavaScript resource calendar tutorial with PHP and MySQL demonstrates an application with stored appointments.