Widgets Creation
Widgets
Calendar Widget
Calendar widget is very common user interface. It helps to pick a date or a date range. Calendar widget in Nedil Widgets provides a plenty of configuring options.

Basic Usage 
$.domLoaded(function() {
	
	$.get("#call").widget("calendar", CONFIG_JSON );	
	
}
Configuring Options
It contains array of JSON objects. The properties are mentioned below.
NameTypeMust/OptionalDescription
defDate / StringOptionalSets the default date. String format should be "mm/dd/yyyy"
calendarsNumberOptionalNumber of calendar widgets should be displayed
firstNumberOptionalStart day of the week. 0 is Sunday, 1 is Monday ... 6 is Saturday
rangeBooleanOptionalif true, user can select a date range
disableDate / StringOptionalDisables mentioned date and all the dates before the specified date. String format should be "mm/dd/yyyy"
inputBooleanOptionalIf true, an input textbox element is used
displayBooleanOptionalIf false, hides the calendar while launching

Methods
NameDescription
getDate()Gets the selected date
rangeStart()Gets the range start date
rangeEnd()Gets the range end date
noOfSelectedDays()Gets number of days selected in range calendar
show()Shows the hidden calendar
hide()Hides the calendar

Calendar Widget Examples Example 1
JS HTML 
			$.domLoaded( function() {		

				$.get("#cal1").widget("calendar");	
				
				$.get("#cal2").widget("calendar", {
					def : "12/22/1987"
				});									
		
			});
		<h4>Default Calendar <span>(Displays today's date)</span></h4>
		<div id="cal1"></div>
		
		<h4>Show a Particular Date <span>(22/Dec/1987)</span></h4>
		<div id="cal2"></div>
Result
Example 2
JS HTML 
			$.domLoaded( function() {		

				$.get("#cal1").widget("calendar",{
					calendars : 3
				});									
		
			});
		<h4>Multiple Calendars</h4>
		<div id="cal1"></div>
Result
Example 3
JS HTML 
			$.domLoaded( function() {		

				$.get("#cal1").widget("calendar",{
					first : 2
				});									
		
			});
		<h4>Change Week Start Day - Start with Tuesday</h4>
		<div id="cal1"></div>
Result
Example 4
JS HTML 
			$.domLoaded( function() {		

				$.get("#cal1").widget("calendar",{
					range : true
				});		
				
				$.get("#cal2").widget("calendar",{
					calendars : 3,
					range : true
				});									
		
			});	
		<h4>Select Date Range</h4>
		<div id="cal1"></div>
		
		<h4>Select Date Range</h4>
		<div id="cal2"></div>
Result
Example 5
JS HTML 
			$.domLoaded( function() {		

				$.get("#cal1").widget("calendar",{
					disable : new Date()
				});		
				
				$.get("#cal2").widget("calendar",{
					disable : "12/15/1987",
					def : "12/22/1987"
				});									
		
			});	
		<h4>Disable Date Selection</h4>
		<h4>Select only Future Dates <span>(Using Date Object)</span></h4>
		<div id="cal1"></div>
		
		<h4>Disable till a particular date <span>(15/Dec/1987)</span></h4>
		<div id="cal2"></div>
Result
Example 6
JS HTML 
			$.domLoaded( function() {		

				$.get("#cal1").widget("calendar", {
					calendars : 1,
					input : true
				});	

				$.get("#cal2").widget("calendar", {
					calendars : 1,
					input : true,
					range : true
				});	
				
				$.get("#cal3").widget("calendar", {
					calendars : 3,
					input : true,
					range : true
				});							
		
			});	
		<h4>Get Date as Inputs</h4>
		<h4>Date Selection</h4>
		<input type="text" id="cal1" />

		<h4>Date Range Selection</h4>
		<input type="text" id="cal2" />
		
		<h4>Date Range Selection with Multiple Calendars</h4>
		<input type="text" id="cal3" />
Result
Example 7
JS HTML 
			$.domLoaded( function() {		

				var cal1, cal2;
				
				cal1 = $.get("#cal1").widget("calendar");		
				
				cal2 = $.get("#cal2").widget("calendar",{
					range : true
				});		

				$.get("#sel1").on("click", function() {
					alert(cal1.getDate());
				});

				$.get("#sel2").on("click", function() {
					alert(cal2.rangeStart());
				});

				$.get("#sel3").on("click", function() {
					alert(cal2.rangeEnd());
				});

				$.get("#sel4").on("click", function() {
					alert(cal2.noOfSelectedDays());
				});
		
			});
		<h4>External Functions</h4>
		<h4>Select Date</h4>
		<div id="cal1"></div>
		
		<input type="button" value="Get Selected Date" id="sel1" />
		
		<h4>Select Date Range</h4>
		<div id="cal2"></div>
		<input type="button" value="Get Range Begin Date" id="sel2" />
		<input type="button" value="Get Range End Date" id="sel3" />
		<input type="button" value="Get No. of days selected" id="sel4" />
Result
Example 8
JS HTML 
			$.domLoaded( function() {		

				var cal1;
					
				cal1 = $.get("#cal1").widget("calendar",{
					display : false
				});		

				$.get("#sel1").on("click", function() {
					cal1.show();
				});				
				
				$.get("#sel2").on("click", function() {
					cal1.hide();
				});
		
			});
		<h4>Show and Hide Functions</h4>
		<input type="button" value="Show" id="sel1" />
		<input type="button" value="Hide" id="sel2" />
		
		<h4>Calendar</h4>
		<div id="cal1"></div>
Result