JavaScript/jQuery Calendar - Specify the Value Range

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

JavaScript
  • $(function() {
  • $("#calendarContainer").dxCalendar({
  • value: new Date(),
  • min: new Date(2000, 1, 1),
  • max: new Date(2020, 12, 31)
  • });
  • });

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:

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;
  • })
  • });
  • });

View Demo

See Also