Calendar
Calendar
Overview
Features
Sample
Valid Range: Jan 1, 2024 to Dec 31, 2025
- First day of week: Represents the first day of the week, the one displayed in the first column of the calendar.
- Show header: Indicating whether the control displays the header area with the current month and navigation buttons.
- Month view: 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.
- Month count: The number of months to display within the calendar.
- Week before: The number of weeks to show on the calendar before the current month.
- Week after: The number of weeks to show on the calendar after the current month.
Settings
Description
This sample shows the basic usage of the Calendar control.
Source
IndexController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.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}}
};
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 = CalendarRes.Index_DateFormat;
ClientSettingsModel settings = ViewBag.DemoSettingsModel;
}
<div>
<label>Bound Calendar with min & max</label>
<c1-calendar id="@settings.ControlId" value="@today" min="@minDate" max="@maxDate" month-view="true" width="300px">
</c1-calendar>
</div>
<p><b>@Html.Raw(CalendarRes.Index_ValidRange) <span>@minDate.ToString(format)</span> @Html.Raw(CalendarRes.Index_To) <span>@maxDate.ToString(format)</span></b></p>
<ul>
<li>@Html.Raw(CalendarRes.Index_FirstDayOfWeek)</li>
<li>@Html.Raw(CalendarRes.Index_ShowHeader)</li>
<li>@Html.Raw(CalendarRes.Index_MonthView)</li>
<li>@Html.Raw(CalendarRes.Index_RepeatButtons)</li>
<li>@Html.Raw(CalendarRes.Index_ShowYearPicker)</li>
<li>@Html.Raw(CalendarRes.Index_MonthsCount)</li>
<li>@Html.Raw(CalendarRes.Index_WeeksBefore)</li>
<li>@Html.Raw(CalendarRes.Index_WeeksAfter)</li>
</ul>
@section Settings{
<div style="padding: 4px 8px">
<label style="font-weight:700; display:inline-block; width: 100px">@Html.Raw(CalendarRes.Index_MonthCount)</></label>
<c1-input-number width="150px" min="1" max="10" step="1" value="1" format="n0" value-changed="monthCountChange">
</c1-input-number>
</div>
<div style="padding: 4px 8px">
<label style="font-weight:700; display:inline-block; width: 100px"> @Html.Raw(CalendarRes.Index_WeekBefore)</></label>
<c1-input-number width="150px" min="0" max="10" step="1" value="0" format="n0" value-changed="weekBeforeChanged">
</c1-input-number>
</div>
<div style="padding: 4px 8px">
<label style="font-weight:700; display:inline-block; width: 100px">@Html.Raw(CalendarRes.Index_WeekAfter)</></label>
<c1-input-number width="150px" min="0" max="10" step="1" value="0" format="n0" value-changed="weekAfterChanged">
</c1-input-number>
</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(CalendarRes.Index_Text0)
}
Documentation