Syncfusion.AspNetCore.Calendars 34.1.33

Syncfusion® ASP.NET Core Calendar Components

A comprehensive suite of ASP.NET Core 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 Core Calendar Component

The ASP.NET Core 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 Core DatePicker Component

The ASP.NET Core 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 Core DateTimePicker Component

The ASP.NET Core 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 Core TimePicker Component

The ASP.NET Core 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 Core DateRangePicker Component

The ASP.NET Core 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

All Syncfusion ASP.NET Core controls share the same foundational setup steps:

1. Install NuGet Package

Install-Package Syncfusion.AspNetCore.Calendars

2. Register Tag Helper

Add the following to ~/Pages/_ViewImports.cshtml or ~/Views/_ViewImports.cshtml:

@addTagHelper *, Syncfusion.AspNetCore.Base
@addTagHelper *, Syncfusion.AspNetCore.Calendars

3. Add Stylesheet & Script References

In your layout file (~/Pages/Shared/_Layout.cshtml):

<head>
    
    <link rel="stylesheet" href="_content/Syncfusion.AspNetCore.Themes/styles/fluent2.css" />
    

    
    <script src="_content/Syncfusion.AspNetCore.Calendars/scripts/sf-calendar.min.js"></script>

    
    <script src="_content/Syncfusion.AspNetCore.Calendars/scripts/sf-datepicker.min.js"></script>

    
    <script src="_content/Syncfusion.AspNetCore.Calendars/scripts/sf-daterangepicker.min.js"></script>

    
    <script src="_content/Syncfusion.AspNetCore.Calendars/scripts/sf-datetimepicker.min.js"></script>

    
    <script src="_content/Syncfusion.AspNetCore.Calendars/scripts/sf-timepicker.min.js"></script>
</head>

4. Register Script Manager

In your layout file (~/Pages/Shared/_Layout.cshtml), At the end of your <body> tag:

<ejs-scripts></ejs-scripts>

Quick Start

Step 1: Create a Model

using System;

public class CalendarDemoModel
{
    public DateTime SelectedDate { get; set; }
    public DateTime? StartDate { get; set; }
    public DateTime? EndDate { get; set; }
}

Step 2: Create a PageModel

Create ~/Pages/Index.cshtml.cs:

using Microsoft.AspNetCore.Mvc.RazorPages;
using System;

public class IndexModel : PageModel
{
    public CalendarDemoModel CalendarDemo { get; set; } = new CalendarDemoModel();

    public void OnGet()
    {
        CalendarDemo.SelectedDate = DateTime.Now;
        CalendarDemo.StartDate = DateTime.Now;
        CalendarDemo.EndDate = DateTime.Now.AddDays(7);
    }

    public void OnPostSelectDate()
    {
        // Handle date selection
    }
}

Step 3: Create the View

Create ~/Pages/Index.cshtml:

@page
@model IndexModel

<div class="container mt-5">
    <h2>Calendar Components Demo</h2>

    
    <div class="mb-4">
        <h5>Calendar</h5>
        <ejs-calendar id="calendar" value="DateTime.Now"></ejs-calendar>
    </div>

    
    <div class="mb-4">
        <h5>DatePicker</h5>
        <ejs-datepicker id="datepicker" placeholder="Choose a Date"></ejs-datepicker>
    </div>

    
    <div class="mb-4">
        <h5>DateRangePicker</h5>
        <ejs-daterangepicker id="daterangepicker" placeholder="Select a range"></ejs-daterangepicker>
    </div>

    
    <div class="mb-4">
        <h5>DateTimePicker</h5>
        <ejs-datetimepicker id="datetimepicker" placeholder="Select a date and time"></ejs-datetimepicker>
    </div>

    
    <div class="mb-4">
        <h5>TimePicker</h5>
        <ejs-timepicker id="timepicker" placeholder="Select a time"></ejs-timepicker>
    </div>
</div>

Step 4: 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 Core | 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