Calendar

Calendar

Overview

This sample shows the basic usage of the Calendar control.

Features

Overview

Validation

Ranges

Sample SourceDocumentation

Bound Calendar with Min & Max

April 2025

Valid Range: Jan 1, 2024 to Dec 31, 2025

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

MonthCount

WeekBefore

WeekAfter

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 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}}, 
                {"HandleWheel", 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 = CalendarRes.Index_DateFormat; 
  
    ClientSettingsModel settings = ViewBag.DemoSettingsModel; 
} 
  
<div> 
    <label>Bound Calendar with Min &amp; 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> 
    <li>@Html.Raw(CalendarRes.Index_HandleWheel)</li> 
</ul> 
  
@section Settings{ 
    <div style="padding: 4px 8px"> 
        <p style="display:inline-block; width: 100px">@Html.Raw(CalendarRes.Index_MonthCount)</p> 
        <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"> 
        <p style="display:inline-block; width: 100px"> @Html.Raw(CalendarRes.Index_WeekBefore)</p> 
        <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"> 
        <p style="display:inline-block; width: 100px">@Html.Raw(CalendarRes.Index_WeekAfter)</p> 
        <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) 
} 

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

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

New Controls >

Popular Controls >

Data Management >

Data Visualization >

Navigation and Layout >

Document >

Scheduling >

Input and Editing >

Tutorials >

New Features >

Getting Started Guides >

Sample Applications >

Data Management

Data Visualization

Navigation and Layout

Document

Scheduling

Input and Editing

Tutorials

New Features

Getting Started Guides

Sample Applications

Overview

Features

Settings

Description