Angular Scheduler

The Kendo UI for Angular Scheduler component offers an in-app calendar experience similar to Outlook or Google Calendar. The Angular Scheduler has several essential features such as multiple calendar views, support for multiple resources, editing of events through a form or by dragging and resizing, time zone conversions, and more. Every feature can be enabled through a single configuration option or customized with a flexible API.

See Angular Scheduler Overview demo

Events are the main way users interact with the Kendo UI for Angular Scheduler. Each event can be created through a built-in form by double-clicking in the Scheduler or even added through an external form. Additionally, rendered events can be edited, resized to indicate a new duration, or dragged and dropped to be displayed in a different day.

See Angular Scheduler Events demo

The Kendo UI for Angular Scheduler enables users to edit single or recurring events. Editing can be done through keyboard navigation or by double-clicking with the mouse on an event. The Angular Scheduler provides a built-in form that contains all fields tied to a particular event, all out of the box.

See Angular Scheduler Editing demo

When multiple individuals, rooms, or other unique resources need to be categorized and rendered differently within the Kendo UI for Angular Scheduler, the Resources feature is critical. This feature allows every event to be tied to a specific resource, automatically giving users a unique look-and-feel to these events.

See Angular Scheduler Resources demo

The Kendo UI for Angular Scheduler has a recurrence editor built in. This means events can be configured to occur on a daily, weekly, monthly, and even annual basis. Additionally, the recurrence editor is sophisticated enough to contain logic for exceptions to the recurrence rules, giving users a huge range of flexibility for defining recurring events.

See Angular Scheduler Recurrence demo

By default, the Kendo UI for Angular Scheduler component will utilize the local time zone of the user’s browser to display events in the scheduler. However, you have the option to set a fixed time zone across all users.

See Angular Scheduler Time Zones demo

Agenda view is often found in mobile scheduling applications. The Agenda View of the Kendo UI for Angular Scheduler shows users a compact overview of all upcoming events. Each event in the Angular Scheduler is an agenda item, and users can horizontally scroll through multiple days and events.

See Angular Scheduler Agenda View demo

The Day View of the Kendo UI for Angular Scheduler showcases all events in a single day. Users can set the Day View to show the full 24 hours or only their custom work hours to limit the number of available time slots. Additionally, All-Day events are displayed in a dedicated area at the top of the day.

See Angular Scheduler Day View demo

The Month View of the Kendo UI for Angular Scheduler showcases all the days in a month and their corresponding events, organized by weeks. Each day highlights one event alongside a visual cue for multiple events, prompting the user to expand the day view to be able to see all the events scheduled for that day.

See Angular Scheduler Month View demo

To give you and your users ultimate flexibility, the Angular Scheduler’s Muti-Week View feature allows you to set a custom set of weeks to display. This is similar to the Month view except you can set the start date. Once set, the week of that date plus three more weeks will be presented.

See the Angular Scheduler Multi-Week View demo

The Kendo UI for Angular Scheduler Year View enables you to conveniently display the events in a twelve-month period. 

See the Angular Scheduler Year View demo

The Timeline View of the Kendo UI for Angular Scheduler focused on a horizontal scroll versus the traditional vertical scroll to give users a different way to see the scheduled events.

See Angular Scheduler Timeline demo

With the Week View of the Kendo UI for Angular Scheduler, users can see all events available in a single week. They can customize the start and end days of the week or use the default Angular Scheduler workweek view, which displays Monday through Friday.

See Angular Scheduler Week and Workweek Views demo

The drag and drop scheduling capability enables users to seamlessly create new scheduler events by dragging items from external UI components and dropping them into a selected time slot.

See the Angular Scheduler Drag and Drop Scheduling demo
 

Easily customize the appearance of the Scheduler events and slots with functional callbacks. You can also style a specific view by adding custom CSS classes or styles to the events and slots withing the specific view. 

See the Angular Scheduler Styling demo 
 

Help users easily spot an event that is currently happening by highlighting it. With this feature enabled any event that falls on the current time will automatically have a highlight style to it. By default, the Angular Schedule will use the built-in theme highlight style, but you can customize it to your requirements.

The Kendo UI for Angular Scheduler is a complex component with a built-in engine to help you handle all available events, time zones and other functionality of the component. For this to be seamless, certain fields are required from any data bound to the Angular Scheduler. Rather than require a strict set if field names, the Angular Scheduler allows developers to bind to any object by defining what fields on the custom data model is responsible for the required fields in the Angular Scheduler. This means there is no need to create a new object to bind specifically to the Angular Scheduler.

See Angular Scheduler Data Binding demo

With a single button click the entire content of the Kendo UI for Angular Scheduler can be exported to a PDF file. Thanks to integration with the Kendo UI for Angular PDF Export component, the exported PDF file can be customized to fit any requirements.

See Angular Scheduler PDF Export demo

You can completely customize the look and feel of both single and all-day events in the Kendo UI for Angular Scheduler with our rich collection of Angular templates.

See Angular Scheduler Templates demo

The Kendo UI for Angular Scheduler offers the ability for developers to customize any built-in message of the Angular Scheduler, and the component can also be rendered in a RTL (right-to-left) mode. This ensures that the Angular Scheduler can adapt to any user's locale settings.

See Angular Scheduler Globalization demo

The Kendo UI for Angular Scheduler component provides keyboard navigation out-of-the-box. This helps users navigate through, manipulate, and interact with any element of the Scheduler by using their keyboard.

See Angular Scheduler Keyboard Navigation demo

The Kendo UI for Angular Scheduler is compliant with Section 508 and WAI-ARIA standards and is AAA rated with WCAG 2.0.

See Angular Scheduler Accessibility demo

The Scheduler component is also available for these popular Web frameworks:

• React
• Vue
• jQuery
• Blazor
• ASP.NET Core
• ASP.NET MVC
• ASP.NET AJAX