Calendar Ranges
Use the Calendar's min and max properties to restrict the range of dates that can be entered.
For example, the calendar below only accepts dates within the current week:
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 |
- C1Input/CalendarRanges.js
- C1Input/CalendarRanges.css
- CalendarRangesController.cs
- CalendarRanges.cshtml
1 2 3 4 5 6 7 8 9 10 | // This file locates: "Scripts/Lesson/C1Input/CalendarRanges.js".c1.documentReady(function () { // Calendar with a range restriction var theCalendar = wijmo.Control.getControl('#theCalendar'); var curr = new Date(), firstDay = new Date(curr.setDate(curr.getDate() - curr.getDay())), lastDay = new Date(curr.setDate(curr.getDate() - curr.getDay() + 6)); theCalendar.min = firstDay; theCalendar.max = lastDay;}); |
1 2 3 4 | // This file locates: "Content/css/Lesson/C1Input/CalendarRanges.css"..wj-calendar { max-width: 21em;} |
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: CalendarRanges public ActionResult CalendarRanges() { return View(); } }} |
1 2 3 4 5 6 7 8 9 10 11 | <h1> @Html.Raw(Resources.C1Input.CalendarRanges_Title)</h1><p> @Html.Raw(Resources.C1Input.CalendarRanges_Text1)</p><p> @Html.Raw(Resources.C1Input.CalendarRanges_Text2)</p>@Html.C1().Calendar().Id("theCalendar").ShowHeader(false) |