JavaScript Scheduler Tutorials

What things to look at when you are not happy with the React Scheduler component performance.

How to drag items from events out of the Scheduler and drop it on a custom drop target. The source event data object is attached to the dragged item and can be read on drop.

How to add custom logic to the Scheduler component that skips non-business cells during drag and drop operations (event creating, event resizing, event moving).

ASP.NET Core application for doctor appointment scheduling. The application works with three roles: manager (define available appointment slots), patient (request an appointment using one of the available slots), and doctor (manage existing appointments).

Schedule manufacturing jobs by assigning tasks to individual machines using drag and drop. Includes an ASP.NET Core application for download, data is stored in an SQL Server database.

An overview of Scheduler settings that let you control the vertical event position within rows. Includes custom sorting, forcing a specific line within a row, dedicated lines, keeping related events together using virtual containers.

Vue.js project that includes Scheduler component with basic configuration and all required boilerplate code.

Vue templates supported by the Scheduler component allow you to add dynamic content to events, such as checkboxes, drop-down lists, or attachment upload buttons.

How to use Vue templates to display dynamic reservation prices in each Scheduler time slot. Slot prices are defined using pricing plans independently for each day of the week.

Vue.js application for scheduling resource reservations. Built using a customizable Scheduler UI component - flexible timeline, drag and drop support.

Build a horizontal, resource-based timeline using the open-source Vue Scheduler and customize event appearance with Vue templates and CSS.

How to display global and row-specific holidays in the Vue Scheduler. Optionally, disable the drag and drop operations for the holiday cells.

How to integrate the React Scheduler component into a full screen page layout. The full screen mode will allow rendering optimizations to be applied correctly and avoid a confusing duplicate vertical scrollbar.

How to move the React Scheduler events to the background so they can be used to display additional time slot information.

Use the open-source JavaScript Scheduler to build a horizontal timeline for multiple resources: adjust the appearance, add custom controls, configure the timeline, show a context menu, and switch the visible month.

Explore the built-in UI elements that let your users manage (create, edit, move, delete) resources displayed using the React Scheduler component.

How to customize the Vue Scheduler row header using Vue templates: add icons, badges, buttons and Vue components.

How to render custom React JSX components in the Scheduler time header and upper-left corner.

How to insert React components or direct JSX into Scheduler row headers.

How to calculate resource utilization percentage and display a histogram at the top of the Vue Scheduler component.