backText
|
string
|
Back
|
Sets or gets the backText property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar back-text="Back" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
columnHeaderHeight
|
int
|
20
|
Sets or gets the columnHeaderHeight property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar column-header-height="50" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
clearString
|
string
|
'Clear'
|
Sets or gets the clearString property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar clear-string="Clear" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
culture
|
string
|
default
|
Sets or gets the culture property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar culture="de-DE" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
dayNameFormat
|
string
|
'firstTwoLetters'
|
Sets or gets the dayNameFormat property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar day-name-format="firstTwoLetters" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
disabled
|
bool
|
false
|
Sets or gets the disabled property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar disabled="true" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
enableWeekend
|
bool
|
false
|
Sets or gets the enableWeekend property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar enable-weekend="true" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
enableViews
|
bool
|
true
|
Sets or gets the enableViews property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar enable-views="false" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
enableOtherMonthDays
|
bool
|
true
|
Sets or gets the enableOtherMonthDays property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar enable-other-month-days="false" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
enableFastNavigation
|
bool
|
true
|
Sets or gets the enableFastNavigation property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar enable-fast-navigation="false" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
enableHover
|
bool
|
true
|
Sets or gets the enableHover property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar enable-hover="false" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
enableAutoNavigation
|
bool
|
true
|
Sets or gets the enableAutoNavigation property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar enable-auto-navigation="false" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
enableTooltips
|
bool
|
false
|
Sets or gets the enableTooltips property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar enable-tooltips="true" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
forwardText
|
string
|
Forward
|
Sets or gets the forwardText property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar forward-text="Forward" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
firstDayOfWeek
|
int
|
0
|
Sets or gets the firstDayOfWeek property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar first-day-of-week="3" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
height
|
int
|
null
|
Sets or gets the height property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
min
|
DateTime
|
1900, 1, 1
|
Sets or gets the min property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar min="min" max="max" width="200" height="200" value="date"></jqx-calendar>
|
max
|
DateTime
|
2100, 1, 1
|
Sets or gets the max property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar min="min" max="max" width="200" height="200" value="date"></jqx-calendar>
|
navigationDelay
|
int
|
400
|
Sets or gets the navigationDelay property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar navigation-delay="2000" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
rowHeaderWidth
|
int
|
25
|
Sets or gets the rowHeaderWidth property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar row-header-width="30" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
readOnly
|
bool
|
false
|
Sets or gets the readOnly property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar read-only="true" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
restrictedDates
|
List<DateTime>
|
[]
|
Sets or gets the restrictedDates property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2020, 9, 20);
List<DateTime> dates = new List<DateTime>
{
new DateTime(2017, 9, 20),
new DateTime(2017, 9, 21),
new DateTime(2017, 9, 22)
};
}
<jqx-calendar restricted-dates="dates" {{configuration}}></jqx-calendar>
|
rtl
|
bool
|
false
|
Sets or gets the rtl property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar rtl="true" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
stepMonths
|
int
|
1
|
Sets or gets the stepMonths property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar step-months="3" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
showWeekNumbers
|
bool
|
true
|
Sets or gets the showWeekNumbers property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar show-week-numbers="true" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
showDayNames
|
bool
|
true
|
Sets or gets the showDayNames property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar show-day-names="false" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
showOtherMonthDays
|
bool
|
true
|
Sets or gets the showOtherMonthDays property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar show-other-month-days="true" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
showFooter
|
bool
|
false
|
Sets or gets the showFooter property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar show-footer="true" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
selectionMode
|
string
|
'default'
|
Sets or gets the selectionMode property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar selection-mode="range" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
specialDates
|
List<SpecialDate>
|
new Array()
|
Sets or gets the specialDates property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
List<SpecialDate> specialDates = new List<SpecialDate>
{
new SpecialDate() {Date = new DateTime(2017, 9, 20), Tooltip = "Tooltip 1" },
new SpecialDate() {Date = new DateTime(2017, 9, 21), Tooltip = "Tooltip 2" }
};
}
<jqx-calendar special-dates="specialDates" {{configuration}}></jqx-calendar>
|
theme
|
string
|
''
|
Sets or gets the theme property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar theme="energyblue" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
titleHeight
|
int
|
25
|
Sets or gets the titleHeight property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar title-height="50" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
titleFormat
|
List<string>
|
["MMMM yyyy", "yyyy", "yyyy"]
|
Sets or gets the titleFormat property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar title-format="["MM yyyy", "yyyy", "yyyy"]" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
todayString
|
string
|
'Today'
|
Sets or gets the todayString property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar today-string="Today" width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
value
|
DateTime
|
Today
|
Sets or gets the value property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar value="date" width="200" height="200" min="min" max="max"></jqx-calendar>
|
width
|
int
|
null
|
Sets or gets the width property.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar width="200" height="200" min="min" max="max" value="date"></jqx-calendar>
|
|
backButtonClick
|
Event
|
|
Code examples
Bind to the backButtonClick event of jqxCalendar.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar on-back-button-click="eventHandler()"></jqx-calendar>
@section scripts {
<script type="text/javascript">
function eventHandler(event) {
}
</script>
}
|
change
|
Event
|
|
Code examples
Bind to the change event of jqxCalendar.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar on-change="eventHandler()"></jqx-calendar>
@section scripts {
<script type="text/javascript">
function eventHandler(event) {
}
</script>
}
|
nextButtonClick
|
Event
|
|
Code examples
Bind to the nextButtonClick event of jqxCalendar.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar on-next-button-click="eventHandler()"></jqx-calendar>
@section scripts {
<script type="text/javascript">
function eventHandler(event) {
}
</script>
}
|
viewChange
|
Event
|
|
Code examples
Bind to the viewChange event of jqxCalendar.
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar on-view-change="eventHandler()"></jqx-calendar>
@section scripts {
<script type="text/javascript">
function eventHandler(event) {
}
</script>
}
|
|
clear
|
Method
|
|
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar width="200" height="200" min="min" max="max" value="date" instance="getInstance()"></jqx-calendar>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["clear"]();
}
</script>
}
|
destroy
|
Method
|
|
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar width="200" height="200" min="min" max="max" value="date" instance="getInstance()"></jqx-calendar>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["destroy"]();
}
</script>
}
|
focus
|
Method
|
|
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar width="200" height="200" min="min" max="max" value="date" instance="getInstance()"></jqx-calendar>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["focus"]();
}
</script>
}
|
addSpecialDate
|
Method
|
|
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar width="200" height="200" min="min" max="max" value="date" instance="getInstance()"></jqx-calendar>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["addSpecialDate"](new Date(2017, 9, 20),tooltip);
}
</script>
}
|
getMinDate
|
Method
|
|
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar width="200" height="200" min="min" max="max" value="date" instance="getInstance()"></jqx-calendar>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
var result = instance["getMinDate"]();
}
</script>
}
|
getMaxDate
|
Method
|
|
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar width="200" height="200" min="min" max="max" value="date" instance="getInstance()"></jqx-calendar>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
var result = instance["getMaxDate"]();
}
</script>
}
|
getDate
|
Method
|
|
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar width="200" height="200" min="min" max="max" value="date" instance="getInstance()"></jqx-calendar>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
var result = instance["getDate"]();
}
</script>
}
|
getRange
|
Method
|
|
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar width="200" height="200" min="min" max="max" value="date" instance="getInstance()"></jqx-calendar>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
var result = instance["getRange"]();
}
</script>
}
|
navigateForward
|
Method
|
|
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar width="200" height="200" min="min" max="max" value="date" instance="getInstance()"></jqx-calendar>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["navigateForward"]();
}
</script>
}
|
navigateBackward
|
Method
|
|
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar width="200" height="200" min="min" max="max" value="date" instance="getInstance()"></jqx-calendar>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["navigateBackward"]();
}
</script>
}
|
render
|
Method
|
|
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar width="200" height="200" min="min" max="max" value="date" instance="getInstance()"></jqx-calendar>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["render"]();
}
</script>
}
|
refresh
|
Method
|
|
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar width="200" height="200" min="min" max="max" value="date" instance="getInstance()"></jqx-calendar>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["refresh"]();
}
</script>
}
|
setMinDate
|
Method
|
|
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar width="200" height="200" min="min" max="max" value="date" instance="getInstance()"></jqx-calendar>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["setMinDate"](new Date(2017, 9, 20));
}
</script>
}
|
setMaxDate
|
Method
|
|
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar width="200" height="200" min="min" max="max" value="date" instance="getInstance()"></jqx-calendar>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["setMaxDate"](new Date(2017, 9, 20));
}
</script>
}
|
setDate
|
Method
|
|
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar width="200" height="200" min="min" max="max" value="date" instance="getInstance()"></jqx-calendar>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["setDate"](new Date(2017, 9, 20));
}
</script>
}
|
setRange
|
Method
|
|
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar width="200" height="200" min="min" max="max" value="date" instance="getInstance()"></jqx-calendar>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["setRange"](new Date(2017, 9, 20),new Date(2017, 9, 22));
}
</script>
}
|
today
|
Method
|
|
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar width="200" height="200" min="min" max="max" value="date" instance="getInstance()"></jqx-calendar>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["today"]();
}
</script>
}
|
val
|
Method
|
|
<script src="~/jqwidgets/jqxcalendar.js"></script>
<script src="~/jqwidgets/jqxdatetimeinput.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@{
DateTime date = new DateTime(2017, 9, 20);
DateTime min = new DateTime(2002, 9, 20);
DateTime max = new DateTime(2018, 9, 20);
}
<jqx-calendar width="200" height="200" min="min" max="max" value="date" instance="getInstance()"></jqx-calendar>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
var result = instance["val"]();
}
</script>
}
|