Calendar Validation

The Calendar control prevents users from selecting values outside the range determined by the min and max properties.

In many cases, however, not all dates in the range are valid. To handle these situations, the Calendar control has an itemValidator property. This property represents a function that takes a date as a parameter and returns true if the date is valid for selection, or false otherwise.

The calendar below demonstrates this. It prevents users from selecting dates on weekends and holidays:

April 2025

The current date is Tuesday, April 8, 2025.

// This file locates: "Scripts/Lesson/C1Input/CalendarValidation.js".
c1.documentReady(function () {
    var theCalendar = wijmo.Control.getControl('#theCalendar');
    theCalendar.valueChanged.addHandler(function (s, e) {
        showCurrentDate();
    });
    theCalendar.formatItem.addHandler(function (s, e) {// apply styles to weekends and holidays
        var weekday = e.data.getDay(),
            holiday = getHoliday(e.data);
        wijmo.toggleClass(e.item, 'date-weekend', weekday == 0 || weekday == 6);
        wijmo.toggleClass(e.item, 'date-holiday', holiday != null);
        e.item.title = holiday;
    });
    theCalendar.itemValidator = function (date, element) {
        return (date.getDay() % 6 != 0) && !getHoliday(date);
    };
 
    // show the currently selected date
    function showCurrentDate() {
        var el = document.getElementById('theCalendarOutput');
        el.textContent = wijmo.Globalize.format(theCalendar.value, 'D');
    }
    showCurrentDate();
 
    // gets the holiday for a given date
    var holidays = {
        '1/1': 'New Year\'s Day',
        '6/14': 'Flag Day',
        '7/4': 'Independence Day',
        '11/11': 'Veteran\'s Day',
        '12/25': 'Christmas Day',
        '1/3/1': 'Martin Luther King\'s Birthday', // third Monday in January
        '2/3/1': 'Washington\'s Birthday', // third Monday in February
        '5/3/6': 'Armed Forces Day', // third Saturday in May
        '9/1/1': 'Labor Day', // first Monday in September
        '10/2/1': 'Columbus Day', // second Monday in October
        '11/4/4': 'Thanksgiving Day', // fourth Thursday in November
    };
    function getHoliday(date) {
        var day = date.getDate(),
            month = date.getMonth() + 1,
            holiday = holidays[month + '/' + day];
        if (!holiday) {
            var weekDay = date.getDay(),
                weekNum = Math.floor((day - 1) / 7) + 1;
            holiday = holidays[month + '/' + weekNum + '/' + weekDay];
        }
        return holiday;
    }
});

// This file locates: "Content/css/Lesson/C1Input/CalendarValidation.css".
.wj-calendar {
  max-width: 21em;
}
 
.wj-calendar .wj-header {
  color: white;
  background: #808080;
}
 
.wj-calendar .date-holiday:not(.wj-state-selected) {
  font-weight: bold;
  color: #008f22;
  background: #f0fff0;
  outline: 2pt solid #008f22;
}
 
.wj-calendar .date-weekend:not(.wj-state-selected) {
  background-color: #d8ffa6;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1InputController : Controller
    {
        // GET: CalendarValidation
        public ActionResult CalendarValidation()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Input.CalendarValidation_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Input.CalendarValidation_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Input.CalendarValidation_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Input.CalendarValidation_Text3)
</p>
@Html.C1().Calendar().Id("theCalendar")
<div>
    @Html.Raw(Resources.C1Input.CalendarValidation_Text4)
</div>

Sun	Mon	Tue	Wed	Thu	Fri	Sat
		1	2	3	4
	7	8	9	10	11
	14	15	16	17	18
	21	22	23	24	25
	28	29	30

2025
Jan	Feb	Mar	Apr
May	Jun	Jul	Aug
Sep	Oct	Nov	Dec