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.

ninja-iconThe Calendar is part of Kendo UI for Angular, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.Start Free Trial

The following example demonstrates the Angular Calendar in action.

Change Theme
Theme
Loading ...

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.
  • View options—You can toggle the visibility of other month days and 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 date JavaScript 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

Additional Resources