Working with Calendar Widget

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

image

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

clip_image001

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

clip_image002

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

clip_image003

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

clip_image004

You will get calendar widget in output as below,

clip_image005

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

clip_image006

You can specify a selected date as below,

clip_image007

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,

clip_image001[6]

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,

clip_image001[8]

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.

Advertisement

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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.