Learn MVC Client Learn ASP.NET MVC Edition Client

Adding/Removing

Vertical Alignment

Collection View

Loading JSON Dates

Infinite Scrolling

Hierarchical Data

Editable Tree Grids

Unbound Tree Grids

Read-only, Required Columns

Conditional Styling

Dynamic Updates

Multiple Chart Types

Special Chart Types

Candlestick Charts

HighLowOpenClose Charts

Zooming with the Wheel

Grouping and Drill-down

Grouping and Drill-down

Interactive Charts

Filtering and Zooming

Grouping and Drill-down

Basic Properties

Result
Source
Document

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:

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

// This file locates: "Content/css/Lesson/C1Input/CalendarRanges.css".
.wj-calendar {
  max-width: 21em;
}

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

<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)