syncfusion-aspnetcore-calendars

# 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](references/timepicker-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](references/timepicker-range.md) - Setting min and max time boundaries with `Min` and `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 📄 **Read:** [references/strict-mode.md](references/timepicker-strict-mode.md) - 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 📄 **Read:** [references/globalization.md](references/timepicker-globalization.md) - 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 📄 **Read:** [references/time-masking.md](references/timepicker-masking.md) - 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 📄 **Read:** [references/style-appearance.md](references/timepicker-style-appearance.md) - 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 📄 **Read:** [references/accessibility.md](references/timepicker-accessibility.md) - 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 📄 **Read:** [references/how-to.md](references/timepicker-how-to.md) - Client-side form validation using FormValidator - CSS customization with custom class names - TimePickerFor rendering with model binding and form POST #### API Reference 📄 **Read:** [references/api.md](references/timepicker-api.md) - 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`: ```cshtml @addTagHelper *, Syncfusion.EJ2 ``` **3. Add CSS and script** in `~/Pages/Shared/_Layout.cshtml`: ```html <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>`: ```html <ejs-scripts></ejs-scripts> ``` **5. Render the TimePicker:** ```cshtml <ejs-timepicker id="timepicker"></ejs-timepicker> ``` --- ### Common Patterns #### TimePicker with Value, Min, and Max ```cshtml @{ 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 ```cshtml @{ 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 ```cshtml <ejs-timepicker id="timepicker" value="@ViewBag.value" min="@ViewBag.minVal" max="@ViewBag.maxVal" strictMode="true"> </ejs-timepicker> ``` #### Masked Input ```cshtml <ejs-timepicker id="timepicker" enableMask="true"></ejs-timepicker> ``` #### RTL (Right-to-Left) ```cshtml <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 📄 **Read:** [references/datepicker-getting-started.md](references/datepicker-getting-started.md) - 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 📄 **Read:** [references/datepicker-date-range.md](references/datepicker-date-range.md) - 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 📄 **Read:** [references/datepicker-strict-mode.md](references/datepicker-strict-mode.md) - `strictMode="true"`: clamps out-of-range input to `min`/`max` - `strictMode="false"` (default): accepts input, applies error class - Choosing the right mode for validation vs. display scenarios #### Date Format 📄 **Read:** [references/datepicker-date-format.md](references/datepicker-date-format.md) - `format` property for custom display format (e.g., `yyyy-MM-dd`) - `inputFormats` for accepting multiple user-entry formats - Common format token reference #### Date Masking 📄 **Read:** [references/datepicker-date-masking.md](references/datepicker-date-masking.md) - 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 📄 **Read:** [references/datepicker-view.md](references/datepicker-view.md) - `start` property for initial calendar view (Month/Year/Decade) - `depth` property to restrict navigation depth - `dayHeaderFormat` for day header display (Short/Narrow/Abbreviated/Wide) - `weekNumber` and `firstDayOfWeek` configuration #### Globalization 📄 **Read:** [references/datepicker-globalization.md](references/datepicker-globalization.md) - Setting culture with `locale` property - Loading CLDR data for non-English cultures - `L10n` localization for today button and placeholder text - RTL support with `enableRtl` for Arabic, Hebrew - German and Arabic culture examples #### Style and Appearance 📄 **Read:** [references/datepicker-style-appearance.md](references/datepicker-style-appearance.md) - `cssClass` for scoped style overrides - CSS class reference table (wrapper, icon, popup, day cells) - Customizing input wrapper, icon, and calendar popup - `renderDayCell` event for per-cell customization - `fullScreenMode` for mobile devices - `floatLabelType` for floating label behavior #### Accessibility 📄 **Read:** [references/datepicker-accessibility.md](references/datepicker-accessibility.md) - 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 📄 **Read:** [references/datepicker-how-to.md](references/datepicker-how-to.md) - Client-side validation with `FormValidator` - `DatePickerFor` model binding and server-side form POST - Set 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 📄 **Read:** [references/datepicker-api.md](references/datepicker-api.md) - All properties with types, defaults, and descriptions - All events with descriptions and args - `MaskPlaceholder` sub-properties - 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`: ```cshtml @addTagHelper *, Syncfusion.EJ2 ``` **3. Add CSS and script** in `~/Pages/Shared/_Layout.cshtml`: ```html <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>`: ```html <ejs-scripts></ejs-scripts> ``` **5. Render the DatePicker:** ```cshtml <ejs-datepicker id="datepicker" placeholder="Select a date"></ejs-datepicker> ``` --- ### Common Patterns #### DatePicker with Value, Min, and Max ```cshtml @{ 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 ```cshtml <ejs-datepicker id="datepicker" format="yyyy-MM-dd" placeholder="YYYY-MM-DD"> </ejs-datepicker> ``` #### Strict Mode ```cshtml <ejs-datepicker id="datepicker" min="@ViewBag.MinDate" max="@ViewBag.MaxDate" strictMode="true"> </ejs-datepicker> ``` #### Masked Input ```cshtml <ejs-datepicker id="datepicker" enableMask="true"></ejs-datepicker> ``` #### DatePickerFor (Model Binding) ```cshtml @model AppModel <ejs-datepickerfor id="date" for="@Model.Date" placeholder="Select a date"> </ejs-datepickerfor> ``` #### RTL (Right-to-Left) ```cshtml <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 📄 **Read:** [references/datetimepicker-getting-started.md](references/datetimepicker-getting-started.md) - 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 POST - `openOnFocus`, `readonly`, and `showClearButton` options #### Date and Time Range 📄 **Read:** [references/datetimepicker-date-time-range.md](references/datetimepicker-date-time-range.md) - 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 📄 **Read:** [references/datetimepicker-strict-mode.md](references/datetimepicker-strict-mode.md) - `strictMode="true"`: clamps out-of-range input to `min`/`max`