More Examples vs. 1.1.3 Full+Lite

This document includes additional examples for the calendar component and its different uses.

Examples

Range Calendar
In this example, we'll create a range selection tool (start date and end date). This example requires the full version.
Demo:
Start Date:

End Date:
Shared Calendar
In this example, we'll create a single calendar that is shared by multiple input fields. This can be useful in an editable grid or if there are too many dates input fields.
Demo:
Date:
Date:
Date:
Date:
Date:
Keyboard Navigation
Keyboard Navigation Example. This example was made to keep keyboard navigation simple and respects the calendar options and properties. For example, the focus will not go to an unselectable date. Please note, when changing the default behavior or the keyboard navigation, the user might have issues with the new functionality. This is why keyboard navigation is not included by default.

When the input field has focus, the following keys will work as below (left and right are reversed for RTL languages)
  • Left: moves the focus one day back
  • Right: moves the focus one day forward
  • Up: moves focus one week back
  • Down: moves focus one week forward
  • Shift and Left or Up: moves the focus one month back
  • Shift and Right or Down: moves the focus one month forward
  • Shift+Ctrl and Left or Up: moves the focus one year back
  • Shift+Ctrl and Right or Left: moves the focus one year forward
  • Page Up: moves the focus to the first date of the current month
  • Page Down: moves the focus to the last date of the current month
  • Home: moves the focus to the start date
  • End: moves the focus to the end date
  • Enter (with open calendar): selects the focused date
Demo:
Drag & Select
In this example, we'll create a multi selectable calendar by dragging over dates. Drag a range of dates to select them and drag over them again to unselect them. The dates are sent to the server as individual dates (e.g. if you select a range of 5 days, the form will send 5 dates - not the start and end).
Demo:
Forcing Select on Click
This example will force the date to be always selected when the user click on it.
Demo:

API Menu