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:
June 2025
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 1 | 2 | 3 | 4 | 5 |
6 | 7 | 8 | 9 | 10 | 11 | 12 |
2025 | |||
Jan | Feb | Mar | Apr |
May | Jun | Jul | Aug |
Sep | Oct | Nov | Dec |
The current date is Friday, June 6, 2025.
- C1Input/CalendarValidation.js
- C1Input/CalendarValidation.css
- CalendarValidationController.cs
- CalendarValidation.cshtml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | // 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; } }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // 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; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1InputController : Controller { // GET: CalendarValidation public ActionResult CalendarValidation() { return View(); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | < 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 > |