Calendar
Calendar
Overview
This sample shows the basic usage of the Calendar control.
Features
January 2025
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
29 | 30 | 31 | 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 |
2025 | |||
Jan | Feb | Mar | Apr |
May | Jun | Jul | Aug |
Sep | Oct | Nov | Dec |
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
First Day Of Week: Sunday
Show Header: True
Month View: True
Repeat Buttons: True
Show Year Picker: True
Description
This sample shows the basic usage of the Calendar control.
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 32 33 34 35 36 | 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; } } } |
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | @ { 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) } |