ASP.NET Core Blazor [Preview]
Search results

Getting Started

This section briefly explains how to include simple Calendar control in your ASP.NET Core Razor application. You can refer to ASP .NET Core Razor Components Getting Started documentation page for introduction part of the system requirements and configure the common specifications.

Initialize Calendar component to the Application

Calendar component can be rendered by using the EjsCalendar tag helper in ASP.NET Core Razor application. Add the Syncfusion Essential JS 2 Calendar component in any web page razor in the Pages folder. For example, the Calendar component is added in the ~/Pages/Index.razor page.

The following example shows a basic Calendar component.

    <EjsCalendar id='calendar'></EjsCalendar>

Run the application

After successful compilation of your application, simply press F5 to run the application.

Output be like the below.

Calendar Sample

Setting the value, min, and max dates

After rendering a simple Calendar component by following the above steps, configure the Calendar to set a value within a specific range using its value, min, and max properties.

Here the Calendar allows you to select a date within the range from 5th to 27th of this month.

    <EjsCalendar id='calendar' min='@minDate' max='@maxDate'></EjsCalendar>

    @functions{
        public DateTime minDate {get;set;} = new DateTime(DateTime.Now.Year,DateTime.Now.Month,05);
        public DateTime maxDate {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 27);
          }