Angular Scheduler - Tutorial Videos

Learn about the important features of Syncfusion Angular Scheduler component that looks and works like the Outlook or Google calendar and helps to plot and manage your daily activities. It works with any Angular version starting from 4.

Learn how easily you can create and configure the Angular Scheduler of Syncfusion using the "ng add" command of Angular Schematics. In this video, I'll create an application with the help of Angular CLI and Angular Schematics to make the initial configuration process of Angular Scheduler much simpler.

Get a quick look at how to add appointments to the Angular Scheduler either as local JSON data or remote service URLs. Also, get a quick overview of the advanced event-handling options.

Learn how to use the drag and resize actions for appointments using the Angular Scheduler's advanced options. This video will also show you how to drag an external item from TreeView component into the Angular Scheduler.

Would you like to learn how to customize each individual view of Angular Scheduler with different settings? Then this is the right video for you. You will additionally learn how to extend the day, week, or month intervals in their respective views to display more days in the Angular Scheduler.

Learn how easily you can customize the look and feel of Angular Scheduler events using its built-in ng-template option. There is a built-in template option available in Angular Scheduler to allow appointment customization. You can access all the built-in and additional event fields bound to the Scheduler data source within this template design, which makes the customization process simple.

Looking to customize the editor window of Angular Scheduler with your own design? Then watch this quick video to learn how to customize your appointment window using the ng-template option. There is a built-in template option available in Angular Scheduler to customize the default editor window. Simply build and design your own fields and learn how to place them in the editor window using the "editorTemplate" option from this video.

See how to add and customize additional header rows in the timeline views of Angular Scheduler. There are scenarios in which you may want to display a large number of days, months, or years in your calendar views of an Angular scheduler. At such times, it would be better to display the Angular Scheduler control with additional labels showing the proper year, month, and week numbers for clarity.

Learn how to add multiple resources to the Angular Scheduler and how the Angular Scheduler maintains the events of those multiple resources in a single layout. In this video, see how to add single-level resources and their options to the Angular Scheduler. The resources are not grouped visually on the scheduler layout, rather they are assigned to the appointments and differentiated based on the colors assigned to each resource.

Dive deep into the advanced options of the multiple resources and grouping concepts of Angular Scheduler and look at an example. When resources are grouped in the Angular Scheduler, each resource will have its own calendar space in the layout so that the events belonging to those resources will be grouped accordingly. In this video, you will learn how to group resources in a scheduler layout by date. You will also learn how to define the linked events in Angular Scheduler and how to enable or disable the compact mode on mobile devices. We'll explore more grouping options of the Angular Scheduler in this video.

Learn how to export Angular Scheduler appointments to an Excel document. You will also learn how to export documents with custom fields, individual occurrences of recurring series, and custom event data. I will show you how to change the file name, file format, and column headers.

Learn how to export the Angular Scheduler events to an ICS file and change the exported file name. This video explains how to import the external ICalender events to the Scheduler component. You will also learn how to print Scheduler appointments.

Learn how to drag and drop events from an external source into the Angular Scheduler component. This video explains how to drag an item from the TreeView component to the Scheduler and update it as an event using the nodeDragStop event of the TreeView component.

Learn how to perform CRUD actions dynamically in the Syncfusion Angular Scheduler using the quick-info pop-up template. This video explains how to customize the quick info pop-up with the Syncfusion TextBox and Button components and use the built-in methods of Scheduler to add, edit, and delete appointments.

Learn how to handle server-side CRUD in the Syncfusion Angular Scheduler component. This video explains how to add various types of appointments, including normal, all-day, spanned, or recurring events in the Scheduler. You'll also learn how to edit and delete appointments.