Calendar
Calendar
Ranges
This sample shows how to use DateSelectionMode.Range selection mode that allows users to select date ranges.
Features
March 2025
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
| 23 | 24 | 25 | 26 | 27 | 28 | 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 | 1 | 2 | 3 | 4 | 5 |
| 2025 | |||
| Jan | Feb | Mar | Apr |
| May | Jun | Jul | Aug |
| Sep | Oct | Nov | Dec |
The current range is: .
Settings
Description
This sample shows how to use DateSelectionMode.Range selection mode that allows users to select date ranges. Selected ranges are defined by the Value and RangeEnd properties. You may specify the minimum and maximum valid range lengths with the RangeMin and RangeMax properties.
RangeMin: The default value for this property is 0, which means there is no minimum value for range lengths.
RangeMax: The default value for this property is 0, which means there is no maximum value for range lengths.
1 2 3 4 5 6 7 8 9 10 11 12 13 | using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class CalendarController : Controller { public ActionResult Ranges() { ViewBag.DemoSettings = true; return View(); } } } |
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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | @{ var today = DateTime.Now.Date; var minDate = new DateTime(today.Year, 1, 1); var maxDate = new DateTime(today.Year, 12, 31); } <div> <c1-calendar id="DemoControl" value="@today" min="@minDate" max="@maxDate" width="300px" range-end="@today" selection-mode="Range" range-end-changed="onClientRangeEndChanged"> </c1-calendar> </div> <p> @Html.Raw(CalendarRes.Ranges_CurrentSelection) <b><span id="dateRange"></span></b>. </p> @section Settings{ <div style="padding: 4px 8px"> <label style="font-weight:700; display:inline-block; width: 100px">@Html.Raw(CalendarRes.Ranges_RangeMin)</></label> <c1-input-number width="150" min="0" max="10" step="1" value="0" format="n0" value-changed="rangeMinChanged"> </c1-input-number> </div> <div style="padding: 4px 8px"> <label style="font-weight:700; display:inline-block; width: 100px">@Html.Raw(CalendarRes.Ranges_RangeMax)</></label> <c1-input-number width="150" min="0" max="10" step="1" value="0" format="n0" value-changed="rangeMaxChanged"> </c1-input-number> </div> } @section Scripts{ <script> function onClientRangeEndChanged(s, e) { if (s.rangeEnd != null) { let el = document.querySelector('#dateRange'); el.textContent = wijmo.format('from {value:d} to {rangeEnd:d}', s); } } function rangeMinChanged(sender, args) { var calenderControl = wijmo.Control.getControl('#DemoControl'); if (calenderControl != null) { calenderControl.rangeMin = sender.value; calenderControl.invalidate(); } } function rangeMaxChanged(sender, args) { var calenderControl = wijmo.Control.getControl('#DemoControl'); if (calenderControl != null) { calenderControl.rangeMax = sender.value; calenderControl.invalidate(); } } </script>} @section Description{ <p>@Html.Raw(CalendarRes.Ranges_Description)</p> <p>@Html.Raw(CalendarRes.Ranges_Description1)</p> <p>@Html.Raw(CalendarRes.Ranges_Description2)</p> } |