Syncfusion.AspNetMvc.Calendars 34.1.30

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.

Supported Components

This package includes the following components:

• Calendar
• DatePicker
• DateRangePicker
• DateTimePicker
• TimePicker
• Scheduler
• Gantt Chart

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

• Getting Started
• API Reference
• Live Demos

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

• Getting Started
• API Reference
• Live Demos

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

• Getting Started
• API Reference
• Live Demos

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

• Getting Started

• API Reference

• Live Demos

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

• Getting Started
• API Reference
• Live Demos

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>
    
    
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/34.1.30/fluent2.css" />
    
    
    <script src="https://cdn.syncfusion.com/ej2/34.1.30/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()
    
    
    @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>

    
    @Html.EJS().Calendar("calendar").Render()

    
    @Html.EJS().DatePicker("datepicker").Placeholder("Select Date").Render()

    
    @Html.EJS().DateRangePicker("daterangepicker")
    .Placeholder("Select Date Range")
    .Render()

    
    @Html.EJS().DateTimePicker("datetimepicker")
    .Placeholder("Select DateTime")
    .Render()

    
    @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

• Submit a support ticket

• Community forums

• Feature requests

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA

• Purchase a license

• Start a free 30-day trial

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

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com

sales@syncfusion.com | Toll Free: 1-888-9-DOTNET