Kendo UI for Angular Calendar Overview
The Kendo UI for Angular Calendar is a form component that represents a graphical Gregorian calendar.
It supports the selection of and navigation between dates as well as data templates and ranges for scheduling appointments.
The following example demonstrates the Angular Calendar in action.
Example
View Source
Change Theme:
Key Features
- Calendar types—You can set the type of the Angular Calendar and choose between the default infinite layout and the classic rendering.
- Disabled Calendar—You can use the configuration options of the Calendar to disable the component so that users are not able to interact with it.
- Focused and selected dates—You can also control the focused and selected dates within the Calendar.
- Disabled dates—The Calendar supports specific approaches for disabling a selection of dates such as through using a function, an array of dates, or an array of days.
- Date ranges—Within the Calendar, date ranges can be defined by setting a start and end date for a period of time.
- Fast navigation sidebar—The Calendar supports configuration options for controlling the default navigation sidebar.
- Active view—You can also control the initially loaded page of the Calendar and render it in a month, year, decade, or year view.
- View selection depth—The Angular Calendar provides an option for setting the view depth to which the user can navigate.
- Selection modes—Apart form its default single selection mode, the Calendar supports options for multiple, range, and week selection.
- Templates—You can customize the content of each Calendar cell and define a cell template.
- Week number column—The Calendar also supports options for rendering a column displaying the number of the weeks.
- Forms support—You can use the Calendar both in template-driven and reactive Angular forms.
- Integration with JSON—As the Calendar works only with
dateJavaScript instances while the received data from the server is serialized in a JSON format, the component provides options for binding it to dates which are serialized as strings. - Globalization—All Kendo UI for Angular Date Inputs provide globalization options.
- Accessibility—The Calendar is accessible for screen readers and supports WAI-ARIA attributes.
- Keyboard navigation—The Calendar supports a number of keyboard shortcuts for processing various commands.
Support and Learning Resources
- Calendar Homepage
- Getting Started with the Kendo UI for Angular Date Inputs
- API Reference of the Calendar
- Getting Started with Kendo UI for Angular (Online Guide)
- Getting Started with Kendo UI for Angular (Video Tutorial)
- Virtual Classroom (Training Courses for Registered Users)
- Calendar Forum
- Before You Start: All Things Angular (Telerik Blog Post)
- Knowledge Base
