JavaScript/jQuery Calendar - Specify the Value Range
Use the min and max properties to specify the range of available dates.
jQuery
JavaScript
$(function() { $("#calendarContainer").dxCalendar({ value: new Date(), min: new Date(2000, 1, 1), max: new Date(2020, 12, 31) }); });
Angular
HTML
TypeScript
<dx-calendar [(value)]="date" [min]="minDate" [max]="maxDate"> </dx-calendar>
import { DxCalendarModule } from "devextreme-angular"; // ... export class AppComponent { date: Date = new Date(); minDate: Date = new Date(2000, 1, 1); maxDate: Date = new Date(2020, 12, 31); } @NgModule({ imports: [ // ... DxCalendarModule ], // ... })
Vue
App.vue
<template> <DxCalendar :value="date" :min-date="minDate" :max-date="maxDate" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; 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>
React
App.js
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import Calendar from 'devextreme-react/calendar'; const date = new Date(); const minDate = new Date(2000, 1, 1); const maxDate = new Date(2020, 12, 31); class App extends React.Component { render() { return ( <Calendar defaultValue={date} minDate={minDate} maxDate={maxDate} /> ); } } export default App;
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:
jQuery
JavaScript
$(function() { $("#calendarContainer").dxCalendar({ value: new Date(), disabledDates: function (data) { const day = data.date.getDay(); const isWeekend = (day === 0 || day === 6); return data.view === "month" && isWeekend; }) }); });
Angular
HTML
TypeScript
<dx-calendar [(value)]="date" [disabledDates]="isDateDisabled"> </dx-calendar>
import { DxCalendarModule } from "devextreme-angular"; // ... export class AppComponent { date: Date = new Date(); isDateDisabled({ date, view }) { const day = date.getDay(); const isWeekend = (day === 0 || day === 6); return view === "month" && isWeekend; }; } @NgModule({ imports: [ // ... DxCalendarModule ], // ... })
Vue
App.vue
<template> <DxCalendar :value="date" :min-date="minDate" :max-date="maxDate" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; 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>
React
App.js
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import Calendar from 'devextreme-react/calendar'; const date = new Date(); class App extends React.Component { render() { return ( <Calendar defaultValue={date} disabledDates={this.isDateDisabled} /> ); } isDateDisabled({ date, view }) { const day = date.getDay(); const isWeekend = (day === 0 || day === 6); return view === "month" && isWeekend; } } export default App;
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.