React Scheduler - Tutorial Videos

Learn how easily you can create and configure the Syncfusion React Scheduler using the create react app command. You will learn how to add appointments to the React Scheduler either as local JSON data or remote service URLs and how to change the default date and view in React Scheduler.

Download Example: Getting Started with React Scheduler

Get a quick overview of the advanced event-handling options available in the React Scheduler. You will learn how to bind different field names for a Scheduler's data source fields. You will also learn how to block a specific time range using block appointments and how to make a specific event read-only in the React Scheduler.

Learn about the different types of views available in the Syncfusion React Scheduler component. In this video, you will learn how to work with each individual Scheduler view and its unique configurations. Also, you'll learn how to customize the start and end times, and how to extend the interval of each view. You can also set your own customized display labels for each individual view on the Scheduler.

Learn how easily you can drag and resize appointments in React Scheduler. In this video, you will learn how to control the scrolling speed while dragging or resizing an appointment as well as how to prevent the drag-and-drop action in specific target areas. You'll learn how to drag an appointment from a date range in the current view to a date range in the previous or next views and how to set different drag and resize time intervals.

See how easily you can drag events from an external source to the React Scheduler. In this video, you will learn how to add the TreeView component to an existing React application, as well as how to drag an item from the TreeView component into the React Scheduler. You will also learn how to open the editor window before adding the dropped item as an appointment to the Scheduler.

Learn how easily you can customize events using templates in Syncfusion's React Scheduler. In this video, you will learn how to customize appointments generically for all views. You will also learn how to set different appointment customizations for each view and how to customize the events with complex designs.

Learn how easily you can customize the editor window using templates in Syncfusion's React Scheduler. In this video, you will learn how to customize the editor window using a custom template. You will also learn how to change a few language-specific words of the editor window.

Learn about different header row options available in the Syncfusion React Scheduler component. In this video, you will learn how to add different header row options in timeline views. Also, you will see how to customize the header rows with built-in template options and how to load a complete year data in the Scheduler.

Get a quick overview of how to add appointments for multiple resources to the React Scheduler. In this video, you will learn how to define a resource data source as well as how to map that resource with appointments. You will also see various resource options available in the React Scheduler.

Get a quick overview of grouping multiple resources in the React Scheduler. In this video, you will learn to define the group data source and map it with appointments. You will also learn how to select multiple resources in the editor window, how to edit events in groups, and how to group resources under dates.

Learn how to enable virtual scrolling in the Syncfusion React Scheduler component.

Download Example: Enable Virtual Scrolling in React Scheduler

Learn how to adjust the row height of the Syncfusion React Scheduler component. This video demonstrates the functionality of the auto row height feature, as well as how to make appointments occupy an entire cell.

Download Example: Adjust Row Height in the React Scheduler

Learn how to export Syncfusion React Scheduler appointments to an Excel file. This video demonstrates functionalities related to exporting, such as customizing fields, selecting specific events, and choosing the file format.

Download Example: Export React Scheduler Appointments to an Excel Document