Search results

Getting Started

This section briefly explains about how to include a simple Scheduler in your Blazor client-side application. You can refer Getting Started with Syncfusion Blazor for Client-side in Visual Studio 2019 Preview page for the introduction and configuring the common specifications.

Importing Syncfusion Blazor component in the application

  1. Install Syncfusion.EJ2.Blazor NuGet package to the application by using the NuGet Package Manager. Please ensure to check the Include prerelease option.

  2. You can add the client-side resources through CDN or local npm package in the <head> element of the ~/wwwroot/index.html page.

   <head>
       ....
       ....
       <link href="https://cdn.syncfusion.com/ej2/17.3.29/material.css" rel="stylesheet" />
       <script src="https://cdn.syncfusion.com/ej2/17.3.29/dist/ej2.min.js"></script>
   </head>

Adding component package to the application

Open ~/_Imports.razor file and import the Syncfusion.EJ2.Blazor.Schedule package.

    @using Syncfusion.EJ2.Blazor
    @using Syncfusion.EJ2.Blazor.Schedule

Initialize the Scheduler component

The Scheduler component can be rendered on the page by defining the EjsSchedule tag helper. Add the following code example to your index.razor page which is available within the ~/Pages/ folder, to initialize the Scheduler component.

@using Syncfusion.EJ2.Blazor.Schedule

<EjsSchedule TValue=object></EjsSchedule>

The output of the above code will display the empty scheduler as shown in the following image.

Empty Scheduler

Populating appointments

  • To populate the Scheduler with appointments, bind the event data to it by assigning the DataSource property under ScheduleEventSettings.
@using Syncfusion.EJ2.Blazor.Schedule

<EjsSchedule TValue="AppointmentData" Height="650px" SelectedDate="@new DateTime((2018, 2, 14))">
    <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
</EjsSchedule>

@code{
    List<AppointmentData> DataSource = new List<AppointmentData>
    {
        new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2018, 2, 13, 10, 0, 0) , EndTime = new DateTime(2018, 2, 13, 12, 0, 0) },
        new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2018, 2, 15, 10, 0, 0) , EndTime = new DateTime(2018, 2, 15, 12, 0, 0) }
    };
    public class AppointmentData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
    }
}

The scheduler with the appointments will be rendered as shown in the following image.

Scheduler with appointments

Setting date

The Scheduler usually displays the system date as its current date. To change the current date of Scheduler with specific date, define the SelectedDate property.

@using Syncfusion.EJ2.Blazor.Schedule

<EjsSchedule TValue="AppointmentData" Height="650px" SelectedDate="@(new DateTime(2019, 1, 10))">
</EjsSchedule>
@code{
    public class AppointmentData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
    }
}

Setting view

The Scheduler displays Week view by default. To change the current view, define the applicable view name to the CurrentView property. The applicable view names are,

  • Day
  • Week
  • WorkWeek
  • Month
  • Agenda
  • MonthAgenda
  • TimelineDay
  • TimelineWeek
  • TimelineWorkWeek
  • TimelineMonth
@using Syncfusion.EJ2.Blazor.Schedule

<EjsSchedule TValue="AppointmentData" Height="650px" CurrentView="View.Month">
</EjsSchedule>
@code{
    public class AppointmentData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
    }
}

Individual view customization

Each individual Scheduler views can be customized with its own options such as setting different start and end hour on Week and Work Week views, whereas hiding the weekend days on Month view alone which can be achieved by defining the ScheduleView.

@using Syncfusion.EJ2.Blazor.Schedule

<EjsSchedule TValue="AppointmentData" Height="650px" SelectedDate="@(new DateTime(2018, 2, 13))">
    <ScheduleViews>
        <ScheduleView Option="View.Week" StartHour="07:00" EndHour="15:00"></ScheduleView>
        <ScheduleView Option="View.WorkWeek" StartHour="10:00" EndHour="18:00"></ScheduleView>
        <ScheduleView Option="View.Month" ShowWeekend="false"></ScheduleView>
    </ScheduleViews>
</EjsSchedule>
@code{
    public class AppointmentData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
    }
}

See Also

  1. Getting Started with Syncfusion Blazor for Client-Side in .NET Core CLI
  2. Getting Started with Syncfusion Blazor for Server-side in Visual Studio 2019 Preview
  3. Getting Started with Syncfusion Blazor for Server-Side in .NET Core CLI