Blazor Scheduler - Quick Getting Started Guide
What is Blazor Scheduler Control?
The Blazor Scheduler Control is a fully featured event calendar component that helps users manage their time efficiently. It facilitates easy resource scheduling, rescheduling events or appointments through editor pop-ups, drag and drop, and resizing actions.
In this knowledge base, we are going to provide details about how to include a Blazor Scheduler Control in your Blazor Server-Side and Client-Side application. You can refer to our Getting Started with Blazor Server-Side Scheduler and Blazor WebAssembly Scheduler documentation pages for configuration specifications.
Importing Syncfusion Blazor component in the application
You can use any one of the below standards to install the Syncfusion Blazor library in your application.
Using Syncfusion Blazor individual NuGet Packages [New standard]
Starting with Volume 4, 2020 (v18.4.0.30) release, Syncfusion provides individual NuGet packages for our Syncfusion Blazor components. We highly recommend this new standard for your Blazor production applications. Refer to this section to know the benefits of the individual NuGet packages.
- Install Syncfusion.Blazor.Schedule NuGet package to the application using the NuGet Package Manager.
- You can add the client-side style resources from NuGet package in the <head> element of the ~/Pages/_Host.cshtml page.
<head> .... .... <link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" /> </head>
Using Syncfusion.Blazor NuGet Package [Old standard]
- Install Syncfusion.Blazor NuGet package to the application using the NuGet Package Manager.
- You can add the client-side style resources from NuGet package in the <head> element of the ~/Pages/_Host.cshtml page.
<head> .... .... <link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" /> </head>
<head> .... .... <link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" /> @*<link href="https://cdn.syncfusion.com/blazor/18.4.42/styles/bootstrap4.css" rel="stylesheet" />*@ </head>
For Internet Explorer 11 kindly refer the polyfills. Refer the documentation for more information.
<head> ... <link href="https://cdn.syncfusion.com/blazor/18.4.42/styles/bootstrap4.css" rel="stylesheet" /> <script src="https://github.com/Daddoon/Blazor.Polyfill/releases/download/3.0.1/blazor.polyfill.min.js"></script> ... </head>
Adding component package to the application
Open ~/_Imports.razor file and import the Syncfusion.Blazor.Schedule package.
@using Syncfusion.Blazor.Schedule
Add SyncfusionBlazor service in Startup file
Open the Startup.cs file and add services required by Syncfusion components using services.AddSyncfusionBlazor() method. Add this method in the ConfigureServices function as follows.
using Syncfusion.Blazor;
namespace BlazorApplication
{
public class Startup
{
....
....
public void ConfigureServices(IServiceCollection services)
{
....
....
services.AddSyncfusionBlazor();
}
}
}
Initialize the Scheduler component
The Scheduler component can be rendered on the page by defining the SfSchedule 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.Blazor.Schedule
<SfSchedule TValue=AppointmentData></SfSchedule>
@code {
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
public string Location { get; set; }
public string Description { get; set; }
public bool IsAllDay { get; set; }
public string RecurrenceRule { get; set; }
public string RecurrenceException { get; set; }
public Nullable<int> RecurrenceID { get; set; }
}
}
The output of the above code will display the empty scheduler as shown in the following image.
Populating appointments
To populate the Scheduler with appointments, bind the event data to it by assigning the DataSource property under ScheduleEventSettings.
@using Syncfusion.Blazor.Schedule
<SfSchedule TValue="AppointmentData" Height="650px" @bind-SelectedDate="@CurrentDate">
<ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
</SfSchedule>
@code{
DateTime CurrentDate = new DateTime(2020, 2, 14);
List<AppointmentData> DataSource = new List<AppointmentData>
{
new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 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; }
….
}
}
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 two-way binding for SelectedDate property.
@using Syncfusion.Blazor.Schedule
<SfSchedule TValue="AppointmentData" Height="650px" @bind-SelectedDate="@CurrentDate">
</SfSchedule>
@code{
DateTime CurrentDate = new DateTime(2020, 1, 10);
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 two-way binding of CurrentView property. The applicable view names are,
- Day
- Week
- WorkWeek
- Month
- Agenda
- MonthAgenda
- TimelineDay
- TimelineWeek
- TimelineWorkWeek
- TimelineMonth
- TimelineYear
- Year
@using Syncfusion.Blazor.Schedule
<SfSchedule TValue="AppointmentData" Height="650px" @bind-CurrentView="@CurrentView">
</SfSchedule>
@code{
View CurrentView = View.Month;
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.Blazor.Schedule
<SfSchedule TValue="AppointmentData" Height="650px" @bind-SelectedDate="@CurrentDate">
<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" MaxEventsPerRow="2" ShowWeekend="false"></ScheduleView>
</ScheduleViews>
</SfSchedule>
@code{
DateTime CurrentDate = new DateTime(2020, 2, 13);
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
…
}
}
Conclusion
I hope you enjoyed learning about the quick getting started with the Blazor Scheduler Control. You can explore the runnable sample of getting started with Blazor Scheduler from this GitHub location.
You can refer to our Blazor Scheduler’s feature tour page to know about its other groundbreaking feature representations. You can also explore our Blazor Scheduler example to understand how to present and manipulate data.
For current customers, you can check out our Blazor components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-days free trial to check out our Blazor Scheduler and other Blazor components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
