Kendo UI for jQuery

jQuery Calendar

  • A easily implemented calendar that gives users multiple ways to select single days or date ranges.
  • Part of the Kendo UI for jQuery library along with more than 100 professionally designed components developers trust for all their jQuery UI needs.
  • Get up and running quickly with award winning support, detailed documentation, demos, virtual classrooms, and a 3-million-strong developer community.
header-jquery-Calendar
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Overview

    The Kendo UI for jQuery Calendar component is a form component representing a Gregorian calendar. The component allows users to quickly select a single date or multiple dates with conventional multiple select techniques.  Each cell within the calendar can be completely customized and the component is fully compatible with modern accessibility guidelines.

    See the jQuery Calendar demo

    calendar---overview
  • Classic and Modern Modes

    Make the jQuery calendar fit your look and feel by choosing from a traditional or modern layout and design.

    See the jQuery Calendar Type demo

  • Templates

    With templates, you can customize individual calendar cells, including date, month, year and week cells as well as the navigation elements like the header title.

    See the jQuery Calendar Templates demo

  • Disabled Dates

    By default, the jQuery Calendar is enabled and fully interactive. You can prevent date selection by setting a simple disableDates property. Common uses are disabling weekends and holidays. In a more advanced case, you can disable dates already booked in a reservations system.

    See the jQuery Calendar Disable Dates demo

    calendar-disable-dates
  • Week Column

    You can add the week number, one through 52, to any date or date range with the Week Column feature. The Kendo UI for jQuery Calendar component can show or hide a column responsible for displaying the week number next to each week displayed in the calendar.

    See the jQuery Calendar Week Column demo

    calendar-week-column
  • Multiple Selection

    The jQuery Calendar component doesn’t limit your users to picking one date at a time. It allows multiple modes of multiple selection. Ctrl + click selects individual dates. Shift + click on start and end dates selects a range. Clicking a week column selects that week.

    See the jQuery Selection demo

    calendar---multiple-selection
  • Start View and Navigation Depth

    The Start View Selection Depth feature of the Kendo UI for jQuery Calendar enables you to set the initial view and limit or expand the depth of the calendar to which the user can navigate. You can define how far users can zoom in on a date selection or zoom out of a date by for example narrowing down the selection options to only selecting a year and a month or only a month of a particular year.

    Read the jQuery Calendar Start View and Navigation Depth documentation

  • Globalization

    The jQuery Calendar supports any globalization or localization scenarios. You can also enable RTL mode to display the control’s text and UI elements from left to right.

    See the jQuery Calendar RTL demo

    globalization-localization
  • Keyboard Navigation

    Improve accessibility and productivity with keyboard-only navigation. This component supports keyboard navigation to help navigate and interact with dates.  

    See the jQuery Calendar Keyboard Navigation demo

    keyboard-navigation
  • Accessibility

    The jQuery Calendar is compliant with Section 508 standards, is AA rated with WCAG 2.0 and follows WAI-ARIA standards.

    Read the jQuery Calendar Accessibility documentation.

    jQuery accessibility