JqxCalendar: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
No edit summary
No edit summary
 
(13 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[file:jqxCalendar.png]]


[[File:JqxCalendar.png]]
== Description ==
== Description ==
The Grid is a powerful jQuery widget that displays tabular data. It offers rich support for interacting with data, including paging, grouping, sorting, filtering and editing.
jqxCalendar represents a jQuery calendar widget that enables the user to select a date using a visual monthly calendar display.
 
jqWidgets is a commercial product, which depending on how you use it, requires a license fee. Complete details are on jqWidget's website. The product is well supported.


== Properties and Methods ==
== Properties and Methods ==


See the complete documentation at jqWidget's site:
This control is well documented on the jqWidget's website: http://www.jqwidgets.com/jquery-widgets-documentation/.
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-getting-started.htm


== Example ==
== Example ==
<tabber>
JavaScript=
<syntaxhighlight lang="JavaScript">
function Main() {
  $("#jqxWidget").jqxCalendar({ value: $.jqx._jqxDateTimeInput.getDateTime(new Date(2011, 9, 1)) });
}
Calendar1.oncellSelected = function()
  alert($("#Calendar1").jqxCalendar("getDate"));
}</syntaxhighlight>
|-|
BASIC=
<syntaxhighlight lang="vb.net">
Sub Main()
  $("#jqxWidget").jqxCalendar({ value: $.jqx._jqxDateTimeInput.getDateTime(new Date(2011, 9, 1)) });
End Sub
Function Calendar1_oncellSelected()
  MsgBox $("#Calendar1").jqxCalendar("getDate")
End Function</syntaxhighlight>
</tabber>
== FastClick Fix ==
On some devices, FastClick can cause problems with the calendar function.  The following code should resolve the issue:


<pre>
<pre>
Dim data, source, dataAdapter
JavaScript
data = generatedata(50)    'generatedata is a function which returns grid data
    $('#Calendar1 *').addClass('needsclick')
source = {localdata: data, datatype: "array"}
     $('#Calendar1').on('change viewChange click',function(){$('#Calendar1 *').addClass('needsclick')})
dataAdapter = new $.jqx.dataAdapter(source)
End JavaScript
             
Grid1_settings.source = dataAdapter
Grid1_settings.columns = [ _
    { text: "First Name", dataField: "firstname", width: 100 }, _
    { text: "Last Name", dataField: "lastname", width: 100 }, _
    { text: "Product", dataField: "productname", width: 180 }, _
    { text: "Quantity", dataField: "quantity", width: 80, cellsalign: "right" }, _
    { text: "Unit Price", dataField: "price", width: 90, cellsalign: "right", cellsformat: "c2" }, _
    { text: "Total", dataField: "total", cellsalign: "right", minwidth: 100, cellsformat: "c2" } _
  ]
</pre>
</pre>


== Output ==
== Output ==
See above.
[[Category:Language Reference]]
[[Category:jqWidgets]]
[[Category:Controls]]

Latest revision as of 17:53, 22 July 2019

Description

jqxCalendar represents a jQuery calendar widget that enables the user to select a date using a visual monthly calendar display.

jqWidgets is a commercial product, which depending on how you use it, requires a license fee. Complete details are on jqWidget's website. The product is well supported.

Properties and Methods

This control is well documented on the jqWidget's website: http://www.jqwidgets.com/jquery-widgets-documentation/.

Example

function Main() {
  $("#jqxWidget").jqxCalendar({ value: $.jqx._jqxDateTimeInput.getDateTime(new Date(2011, 9, 1)) });
}

Calendar1.oncellSelected = function() 
  alert($("#Calendar1").jqxCalendar("getDate"));
}

Sub Main()
  $("#jqxWidget").jqxCalendar({ value: $.jqx._jqxDateTimeInput.getDateTime(new Date(2011, 9, 1)) });
End Sub

Function Calendar1_oncellSelected()
  MsgBox $("#Calendar1").jqxCalendar("getDate")
End Function

FastClick Fix

On some devices, FastClick can cause problems with the calendar function. The following code should resolve the issue:

JavaScript
    $('#Calendar1 *').addClass('needsclick')
    $('#Calendar1').on('change viewChange click',function(){$('#Calendar1 *').addClass('needsclick')}) 
End JavaScript

Output

See above.