How to use the open-source React resource calendar component to create a scheduling application for multiple groups of resources (locations, people, tools). Add a date picker and next/previous buttons that let users change the visible date.
How to create a monthly calendar/scheduler view for planning events, tasks, and reminders in Vue. The downloadable Vue project uses the open-source DayPilot Lite library.
Learn how to modify the reservation edges to split the start and end cell diagonally. This provides a visual hint that the check-in and check-out days are only partially occupied.
React application that displays a monthly event calendar. Calendar events use custom background to show event type. A context menu allows deleting events and changing color.
How to create a weekly calendar web application using a Vue calendar component. The tutorial includes a Vue.js project with JavaScript source code for download.
This Next.js app uses a resource-scheduling calendar UI to let you manage tasks for multiple resources side by side. Each column displays a 24-hour timeline for a different resource.
Angular application that shows how to create a resource calendar Angular component that displays event data in multiple columns. The resource calendar supports drag and drop out of the box.
React application that displays a weekly event calendar using the open-source DayPilot React calendar component. Includes a date picker for changing the visible week. The calendar/scheduler appearance is customized using CSS.
How to add a zoom feature to the React Scheduler timeline. You can change the zoom level (and timeline resolution) using a "range" control and "zoom in" and "zoom out" buttons.
DayPilot
