Calendar
Calendar
Overview
Features
Sample
Valid Range: Jan 1, 2022 to Dec 31, 2023
- FirstDayOfWeek: Represents the first day of the week, the one displayed in the first column of the calendar.
- ShowHeader: Indicating whether the control displays the header area with the current month and navigation buttons.
- MonthView: Indicating whether the calendar displays a month or a year.
- RepeatButtons = True: the calendar buttons (Previous and Next buttons) should act as repeat buttons, firing repeatedly as the button remains pressed.
- ShowYearPicker = True: the calendar should display a list of years when the user clicks the header element on the year calendar.
- MonthCount: The number of months to display within the calendar.
- WeekBefore: The number of weeks to show on the calendar before the current month.
- WeekAfter: The number of weeks to show on the calendar after the current month.
- HandleWheel: Determines whether the user can change the current displayMonth using the mouse wheel.
Settings
Month Count
Week Before
Week After
Description
This sample shows the basic usage of the Calendar control.
Source
IndexController.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcExplorer.Models; namespace MvcExplorer.Controllers { public partial class CalendarController : Controller { public ActionResult Index() { ViewBag.DemoSettings = true; ViewBag.DemoSettingsModel = new ClientSettingsModel { Settings = CreateSettings() }; return View(); } private static IDictionary<string, object[]> CreateSettings() { var settings = new Dictionary<string, object[]> { {"FirstDayOfWeek", Enum.GetValues(typeof(DayOfWeek)).Cast<object>().ToArray()}, {"ShowHeader", new object[]{true, false}}, {"MonthView", new object[]{true, false}}, {"RepeatButtons", new object[]{true, false}}, {"ShowYearPicker", new object[]{true, false}}, {"HandleWheel", new object[]{true, false}} }; return settings; } } }
Index.cshtml
@{ var today = DateTime.Now.Date; var minDate = new DateTime(today.Year - 1, 1, 1); var maxDate = new DateTime(today.Year, 12, 31); var format = Resources.Calendar.Index_DateFormat; ClientSettingsModel settings = ViewBag.DemoSettingsModel; } <div> <label>@Html.Raw(Resources.Calendar.Index_Text1)</label> @(Html.C1().Calendar().Id(settings.ControlId) .Value(today).Min(minDate).Max(maxDate).MonthView(true) .Width(300).RepeatButtons(true).ShowYearPicker(true) .HandleWheel(true) ) </div> <p> <b>@Html.Raw(Resources.Calendar.Index_ValidRange) <span>@minDate.ToString(format)</span> @Html.Raw(Resources.Calendar.Index_To) <span>@maxDate.ToString(format)</span></b> </p> <ul> <li>@Html.Raw(Resources.Calendar.Index_FirstDayOfWeek)</li> <li>@Html.Raw(Resources.Calendar.Index_ShowHeader)</li> <li>@Html.Raw(Resources.Calendar.Index_MonthView)</li> <li>@Html.Raw(Resources.Calendar.Index_RepeatButtons)</li> <li>@Html.Raw(Resources.Calendar.Index_ShowYearPicker)</li> <li>@Html.Raw(Resources.Calendar.Index_MonthsCount)</li> <li>@Html.Raw(Resources.Calendar.Index_WeeksBefore)</li> <li>@Html.Raw(Resources.Calendar.Index_WeeksAfter)</li> <li>@Html.Raw(Resources.Calendar.Index_HandleWheel)</li> </ul> @section Settings{ <div style="padding: 4px 8px"> <p style="display:inline-block; width: 100px">@Html.Raw(Resources.Calendar.Index_MonthCount)</p> @(Html.C1().InputNumber().Width(150).Min(1).Max(10).Step(1).Value(1).Format("n0").OnClientValueChanged("monthCountChange")) </div> <div style="padding: 4px 8px"> <p style="display:inline-block; width: 100px">@Html.Raw(Resources.Calendar.Index_WeekBefore)</p> @(Html.C1().InputNumber().Width(140).Min(0).Max(10).Step(1).Value(0).Format("n0").OnClientValueChanged("weekBeforeChanged")) </div> <div style="padding: 4px 8px"> <p style="display:inline-block; width: 100px">@Html.Raw(Resources.Calendar.Index_WeekAfter)</p> @(Html.C1().InputNumber().Width(140).Min(0).Max(10).Step(1).Value(0).Format("n0").OnClientValueChanged("weekAfterChanged")) </div> } @section Scripts{ <script> function monthCountChange(sender, args) { var calenderControl = wijmo.Control.getControl('#DemoControl'); if (calenderControl != null) { calenderControl.monthCount = sender.value; calenderControl.invalidate(); if (sender.value === 1) { document.querySelector('#DemoControl').style.width = "315px"; } else { document.querySelector('#DemoControl').style.width = "100%"; } } } function weekBeforeChanged(sender, args) { var calenderControl = wijmo.Control.getControl('#DemoControl'); if (calenderControl != null) { calenderControl.weeksBefore = sender.value; calenderControl.invalidate(); } } function weekAfterChanged(sender, args) { var calenderControl = wijmo.Control.getControl('#DemoControl'); if (calenderControl != null) { calenderControl.weeksAfter = sender.value; calenderControl.invalidate(); } } </script> } @section Description{ @Html.Raw(Resources.Calendar.Index_Text0) }
Documentation