Skip to main content Home Creators syncfusion aspnetcore-ui-components-skills syncfusion-aspnetcore-calendars
syncfusion-aspnetcore-calendars Comprehensive guide for implementing Syncfusion ASP.NET Core Calendar components including Calendar, DatePicker, DateRangePicker, DateTimePicker, and TimePicker. Use this skill ALWAYS and immediately when the user asks about any Syncfusion ASP.NET Core calendar, date picker, date range picker, time picker, datetime picker, calendar views, multi-selection, Islamic calendar, date range restriction, week numbers, day cell customization, renderDayCell, date selection, range selection, date formatting, date masking, globalization, localization, strict mode, accessibility, or any related calendar/date/time UI in ASP.NET Core tag helper applications.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-calendarsThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository syncfusion-aspnetcore-grid Implements Syncfusion ASP.NET Core Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.
syncfusion-aspnetcore-pivot-table Use this skill when users ask how to build Syncfusion PivotView/pivot tables in ASP.NET Core apps. Trigger for server integration, data binding (API/DB/remote), OLAP, aggregation, drill-down, grouping, filtering, conditional formatting, exporting (Excel/PDF/CSV), or pivot charts in ASP.NET Core. Not for MVC/Blazor/JS.
syncfusion-aspnetcore-ai-assistview Implement the Syncfusion ASP.NET Core AI AssistView control for interactive AI-powered assistance interfaces. Use this skill when implementing AI assistants, prompt suggestions, custom views, file attachments, markdown responses, customizable templates, regenerable responses, thinking capabilities (chain-of-thoughts), generative UI blocks, Text-to-Speech conversion, Speech-to-Text voice input, or customizing advanced AI conversation UI in ASP.NET Core applications.
Related occupations SOC
Based on SOC occupation classification
name syncfusion-aspnetcore-calendars description Comprehensive guide for implementing Syncfusion ASP.NET Core Calendar components including Calendar, DatePicker, DateRangePicker, DateTimePicker, and TimePicker. Use this skill ALWAYS and immediately when the user asks about any Syncfusion ASP.NET Core calendar, date picker, date range picker, time picker, datetime picker, calendar views, multi-selection, Islamic calendar, date range restriction, week numbers, day cell customization, renderDayCell, date selection, range selection, date formatting, date masking, globalization, localization, strict mode, accessibility, or any related calendar/date/time UI in ASP.NET Core tag helper applications. metadata {"author":"Syncfusion Inc","category":"Calendars","version":"34.1.29"}
Implementing Syncfusion ASP.NET Core Calendars
TimePicker
The TimePicker is an intuitive input component that allows users to select a time value from a popup list or type it directly. It supports time ranges, strict mode, masking, globalization, RTL, accessibility, and rich customization options.
Navigation Guide
Getting Started
📄 Read: references/getting-started.md
NuGet package installation and setup
Tag helper registration and script/style references
Basic TimePicker rendering with <ejs-timepicker>
Setting value, min, and max time
Configuring time format and step interval
TimePickerFor model binding
Time Range
📄 Read: references/time-range.md
Setting min and max time boundaries with
Min
Max
Behavior when value is out-of-range
Two-TimePicker range selection (start/end time)
Enabling/disabling end time based on start time selection
Business hours selection pattern
Strict Mode
Enabling StrictMode to enforce valid time entry
Clamping out-of-range values to min/max
Default (non-strict) mode with error class indication
Null behavior for invalid values in non-strict mode
Globalization
Setting culture with Locale property
Loading CLDR data for non-English cultures
L10n placeholder localization
RTL support with EnableRtl for Arabic, Hebrew
German and Arabic culture examples
Time Masking
Enabling masked input with EnableMask
Mask pattern based on format string
Custom mask placeholder with MaskPlaceholder (hour, minute, second)
Keyboard navigation within masked segments
Style and Appearance
CSS customization using CssClass property
Available CSS class targets (wrapper, icon, popup, list items)
Customizing input, popup button, popup list, hover/active states
Full-screen popup mode on mobile with FullScreenMode
Wrapper height, font-size, background-color overrides
Accessibility
WCAG 2.2 AA compliance details
WAI-ARIA attributes: aria-haspopup, aria-selected, aria-disabled, etc.
Full keyboard interaction table
Screen reader support
RTL, color contrast, mobile device support
How-To Guides
Client-side form validation using FormValidator
CSS customization with custom class names
TimePickerFor rendering with model binding and form POST
API Reference
All properties with types, defaults, and descriptions
All events (Change, Open, Close, Focus, Blur, Cleared, ItemRender, Created, Destroyed)
CSS class reference table
MaskPlaceholder sub-properties
Complete tag helper attribute syntax
Quick Start 1. Install NuGet package:
Install-Package Syncfusion.EJ2.AspNet.Core
2. Register Tag Helper in ~/Pages/_ViewImports.cshtml:
@addTagHelper *, Syncfusion.EJ2
3. Add CSS and script in ~/Pages/Shared/_Layout.cshtml:
<link rel ="stylesheet" href ="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src ="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" > </script >
4. Add Script Manager at end of <body>:
<ejs-scripts > </ejs-scripts >
5. Render the TimePicker:
<ejs-timepicker id="timepicker"></ejs-timepicker>
Common Patterns
TimePicker with Value, Min, and Max @{
var minVal = new DateTime(2022, 05, 07, 1, 00, 00);
var maxVal = new DateTime(2022, 05, 07, 11, 00, 00);
var value = new DateTime(2022, 05, 07, 4, 00, 00);
}
<ejs-timepicker id="timepicker" value="value" min="minVal" max="maxVal"></ejs-timepicker>
Custom Format and Step @{
var value = new DateTime(2022, 05, 07, 4, 00, 00);
}
<ejs-timepicker id="timepicker" format="HH:mm" step="60" value="value"></ejs-timepicker>
Strict Mode <ejs-timepicker id="timepicker"
value="@ViewBag.value"
min="@ViewBag.minVal"
max="@ViewBag.maxVal"
strictMode="true">
</ejs-timepicker>
Masked Input <ejs-timepicker id="timepicker" enableMask="true"></ejs-timepicker>
RTL (Right-to-Left) <ejs-timepicker id="timepicker" placeholder="Select a time" enableRtl="true"></ejs-timepicker>
DatePicker The DatePicker is a graphical user interface control that allows users to select or enter a date value from a calendar popup or by typing directly into the input field. It supports date range restriction, custom formats, masked input, globalization, strict mode, calendar view configuration, RTL, and accessibility.
Navigation Guide
Getting Started
NuGet package installation and setup
Tag helper registration and script/style references
Basic <ejs-datepicker> rendering
Setting value, min, and max dates
DatePickerFor model binding and form POST
Date Range
Setting min and max to restrict the selectable date range
Out-of-range behavior in default vs. strict mode
Error class indication for invalid/out-of-range dates
Updating min/max from code-behind
Strict Mode
strictMode="true": clamps out-of-range input to min/maxstrictMode="false" (default): accepts input, applies error classChoosing the right mode for validation vs. display scenarios
Date Format
format property for custom display format (e.g., yyyy-MM-dd)inputFormats for accepting multiple user-entry formatsCommon format token reference
Date Masking
Enabling masked input with enableMask
Mask pattern derived from format
maskPlaceholder sub-property customization (day, month, year)Keyboard navigation within masked segments
Localized mask placeholder for non-English cultures
Views and Calendar Configuration
start property for initial calendar view (Month/Year/Decade)depth property to restrict navigation depthdayHeaderFormat for day header display (Short/Narrow/Abbreviated/Wide)weekNumber and firstDayOfWeek configuration
Globalization
Setting culture with locale property
Loading CLDR data for non-English cultures
L10n localization for today button and placeholder textRTL support with enableRtl for Arabic, Hebrew
German and Arabic culture examples
Style and Appearance
cssClass for scoped style overridesCSS class reference table (wrapper, icon, popup, day cells)
Customizing input wrapper, icon, and calendar popup
renderDayCell event for per-cell customizationfullScreenMode for mobile devicesfloatLabelType for floating label behavior
Accessibility
WCAG 2.2 AA compliance
WAI-ARIA attributes (aria-expanded, aria-disabled, aria-activedescendant)
Full keyboard interaction tables (input and calendar popup)
Screen reader support and RTL
How-To Guides
Client-side validation with FormValidator
DatePickerFor model binding and server-side form POSTSet placeholder and readonly state
Disable the DatePicker (enabled="false")
Open popup on input focus (openOnFocus or show() method)
Prevent popup from closing (preventDefault)
Customize day header format
API Reference
All properties with types, defaults, and descriptions
All events with descriptions and args
MaskPlaceholder sub-propertiesCSS class reference table
Complete tag helper attribute syntax
Quick Start 1. Install NuGet package:
Install-Package Syncfusion.EJ2.AspNet.Core
2. Register Tag Helper in ~/Pages/_ViewImports.cshtml:
@addTagHelper *, Syncfusion.EJ2
3. Add CSS and script in ~/Pages/Shared/_Layout.cshtml:
<link rel ="stylesheet" href ="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src ="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" > </script >
4. Add Script Manager at end of <body>:
<ejs-scripts > </ejs-scripts >
5. Render the DatePicker:
<ejs-datepicker id="datepicker" placeholder="Select a date"></ejs-datepicker>
Common Patterns
DatePicker with Value, Min, and Max @{
var minDate = new DateTime(2025, 5, 5);
var maxDate = new DateTime(2025, 5, 27);
var value = new DateTime(2025, 5, 15);
}
<ejs-datepicker id="datepicker"
value="@value"
min="@minDate"
max="@maxDate"
placeholder="Select a date">
</ejs-datepicker>
Custom Format <ejs-datepicker id="datepicker"
format="yyyy-MM-dd"
placeholder="YYYY-MM-DD">
</ejs-datepicker>
Strict Mode <ejs-datepicker id="datepicker"
min="@ViewBag.MinDate"
max="@ViewBag.MaxDate"
strictMode="true">
</ejs-datepicker>
Masked Input <ejs-datepicker id="datepicker" enableMask="true"></ejs-datepicker>
DatePickerFor (Model Binding) @model AppModel
<ejs-datepickerfor id="date" for="@Model.Date" placeholder="Select a date">
</ejs-datepickerfor>
RTL (Right-to-Left) <ejs-datepicker id="datepicker" locale="ar" enableRtl="true"></ejs-datepicker>
DateTimePicker The DateTimePicker is a graphical user interface control that allows users to select both a date and a time value from a combined popup (calendar + time list), or type directly into the input field. It supports date-time range restriction, custom formats, input format flexibility, masked input, globalization, strict mode, calendar view configuration, RTL, and accessibility.
Navigation Guide
Getting Started
NuGet package installation and setup
Tag helper registration and script/style references
Basic <ejs-datetimepicker> rendering
Setting value, min, and max date-time
DateTimePickerFor model binding and form POSTopenOnFocus, readonly, and showClearButton options
Date and Time Range
Setting min and max to restrict full date-time range
Setting minTime and maxTime for per-day time restriction
Out-of-range behavior in default vs. strict mode
Priority rules when both min/max and minTime/maxTime are set
Updating range values from code-behind
Strict Mode
strictMode="true": clamps out-of-range input to min/maxstrictMode="false" (default): accepts input, applies error classChoosing the right mode for validation vs. display scenarios
Date Time Format
format property for custom display format (e.g., yyyy-MM-dd hh:mm)timeFormat for time popup list displayinputFormats for accepting multiple user-entry formatsCommon format token reference
Date Time Masking
Enabling masked input with enableMask
Mask pattern derived from format
maskPlaceholder sub-property customization (day, month, year, hour, minute, second)Keyboard navigation within masked segments
Localized mask placeholder for non-English cultures
Globalization
Setting culture with locale property
Loading CLDR data for non-English cultures
L10n localization for today button and placeholder textRTL support with enableRtl for Arabic, Hebrew
German and Arabic culture examples
Style and Appearance
cssClass for scoped style overridesCSS class reference table (wrapper, icons, time popup, calendar popup)
Customizing input wrapper, date/time icons, and popups
renderDayCell event for per-cell customizationfullScreenMode for mobile devicesfloatLabelType for floating label behavior
Accessibility
WCAG 2.2 AA compliance
WAI-ARIA attributes (aria-expanded, aria-disabled, aria-activedescendant)
Full keyboard interaction tables (input, calendar popup, and time popup)
Screen reader support and RTL
How-To Guides
DateTimePickerFor model binding and server-side form POSTDisable the DateTimePicker (enabled="false")
Set placeholder and readonly state
Customize day header format (dayHeaderFormat)
Disable specific dates via renderDayCell
Calendar view configuration (start / depth)
Week number display and state persistence
API Reference
All properties with types, defaults, and descriptions
All events with descriptions
MaskPlaceholder sub-propertiesCSS class reference table
Enum values (CalendarView, DayHeaderFormats, CalendarType, FloatLabelType, WeekRule)
Complete tag helper attribute syntax
Quick Start 1. Install NuGet package:
Install-Package Syncfusion.EJ2.AspNet.Core
2. Register Tag Helper in ~/Pages/_ViewImports.cshtml:
@addTagHelper *, Syncfusion.EJ2
3. Add CSS and script in ~/Pages/Shared/_Layout.cshtml:
<link rel ="stylesheet" href ="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src ="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" > </script >
4. Add Script Manager at end of <body>:
<ejs-scripts > </ejs-scripts >
5. Render the DateTimePicker:
<ejs-datetimepicker id="datetimepicker" placeholder="Select a date and time"></ejs-datetimepicker>
Common Patterns
DateTimePicker with Value, Min, and Max @{
var minVal = new DateTime(2019, 5, 5, 2, 0, 0);
var maxVal = new DateTime(2019, 5, 25, 2, 0, 0);
var value = new DateTime(2019, 5, 10, 10, 0, 0);
}
<ejs-datetimepicker id="datetimepicker"
value="value"
min="minVal"
max="maxVal">
</ejs-datetimepicker>
Custom Format <ejs-datetimepicker id="datetimepicker"
format="yyyy-MM-dd HH:mm"
placeholder="YYYY-MM-DD HH:mm">
</ejs-datetimepicker>
Strict Mode <ejs-datetimepicker id="datetimepicker"
min="@ViewBag.minVal"
max="@ViewBag.maxVal"
strictMode="true">
</ejs-datetimepicker>
Masked Input <ejs-datetimepicker id="datetimepicker" enableMask="true"></ejs-datetimepicker>
DateTimePickerFor (Model Binding) @model BookingModel
<ejs-datetimepicker id="datetimepicker" for="BookingDateTime"></ejs-datetimepicker>
RTL (Right-to-Left) <ejs-datetimepicker id="datetimepicker" locale="ar" enableRtl="true"></ejs-datetimepicker>
DateRangePicker The DateRangePicker is a graphical user interface control that allows users to select a start and end date from a dual-calendar popup or by typing directly into the input field. It supports date range restriction, range span limits, custom formats, input format flexibility, presets, globalization, strict mode, day cell customization, RTL, and accessibility.
Navigation Guide
Getting Started
NuGet package installation and setup
Tag helper registration and script/style references
Basic <ejs-daterangepicker> rendering
Setting startDate and endDate
DateRangePickerFor model binding and form POST
Range Restriction
Setting min and max to restrict selectable dates
Range span with minDays and maxDays
strictMode behavior: clamping vs. error classOut-of-range behavior summary table
Date Format
format property for custom display formatinputFormats array for flexible user entryseparator for custom delimiter between datesCommon format token reference
Customization
renderDayCell event for disabling/styling individual cellsfirstDayOfWeek configurationdayHeaderFormat (Short/Narrow/Abbreviated/Wide)Calendar view start and depth
weekNumber and weekRule configurationPresets for quick range selection
openOnFocus, readonly, allowEdit, showClearButtonenablePersistence for state retention across reloads
Globalization
locale property for culture settingLoading CLDR data for non-English cultures
L10n localization (placeholder, startLabel, endLabel, applyText, cancelText, selectedDays, days, customRange)enableRtl for Arabic, HebrewGerman and Arabic culture examples
Style and Appearance
cssClass for scoped style overridesCSS customization for wrapper, icon, range header, calendar content
Footer Apply/Cancel button customization
floatLabelType for floating label behaviorfullScreenMode for mobile devicesComplete CSS class reference table
Accessibility
WCAG 2.2 AA compliance
WAI-ARIA attributes (aria-expanded, aria-disabled, aria-activedescendant)
Input and calendar keyboard interaction tables
Screen reader support and RTL
How-To Guides
DateRangePickerFor model binding and server-side form POSTSet placeholder text
Disable the DateRangePicker (enabled="false")
Customize day header format
CSS customization with cssClass and CSS class reference
API Reference
All properties with types, defaults, and descriptions
All events with descriptions
Presets sub-properties (label, start, end)
Enum values (CalendarView, DayHeaderFormats, FloatLabelType, WeekRule)
CSS class reference table
Complete tag helper attribute syntax
Quick Start 1. Install NuGet package:
Install-Package Syncfusion.EJ2.AspNet.Core
2. Register Tag Helper in ~/Pages/_ViewImports.cshtml:
@addTagHelper *, Syncfusion.EJ2
3. Add CSS and script in ~/Pages/Shared/_Layout.cshtml:
<link rel ="stylesheet" href ="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src ="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" > </script >
4. Add Script Manager at end of <body>:
<ejs-scripts > </ejs-scripts >
5. Render the DateRangePicker:
<ejs-daterangepicker id="daterangepicker" placeholder="Select a Range"></ejs-daterangepicker>
Common Patterns
DateRangePicker with Start and End Date @{
var startDate = new DateTime(2022, 11, 09);
var endDate = new DateTime(2022, 11, 21);
}
<ejs-daterangepicker id="daterangepicker"
startDate="startDate"
endDate="endDate"
placeholder="Select a Range">
</ejs-daterangepicker>
Min/Max Date Restriction <ejs-daterangepicker id="daterangepicker"
min="@ViewBag.minDate"
max="@ViewBag.maxDate"
placeholder="Enter a Range">
</ejs-daterangepicker>
Range Span Limits <ejs-daterangepicker id="daterangepicker"
minDays="5"
maxDays="10"
placeholder="Select 5–10 days">
</ejs-daterangepicker>
Strict Mode <ejs-daterangepicker id="daterangepicker"
strictMode="true"
min="@ViewBag.minDate"
max="@ViewBag.maxDate"
startDate="@ViewBag.startDate"
endDate="@ViewBag.endDate">
</ejs-daterangepicker>
Custom Format with Input Formats <ejs-daterangepicker id="daterangepicker"
format="dd/MMM/yy"
inputFormats="@(new string[] { "dd/MM/yyyy", "yyyyMMdd" })"
placeholder="DD/MMM/YY">
</ejs-daterangepicker>
DateRangePickerFor (Model Binding) @model DateRangeModel
<form method="post">
<ejs-daterangepicker id="daterangepickerFor" ejs-for="@Model.value">
</ejs-daterangepicker>
<ejs-button id="submitButton" content="Submit"></ejs-button>
</form>
RTL (Right-to-Left) <ejs-daterangepicker id="daterangepicker" locale="ar" enableRtl="true"></ejs-daterangepicker>
Calendar The Calendar is a graphical user interface control that displays a Gregorian (or Islamic) calendar, allowing users to select a date by navigating month, year, and decade views. It supports date range restriction, multi-selection, view configuration, day cell customization, globalization, RTL, accessibility, and rich styling.
Navigation Guide
Getting Started
NuGet package installation and setup
Tag helper registration and script/style references
Basic Calendar rendering with <ejs-calendar>
Setting value, min, and max dates
Common initialization patterns (disabled, persistence, cssClass)
Calendar Views
Available views: Month, Year, Decade
start property for initial view on renderdepth property to restrict navigation depthYear picker and decade picker patterns
View navigation rules and constraints
Date Range
Setting min and max to restrict selectable dates
Out-of-range behavior and value clamping
Dynamic min/max updates via JavaScript
Future-only, past-only, and fixed range examples
Multi Selection
Enabling multi-date selection with isMultiSelection
Setting pre-selected dates with values array
Selecting a full week using the change event
Handling args.values in event handlers
Customization
renderDayCell event to disable or style individual cellsDisabling weekends
Highlighting specific dates with custom CSS or tooltips
Highlighting weekends
dayHeaderFormat: Short, Narrow, Abbreviated, WidefirstDayOfWeek configurationweekNumber and weekRule propertiesCSS class reference table
Globalization
Setting culture with locale property
Loading CLDR data for non-English cultures
L10n localization for Today button textRTL support with enableRtl (Arabic, Hebrew)
Islamic Calendar mode with calendarMode
Style and Appearance
cssClass for scoped appearance overridesBackground, border, hover, title, and nav icon customization
Today button and selected cell CSS
Show dates of other months with CSS
Complete CSS class reference
Accessibility
WCAG 2.2 AA compliance details
WAI-ARIA attributes: aria-label, aria-selected, aria-disabled, aria-activedescendant
Full keyboard interaction table (all navigation keys)
Screen reader support
RTL and mobile device accessibility
How-To Guides
Change the first day of the week (firstDayOfWeek)
Customize day header format (dayHeaderFormat)
Render week numbers (weekNumber)
Select a sequence of dates (full week selection)
Add a clear button to the Calendar footer (created event)
Show dates of other months (CSS approach)
Skip a month on navigation (navigated event + navigateTo)
API Reference
All properties with types, defaults, and descriptions
All events (Change, Created, Destroyed, Navigated, RenderDayCell)
Enum reference (CalendarType, CalendarView, DayHeaderFormats, WeekRule)
CSS class reference table
Complete tag helper attribute syntax
Quick Start 1. Install NuGet package:
Install-Package Syncfusion.EJ2.AspNet.Core
2. Register Tag Helper in ~/Pages/_ViewImports.cshtml:
@addTagHelper *, Syncfusion.EJ2
3. Add CSS and script in ~/Pages/Shared/_Layout.cshtml:
<link rel ="stylesheet" href ="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src ="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" > </script >
4. Add Script Manager at end of <body>:
<ejs-scripts > </ejs-scripts >
<ejs-calendar id="calendar"></ejs-calendar>
Common Patterns
Calendar with Value, Min, and Max @{
var minDate = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 5);
var maxDate = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 27);
var todayDate = DateTime.Now;
}
<ejs-calendar id="calendar"
value="todayDate"
min="minDate"
max="maxDate">
</ejs-calendar>
Year View (start in Year, drill down to Month) <ejs-calendar id="calendar"
start="Syncfusion.EJ2.Calendars.CalendarView.Year"
depth="Syncfusion.EJ2.Calendars.CalendarView.Month">
</ejs-calendar>
Multi-Selection <ejs-calendar id="calendar"
isMultiSelection="true"
values="@ViewBag.multiValues">
</ejs-calendar>
Disable Weekends <ejs-calendar id="calendar" renderDayCell="disableWeekends"></ejs-calendar>
<script>
function disableWeekends(args) {
if (args.date.getDay() === 0 || args.date.getDay() === 6) {
args.isDisabled = true;
}
}
</script>
Week Numbers with RTL <ejs-calendar id="calendar"
weekNumber="true"
locale="ar"
enableRtl="true">
</ejs-calendar>
Islamic Calendar <ejs-calendar id="calendar"
calendarMode="Syncfusion.EJ2.Calendars.CalendarType.Islamic">
</ejs-calendar>
