| Name | Type | Default |
|---|
|
backText
|
String
|
Back
|
Sets or gets the tooltip text displayed when the mouse cursor is over the back navigation button.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :backText="'Back'"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
columnHeaderHeight
|
Number
|
20
|
Sets or gets the Calendar colomn header's height. In the column header are displayed the calendar day names.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :columnHeaderHeight="50"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
clearString
|
String
|
'Clear'
|
Sets or gets the 'Clear' string displayed when the 'showFooter' property is true.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :clearString="'Clear'"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
culture
|
String
|
default
|
Sets or gets the jqxCalendar's culture. The culture settings are contained within a file with the language code appended to the name, e.g. jquery.glob.de-DE.js for German. To set the culture, you need to include the jquery.glob.de-DE.js and set the culture property to the culture's name, e.g. 'de-DE'.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :culture="'de-DE'"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
dayNameFormat
|
String
|
'firstTwoLetters'
|
Sets or gets the name format of days of the week.
Possible Values:
'default'
'shortest'
'firstTwoLetters'
'firstLetter'
'full'
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :dayNameFormat="'firstTwoLetters'"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
disabled
|
Boolean
|
false
|
Disables (true) or enables (false) the calendar. Can be set when initialising (first creating) the calendar.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :disabled="true"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
enableWeekend
|
Boolean
|
false
|
Sets or gets a value indicating whether weekend persists its view state.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :enableWeekend="true"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
enableViews
|
Boolean
|
true
|
Determines whether switching between month, year and decade views is enabled.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :enableViews="false"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
enableOtherMonthDays
|
Boolean
|
true
|
Sets or gets a value indicating whether the other month days are enabled.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :enableOtherMonthDays="false"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
enableFastNavigation
|
Boolean
|
true
|
Sets or gets a value indicating whether the fast navigation is enabled.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :enableFastNavigation="false"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
enableHover
|
Boolean
|
true
|
Sets or gets a value indicating whether the hover state is enabled. The hover state is activated when the mouse cursor is over a calendar cell. The hover state is automatically disabled when the calendar is displayed in touch devices.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :enableHover="false"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
enableAutoNavigation
|
Boolean
|
true
|
Sets or gets a value indicating whether the auto navigation is enabled. When this property is true, click on other month date will automatically navigate to the previous or next month.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :enableAutoNavigation="false"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
enableTooltips
|
Boolean
|
false
|
Sets or gets a value indicating whether the tool tips are enabled.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :enableTooltips="true"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
forwardText
|
String
|
Forward
|
Sets or gets the tooltip text displayed when the mouse cursor is over the forward navigation button. EnableTooltips property should be set to true.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :forwardText="'Forward'"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
firstDayOfWeek
|
Number
|
0
|
Sets or gets which day to display in the first day column. By default the calendar displays 'Sunday' as first day.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :firstDayOfWeek="3"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
height
|
Number | String
|
null
|
Sets or gets the height of the Calendar.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
min
|
Date
|
1900, 1, 1
|
Represents the minimum navigation date.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :min="min" :max="max"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
},
data: function () {
return {
min: new Date(2018, 0, 1),
max: new Date(2019, 0, 1)
}
}
}
</script>
|
|
max
|
Date
|
2100, 1, 1
|
Represents the maximum navigation date.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :min="min" :max="max"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
},
data: function () {
return {
min: new Date(2018, 0, 1),
max: new Date(2019, 0, 1)
}
}
}
</script>
|
|
navigationDelay
|
Number
|
400
|
Determines the animation delay between switching views.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :navigationDelay="2000"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
rowHeaderWidth
|
Number
|
25
|
Sets or gets the row header width.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :rowHeaderWidth="30"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
readOnly
|
Boolean
|
false
|
Sets or gets the calendar in read only state.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :readOnly="true"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
restrictedDates
|
Array
|
[]
|
Sets or gets the calendar's restricted dates. These are dates which cannot be clicked.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :restrictedDates="restrictedDates"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
},
data: function () {
return {
restrictedDates: [new Date()] // Today's Date is Restricted
}
}
}
</script>
|
|
rtl
|
Boolean
|
false
|
Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :rtl="true"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
stepMonths
|
Number
|
1
|
Represents the calendar`s navigation step when the left or right navigation button is clicked.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :stepMonths="3"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
showWeekNumbers
|
Boolean
|
true
|
Sets or gets a value whether the week`s numbers are displayed.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :showWeekNumbers="true"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
showDayNames
|
Boolean
|
true
|
Sets or gets a value whether the day names are displayed. By default, the day names are displayed.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :showDayNames="false"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
showOtherMonthDays
|
Boolean
|
true
|
Sets or gets a value whether the other month days are displayed.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :showOtherMonthDays="true"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
showFooter
|
Boolean
|
false
|
Sets or gets a value indicating whether the calendar's footer is displayed.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :showFooter="true"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
selectionMode
|
String
|
'default'
|
Sets or gets the selection mode.
Possible Values:
'none'
'default'
'range'
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :selectionMode="'range'"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
specialDates
|
Array
|
new Array()
|
Sets or gets a special date to the Calendar.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :specialDates="specialDates"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
},
data: function () {
return {
specialDates: []
/*
Set the SpecialDates Property.
this.$refs.myCalendar.addSpecialDate(new Date());
Get the SpecialDates Property.
const specialDates = this.$refs.myCalendar.specialDates;
*/
}
}
}
</script>
|
|
theme
|
String
|
''
|
Sets the widget's theme.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :theme="'material'"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
titleHeight
|
Number
|
25
|
Sets or gets the title height where the navigation arrows are displayed.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :titleHeight="50"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
titleFormat
|
Array
|
["MMMM yyyy", "yyyy", "yyyy"]
|
Sets or gets the title format for the title section.
Possible Values:
'd' - the day of the month
'dd' - the day of the month
'ddd' - the abbreviated name of the day of the week
'dddd' - the full name of the day of the week
'h' - the hour, using a 12-hour clock from 1 to 12
'hh' - the hour, using a 12-hour clock from 01 to 12
'H' - the hour, using a 24-hour clock from 0 to 23
'HH' - the hour, using a 24-hour clock from 00 to 23
'm'-the minute, from 0 through 59
'mm' - the minutes,from 00 though59
'M' - the month, from 1 through 12;
'MM' - the month, from 01 through 12
'MMM' - the abbreviated name of the month
'MMMM' - the full name of the month
's' - the second, from 0 through 59
'ss' - the second, from 00 through 59
't' - the first character of the AM/PM designator
'tt' - the AM/PM designator
'y' - the year, from 0 to 99
'yy' - the year, from 00 to 99
'yyy' - the year, with a minimum of three digits
'yyyy' - the year as a four-digit number
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :titleFormat=" ["MM yyyy", "yyyy", "yyyy"] "
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
todayString
|
String
|
'Today'
|
Sets or gets the 'Today' string displayed when the 'showFooter' property is true.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :todayString="'Today'" :showFooter="true"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
value
|
Date
|
Today's Date
|
Sets or gets the Calendar's value.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :value="value"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
},
data: function () {
return {
value: new Date(2019, 0, 10)
}
}
}
</script>
|
|
width
|
Number | String
|
null
|
Sets or gets the width of the Calendar.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
}
}
</script>
|
|
|
|
backButtonClick
|
Event
|
|
This event is triggered when the calendar back navigation button is clicked.
Code examples
Bind to the backButtonClick event of jqxCalendar.
<template>
<JqxCalendar ref="myCalendar" @backButtonClick="onBackButtonClick($event)"
:width="200" :height="200"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
},
methods: {
onBackButtonClick: function (event) {
alert('do something...');
}
}
}
</script>
|
|
change
|
Event
|
|
This event is triggered when the Calendar's selection is changed.
Code examples
Bind to the change event of jqxCalendar.
<template>
<JqxCalendar ref="myCalendar" @change="onChange($event)"
:width="200" :height="200"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
},
methods: {
onChange: function (event) {
alert('do something...');
}
}
}
</script>
|
|
nextButtonClick
|
Event
|
|
This event is triggered when the calendar next navigation button is clicked.
Code examples
Bind to the nextButtonClick event of jqxCalendar.
<template>
<JqxCalendar ref="myCalendar" @nextButtonClick="onNextButtonClick($event)"
:width="200" :height="200"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
},
methods: {
onNextButtonClick: function (event) {
alert('do something...');
}
}
}
</script>
|
|
viewChange
|
Event
|
|
This event is triggered when the Calendar's view is changed.
Code examples
Bind to the viewChange event of jqxCalendar.
<template>
<JqxCalendar ref="myCalendar" @viewChange="onViewChange($event)"
:width="200" :height="200"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
},
methods: {
onViewChange: function (event) {
alert('do something...');
}
}
}
</script>
|
|
|
| Name | Arguments | Return Type |
|---|
|
clear
|
None
|
None
|
Clears the selection.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
},
mounted: function () {
this.$refs.myCalendar.clear();
}
}
</script>
|
|
destroy
|
None
|
None
|
Destroys the widget.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
},
mounted: function () {
this.$refs.myCalendar.destroy();
}
}
</script>
|
|
focus
|
None
|
None
|
Focuses the Calendar.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
},
mounted: function () {
this.$refs.myCalendar.focus();
}
}
</script>
|
|
addSpecialDate
|
date, specialDateClass, text
|
None
|
Method: addSpecialDate
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
},
mounted: function () {
this.$refs.myCalendar.addSpecialDate(new Date(),'','Special Date');
}
}
</script>
|
|
getMinDate
|
None
|
Date
|
When the getMinDate method is called, the user gets the lowest navigation date set to the Calendar.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
},
mounted: function () {
const value = this.$refs.myCalendar.getMinDate();
}
}
</script>
|
|
getMaxDate
|
None
|
Date
|
When the getMaxDate method is called, the user gets the hightest navigation date set to the Calendar. The retuned value is a JavaScript Date object.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
},
mounted: function () {
const value = this.$refs.myCalendar.getMaxDate();
}
}
</script>
|
|
getDate
|
None
|
Date
|
When the getDate method is called, the user gets the current month displayed in the Calendar.The returned value is a JavaScript Date object.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
},
mounted: function () {
const value = this.$refs.myCalendar.getDate();
}
}
</script>
|
|
getRange
|
None
|
Object
|
Gets the selection range when the selectionMode is set to 'range'. The returned value is an object with "from" and "to" fields. Each of these is a JavaScript Date object.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200" :selectionMode="'range'"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
},
mounted: function () {
this.$refs.myCalendar.setRange(new Date(2017, 9, 20),new Date(2017, 9, 22));
const value = this.$refs.myCalendar.getRange();
alert(JSON.stringify(value));
}
}
</script>
|
|
navigateForward
|
months
|
None
|
When the navigateForward method is called, the calendar navigates forward with a specific month step (by default 1).
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
},
mounted: function () {
this.$refs.myCalendar.navigateForward();
}
}
</script>
|
|
navigateBackward
|
months
|
None
|
When the navigateBackward method is called, the calendar navigates backward with a specific month step (by default 1).
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
},
mounted: function () {
this.$refs.myCalendar.navigateBackward();
}
}
</script>
|
|
render
|
None
|
None
|
Renders the Calendar.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
},
mounted: function () {
this.$refs.myCalendar.render();
}
}
</script>
|
|
refresh
|
None
|
None
|
Performs a layout and updates the UI.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
},
mounted: function () {
this.$refs.myCalendar.refresh();
}
}
</script>
|
|
setMinDate
|
date
|
None
|
When the setMinDate method is called, the user sets the lowest date to which it is possible to navigate.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
},
mounted: function () {
this.$refs.myCalendar.setMinDate(new Date(2017, 9, 20));
}
}
</script>
|
|
setMaxDate
|
date
|
None
|
When the setMaxDate method is called, the user sets the hightest date to which it is possible to navigate.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
},
mounted: function () {
this.$refs.myCalendar.setMaxDate(new Date(2019, 10, 20));
}
}
</script>
|
|
setDate
|
date
|
None
|
When the setDate method is called, the user sets the current month displayed in the Calendar. The parameter is a JavaScript Date object.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
},
mounted: function () {
this.$refs.myCalendar.setDate(new Date(2017, 9, 20));
}
}
</script>
|
|
setRange
|
date, date2
|
None
|
Sets the selection range when the selectionMode is set to 'range'. The parameters are JavaScript Date objects.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
},
mounted: function () {
this.$refs.myCalendar.selectionMode = 'range';
this.$refs.myCalendar.setRange(new Date(2017, 9, 20),new Date(2017, 9, 22));
}
}
</script>
|
|
today
|
None
|
None
|
Sets the Date to Today.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
},
mounted: function () {
this.$refs.myCalendar.today();
}
}
</script>
|
|
val
|
value, value2
|
Date/string
|
Gets or sets the jqxCalendar's value.
<template>
<JqxCalendar ref="myCalendar"
:width="200" :height="200"
/>
</template>
<script>
import JqxCalendar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcalendar.vue';
export default {
components: {
JqxCalendar
},
mounted: function () {
const value = this.$refs.myCalendar.val();
}
}
</script>
|