Vue Calendar - Specify the Value Range

Use the min and max properties to specify the range of available dates.

App.vue
  • <template>
  • <DxCalendar
  • :value="date"
  • :min-date="minDate"
  • :max-date="maxDate"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxCalendar from 'devextreme-vue/calendar';
  •  
  • export default {
  • components: {
  • DxCalendar
  • },
  • data() {
  • return {
  • date: new Date(),
  • minDate: new Date(2000, 1, 1),
  • maxDate: new Date(2020, 12, 31)
  • }
  • }
  • }
  • </script>

If you need to disable specific dates, use the disabledDates property. You can specify either an array of predefined dates or a function that determines whether a date is available. For example, the following code disables weekends:

App.vue
  • <template>
  • <DxCalendar
  • :value="date"
  • :min-date="minDate"
  • :max-date="maxDate"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxCalendar from 'devextreme-vue/calendar';
  •  
  • export default {
  • components: {
  • DxCalendar
  • },
  • data() {
  • return {
  • date: new Date()
  • }
  • },
  • methods: {
  • isDateDisabled({ date, view }) {
  • const day = date.getDay();
  • const isWeekend = (day === 0 || day === 6);
  • return view === "month" && isWeekend;
  • }
  • }
  • }
  • </script>

View Demo

See Also