|
backText
|
string
|
Back
|
Sets or gets the backText property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, backText: "Back", theme:"light" } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
columnHeaderHeight
|
number
|
20
|
Sets or gets the columnHeaderHeight property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200,columnHeaderHeight:50, theme: "light" } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
clearString
|
string
|
'Clear'
|
Sets or gets the clearString property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, clearString: "Clear", theme:"light" } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
culture
|
string
|
default
|
Sets or gets the culture property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, culture: "de-DE", theme:"light" } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
dayNameFormat
|
string
|
'firstTwoLetters'
|
Sets or gets the dayNameFormat property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, dayNameFormat: "firstTwoLetters", theme:"light" } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
disabled
|
boolean
|
false
|
Sets or gets the disabled property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200,disabled:true, theme: "light" } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
enableWeekend
|
boolean
|
false
|
Sets or gets the enableWeekend property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200,enableWeekend:true, theme: "light" } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
enableViews
|
boolean
|
true
|
Sets or gets the enableViews property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200,enableViews:false, theme: "light" } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
enableOtherMonthDays
|
boolean
|
true
|
Sets or gets the enableOtherMonthDays property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200,enableOtherMonthDays:false, theme: "light" } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
enableFastNavigation
|
boolean
|
true
|
Sets or gets the enableFastNavigation property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200,enableFastNavigation:false, theme: "light" } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
enableHover
|
boolean
|
true
|
Sets or gets the enableHover property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200,enableHover:false, theme: "light" } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
enableAutoNavigation
|
boolean
|
true
|
Sets or gets the enableAutoNavigation property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200,enableAutoNavigation:false, theme: "light" } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
enableTooltips
|
boolean
|
false
|
Sets or gets the enableTooltips property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200,enableTooltips:true, theme: "light" } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
forwardText
|
string
|
Forward
|
Sets or gets the forwardText property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, forwardText: "Forward", theme:"light" } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
firstDayOfWeek
|
number
|
0
|
Sets or gets the firstDayOfWeek property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200,firstDayOfWeek:3, theme: "light" } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
height
|
number
|
null
|
Sets or gets the height property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light" } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
min
|
date
|
1900, 1, 1
|
Sets or gets the min property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light", min:"min", max:"max" } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
max
|
date
|
2100, 1, 1
|
Sets or gets the max property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light", min:"min", max:"max" } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
navigationDelay
|
number
|
400
|
Sets or gets the navigationDelay property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light",navigationDelay:2000 } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
rowHeaderWidth
|
number
|
25
|
Sets or gets the rowHeaderWidth property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light",rowHeaderWidth:30 } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
readOnly
|
boolean
|
false
|
Sets or gets the readOnly property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light",readOnly:true } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
restrictedDates
|
array
|
[]
|
Sets or gets the restrictedDates property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light", restrictedDates:"restrictedDates" } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
rtl
|
boolean
|
false
|
Sets or gets the rtl property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light",rtl:true } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
stepMonths
|
number
|
1
|
Sets or gets the stepMonths property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light",stepMonths:3 } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
showWeekNumbers
|
boolean
|
true
|
Sets or gets the showWeekNumbers property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light",showWeekNumbers:true } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
showDayNames
|
boolean
|
true
|
Sets or gets the showDayNames property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light",showDayNames:false } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
showOtherMonthDays
|
boolean
|
true
|
Sets or gets the showOtherMonthDays property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light",showOtherMonthDays:true } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
showFooter
|
boolean
|
false
|
Sets or gets the showFooter property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light",showFooter:true } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
selectionMode
|
string
|
'default'
|
Sets or gets the selectionMode property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light", selectionMode:"range" } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
specialDates
|
array
|
new Array()
|
Sets or gets the specialDates property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light", specialDates:"specialDates" } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
theme
|
string
|
''
|
Sets or gets the theme property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light" } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
titleHeight
|
number
|
25
|
Sets or gets the titleHeight property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light",titleHeight:50 } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
titleFormat
|
array
|
["MMMM yyyy", "yyyy", "yyyy"]
|
Sets or gets the titleFormat property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light", titleFormat:'["MM yyyy", "yyyy", "yyyy"]' } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
todayString
|
string
|
'Today'
|
Sets or gets the todayString property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light", todayString:"Today" } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
value
|
date
|
Today's Date
|
Sets or gets the value property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light", value:"value" } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
width
|
number
|
null
|
Sets or gets the width property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light" } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
|
|
backButtonClick
|
Event
|
|
Code examples
Bind to the backButtonClick event of jqxCalendar.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light" } window.onload = function() { document.querySelector( "jqx-calendar").addEventListener("backButtonClick", function(event) { // Your code here. }); }; </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
change
|
Event
|
|
Code examples
Bind to the change event of jqxCalendar.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light" } window.onload = function() { document.querySelector( "jqx-calendar").addEventListener("change", function(event) { // Your code here. }); }; </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
nextButtonClick
|
Event
|
|
Code examples
Bind to the nextButtonClick event of jqxCalendar.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light" } window.onload = function() { document.querySelector( "jqx-calendar").addEventListener("nextButtonClick", function(event) { // Your code here. }); }; </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
viewChange
|
Event
|
|
Code examples
Bind to the viewChange event of jqxCalendar.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light" } window.onload = function() { document.querySelector( "jqx-calendar").addEventListener("viewChange", function(event) { // Your code here. }); }; </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
|
|
clear
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light" } window.onload = function() { document.querySelector( "jqx-calendar").clear(); } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
destroy
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light" } window.onload = function() { document.querySelector( "jqx-calendar").destroy(); } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
focus
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light" } window.onload = function() { document.querySelector( "jqx-calendar").focus(); } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
addSpecialDate
|
Method
|
|
| Parameter |
Type |
Description |
| date |
date |
|
| tooltip |
string |
The end of range when the selectionMode is "range |
| text |
string |
The end of range when the selectionMode is "range |
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light" } window.onload = function() { document.querySelector( "jqx-calendar").addSpecialDate(new Date(2017, 9, 20),tooltip); } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
getMinDate
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
Date
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light" } window.onload = function() { var result = document.querySelector( "jqx-calendar").getMinDate(); } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
getMaxDate
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
Date
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light" } window.onload = function() { var result = document.querySelector( "jqx-calendar").getMaxDate(); } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
getDate
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
Date
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light" } window.onload = function() { var result = document.querySelector( "jqx-calendar").getDate(); } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
getRange
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
Object
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light" } window.onload = function() { var result = document.querySelector( "jqx-calendar").getRange(); } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
navigateForward
|
Method
|
|
| Parameter |
Type |
Description |
| months |
number |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light" } window.onload = function() { document.querySelector( "jqx-calendar").navigateForward(); } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
navigateBackward
|
Method
|
|
| Parameter |
Type |
Description |
| months |
number |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light" } window.onload = function() { document.querySelector( "jqx-calendar").navigateBackward(); } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
render
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light" } window.onload = function() { document.querySelector( "jqx-calendar").render(); } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
refresh
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light" } window.onload = function() { document.querySelector( "jqx-calendar").refresh(); } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
setMinDate
|
Method
|
|
| Parameter |
Type |
Description |
| date |
date/string |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light" } window.onload = function() { document.querySelector( "jqx-calendar").setMinDate(new Date(2017, 9, 20)); } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
setMaxDate
|
Method
|
|
| Parameter |
Type |
Description |
| date |
date/string |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light" } window.onload = function() { document.querySelector( "jqx-calendar").setMaxDate(new Date(2017, 9, 20)); } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
setDate
|
Method
|
|
| Parameter |
Type |
Description |
| date |
date/string |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light" } window.onload = function() { document.querySelector( "jqx-calendar").setDate(new Date(2017, 9, 20)); } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
setRange
|
Method
|
|
| Parameter |
Type |
Description |
| date |
date/string |
|
| date2 |
date/string |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light" } window.onload = function() { document.querySelector( "jqx-calendar").setRange(new Date(2017, 9, 20),new Date(2017, 9, 22)); } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
today
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light" } window.onload = function() { document.querySelector( "jqx-calendar").today(); } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
|
val
|
Method
|
|
| Parameter |
Type |
Description |
| value |
date/string(optional) |
The start of range when the selectionMode is "range |
| value2 |
date/string(optional) |
The end of range when the selectionMode is "range |
Return Value
Date/String
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Calendar Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "calendarSettings"] = { width:200,height:200, theme: "light" } window.onload = function() { var result = document.querySelector( "jqx-calendar").val(); } </script></head><body> <jqx-calendar settings="calendarSettings"></jqx-calendar>
|
