Calendar

Calendar

Overview

This sample shows the basic usage of the Calendar control.

Features

Overview

Validation

Ranges

Sample SourceDocumentation

Bound Calendar with min & max

July 2025

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

Month Count

Week Before

Week After

Description

This sample shows the basic usage of the Calendar control.

IndexController.cs Index.cshtml

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}}
            };
 
            return settings;
        }
    }
}

@{
    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)
    )
</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>
</ul>
 
@section Settings{
    <div style="padding: 4px 8px">
        <label style="font-weight:700; display:inline-block; width: 100px">@Html.Raw(Resources.Calendar.Index_MonthCount)</></label>
        @(Html.C1().InputNumber().Width(150).Min(1).Max(10).Step(1).Value(1).Format("n0").OnClientValueChanged("monthCountChange"))
    </div>
    <div style="padding: 4px 8px">
        <label style="font-weight:700; display:inline-block; width: 100px">@Html.Raw(Resources.Calendar.Index_WeekBefore)</></label>
        @(Html.C1().InputNumber().Width(140).Min(0).Max(10).Step(1).Value(0).Format("n0").OnClientValueChanged("weekBeforeChanged"))
    </div>
    <div style="padding: 4px 8px">
        <label style="font-weight:700; display:inline-block; width: 100px">@Html.Raw(Resources.Calendar.Index_WeekAfter)</></label>
        @(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)
}

Sun	Mon	Tue	Wed	Thu	Fri	Sat
		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

2025
Jan	Feb	Mar	Apr
May	Jun	Jul	Aug
Sep	Oct	Nov	Dec

New Controls >

Popular Controls >

Data Management >

Data Visualization >

Navigation and Layout >

Scheduling >

Documents >

Input and Editing >

Tutorials >

New Features >

Getting Started Guides >

Sample Applications >

Data Management

Data Visualization

Navigation and Layout

Scheduling

Documents

Input and Editing

Tutorials

New Features

Getting Started Guides

Sample Applications

Overview

Features

Settings

Description