Calendar

The Calendar control displays a one-month calendar and allows users to select a date.

Use the value property to get or set the currently selected date. Use the min and max properties to restrict the range of dates that the user can select. Use the selectionMode property to determine whether users should be allowed to select days, months, or no values at all.

May 2025
SunMonTueWedThuFriSat
27 28 29 30 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 6 7
The current date is Thursday, May 15, 2025.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// This file locates: "Scripts/Lesson/C1Input/Calendar.js".
c1.documentReady(function () {
    var theCalendar = wijmo.Control.getControl('#theCalendar');
    theCalendar.valueChanged.addHandler(function (s, e) {
        showCurrentDate();
    });
 
    // show the currently selected date
    function showCurrentDate() {
        var el = document.getElementById('theCalendarOutput');
        el.textContent = wijmo.Globalize.format(theCalendar.value, 'D');
    }
    showCurrentDate();
});
1
2
3
4
// This file locates: "Content/css/Lesson/C1Input/Calendar.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: Calendar
        public ActionResult Calendar()
        {
            return View();
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<h1>
    @Html.Raw(Resources.C1Input.Calendar_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Input.Calendar_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Input.Calendar_Text2)
</p>
@Html.C1().Calendar().Id("theCalendar")
<div>
    @Html.Raw(Resources.C1Input.Calendar_Text3)
</div>