Working with Calendar Widget

In this post we will explore Calendar Widget. This widget gives a graphical calendar as below,


This widget gives option to

  • Configure maximum date
  • Configure minimum date
  • Configure start view
  • Configure custom template for Month View.

You can create a Calendar widget as below,

First define a div in HTML with Id


And then in jQuery you need to convert HTML div in Kendo UI Calendar widget as below,


You can configure Calendar Behavior like maximum date and minimum date as below,


You can configure the start option with start JSON attribute as below,


You will get calendar widget in output as below,


You can get reference of calendar and set maximum date as below,


You can specify a selected date as below,


The various functions on Calendar widgets are as below,

  • Max to set and get maximum date.
  • Min to set and get minimum date.
  • Navigate to desire date
  • Value to set and get current date.
  • NavigateUp to navigate up
  • NavigateDown to navigate down
  • NavigateToPast to navigate past
  • NavigateToFuture to navigate future

If you want to navigate to past you can navigate as below,


Various events associated with Calendar widgets are as below,

  • Change event to fetch selected date
  • Navigate event fired on navigation

You can work with Change event as below,


In this way you can work with Telerik Kendo UI Calendar Widgets. I strongly recommend you to leverage goodness of Telerik Kendo UI in your web applications.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.