Syncfusion® ASP.NET MVC Calendars package includes a rich set of date and time input controls: Calendar, DatePicker, DateRangePicker, DateTimePicker, and TimePicker. These controls offer features like globalization, localization, min/max date restrictions, disabled dates, multiple date selection, custom date rendering, and accessibility support. They are ideal for scheduling, booking, and form-based ASP.NET MVC applications that require reliable date and time input handling.
Install
No framework information available.
README
Syncfusion ASP.NET MVC Calendar Components
A comprehensive suite of ASP.NET MVC calendar and date/time selection components for building modern interactive user interfaces. Includes Calendar, DatePicker, DateRangePicker, DateTimePicker, TimePicker, Scheduler, and Gantt Chart components.
Using this package with an AI coding agent
Before generating Syncfusion code, ask your AI coding agent to run the Syncfusion setup using the following prompt:
Set up this project for Syncfusion before generating code. Fetch and follow the official instructions at https://ai.syncfusion.com, then report the detected platform, installed skill pack, MCP status, and any required licensing action.The setup detects your project's platform and loads the appropriate Syncfusion skill pack. No Syncfusion account or MCP key is required to install or read Syncfusion agent skills.
Platform reference: https://ai.syncfusion.com/aspnet-mvc/llms.txt
Supported Components
This package includes the following components:
ASP.NET MVC Calendar Component
The ASP.NET MVC Calendar Component allows users to select a date from a graphical calendar display with support for multiple view modes.
Key Features:
- Multiple Views: Month, year, and decade view navigation
- Date Range Support: Set minimum and maximum date restrictions
- Disabled Dates: Highlight and disable specific dates
- Keyboard Navigation: Full keyboard support for accessibility
- Globalization: Multi-language and locale support
- Customization: Custom CSS classes and themes
- Events: Selection and change event handlers
Documentation
ASP.NET MVC DatePicker Component
The ASP.NET MVC DatePicker Component provides a text input with a popup calendar for convenient date selection.
Key Features:
- Popup Calendar: Quick date selection with calendar popup
- Text Input: Direct date entry with validation
- Range Constraints: Min and max date range support
- Format Support: Custom date format options
- Keyboard Navigation: Full keyboard accessibility
- Clear Button: Easy date clearing functionality
- Responsive Design: Mobile-friendly interface
Documentation
ASP.NET MVC DateTimePicker Component
The ASP.NET MVC DateTimePicker Component combines a date calendar popup and a time dropdown in a single input control for convenient date-and-time selection.
Key Features:
- Combined Input: Single control for selecting both date and time together
- Popup Calendar + Time List: Inline calendar with scrollable time dropdown
- Range Constraints: Min and max DateTime boundary support
- Custom Formats: Configurable display format (e.g.,
MM/dd/yyyy HH:mm) - Step Interval: Adjustable time interval steps (e.g., every 15 or 30 minutes)
- Keyboard Navigation: Full keyboard and accessibility support
- Clear Button: One-click reset of the selected value
- Strict Mode: Prevents entry of out-of-range values
- Responsive Design: Touch and mobile-friendly interface
Documentation
ASP.NET MVC TimePicker Component
The ASP.NET MVC TimePicker Component provides a text input with a scrollable time list popup for quick and accurate time selection.
Key Features:
- Time List Popup: Scrollable dropdown with configurable time intervals
- Text Input: Direct time entry with automatic validation
- Range Constraints: Min and max time boundary enforcement
- Step Interval: Configurable slot intervals (e.g., 15, 30, or 60 minutes)
- Format Support: 12-hour (
hh:mm a) and 24-hour (HH:mm) format options - Keyboard Navigation: Arrow key scrolling and full accessibility support
- Clear Button: One-click reset of the selected time
- Strict Mode: Prevents entry of values outside the allowed range
- Responsive Design: Touch-optimised for mobile devices
Documentation
ASP.NET MVC DateRangePicker Component
The ASP.NET MVC DateRangePicker Component enables selection of start and end dates using a dual-calendar interface.
Key Features:
- Dual Calendar: Simultaneous display of two calendars
- Range Selection: Easy start and end date selection
- Preset Ranges: Pre-defined date range options
- Disabled Ranges: Disable specific date ranges
- Custom Ranges: Define custom date range presets
- Responsiveness: Adaptive layout for all devices
Documentation
Common Setup
These setup steps are required only once for your application, regardless of which Syncfusion components you use.
1. Install Base NuGet Package
Install-Package Syncfusion.AspNetMvc.Calendars
2. Add Namespace Reference
Edit Web.config under the Views folder and add the Syncfusion.EJ2 namespace:
<namespaces>
<add namespace="Syncfusion.EJ2"/>
</namespaces>
3. Add Stylesheet & Script References
In your layout file (~/Views/Shared/_Layout.cshtml), add the following in the <head> section:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewBag.Title - Syncfusion Application</title>
<!-- Syncfusion ASP.NET MVC controls styles -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/34.2.9/fluent2.css" />
<!-- Syncfusion ASP.NET MVC controls scripts -->
<script src="https://cdn.syncfusion.com/ej2/34.2.9/dist/ej2.min.js"></script>
</head>
4. Register Script Manager
At the end of the <body> tag in your layout file (~/Views/Shared/_Layout.cshtml):
<body>
@RenderBody()
<!-- Syncfusion ASP.NET MVC Script Manager -->
@Html.EJS().ScriptManager()
</body>
Quick Start
Step 1: Add ASP.NET MVC Calendars control
Add the Syncfusion ASP.NET MVC DateRangePicker control in ~/Views/Home/Index.cshtml page.
@page
@model IndexModel
<div class="container mt-5">
<h2>Calendar Components Demo</h2>
<!-- Calendar Component -->
@Html.EJS().Calendar("calendar").Render()
<!-- DatePicker Component -->
@Html.EJS().DatePicker("datepicker").Placeholder("Select Date").Render()
<!-- DateRangePicker Component -->
@Html.EJS().DateRangePicker("daterangepicker")
.Placeholder("Select Date Range")
.Render()
<!-- DateTimePicker Component -->
@Html.EJS().DateTimePicker("datetimepicker")
.Placeholder("Select DateTime")
.Render()
<!-- TimePicker Component -->
@Html.EJS().TimePicker("timepicker")
.Placeholder("Select Time")
.Render()
</div>
Step 2: Run the Application
Press Ctrl+F5 to run the application in your browser.
Support
License
This is a commercial product and requires a paid license for possession or use. Review the Syncfusion EULA
About Syncfusion
Syncfusion provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:
Web: Blazor | ASP.NET MVC | ASP.NET MVC | JavaScript | Angular | React | Vue
Desktop: WinForms | WPF | WinUI
Learn more at www.syncfusion.com
[email protected] | Toll Free: 1-888-9-DOTNET
Changes from Previous Version
Adoption Assessment
A verified publisher signal is available. Assess fit from the package's supported frameworks, license and dependency graph rather than popularity alone.
Related Guides & Workflows
Learn how to evaluate, integrate, or audit this package in your .NET project.