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>

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>

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>

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>

Sets or gets the name format of days of the week.

'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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

Sets or gets the selection mode.

'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>

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>

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />
  
  

• Set the widget's theme property to 'material' when you initialize it.

<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>

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>

Sets or gets the title format for the title section.

'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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>