This section briefly explains about how to include a simple Scheduler in your Blazor server-side application. You can refer Getting Started with Syncfusion Blazor for Server-Side in Visual Studio 2019 page for the introduction and configuring the common specifications.
To get start quickly with Blazor Scheduler, you can check on this video:
You can use any one of the below standards to install the Syncfusion Blazor library in your application.
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.
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>
Warning: Syncfusion.Blazor
package should not be installed along with individual NuGet packages. Hence, you have to add the above Syncfusion.Blazor.Themes
static web assets (styles) in the application.
Warning: If you prefer the above new standard (individual NuGet packages), then skip this section. Using both old and new standards in the same application will throw ambiguous compilation errors.
NuGet Package Manager
.You can add the client-side style resources through CDN or from NuGet package in the <head>
element of the ~/Pages/_Host.cshtml page.
<head>
....
....
<link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
@*<link href="https://cdn.syncfusion.com/blazor/18.4.35/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.35/styles/bootstrap4.css" rel="stylesheet" />
<script src="https://github.com/Daddoon/Blazor.Polyfill/releases/download/3.0.1/blazor.polyfill.min.js"></script>
...
</head>
Open ~/_Imports.razor
file and import the Syncfusion.Blazor.Schedule
package.
@using Syncfusion.Blazor.Schedule
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();
}
}
}
To enable custom client side resource loading from CRG or CDN. You need to disable resource loading by
AddSyncfusionBlazor(true)
and load the scripts in the HEAD element of the~/Pages/_Host.cshtml
page.
<head>
...
<link href="https://cdn.syncfusion.com/blazor/18.4.35/styles/bootstrap4.css" rel="stylesheet" />
<script src="https://cdn.syncfusion.com/blazor/18.4.35/syncfusion-blazor.min.js"></script>
...
</head>
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 string Location { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { 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.
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) },
new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0) }
};
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public string Location { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { 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 scheduler with the appointments will be rendered as shown in the following image.
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 string Location { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { 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 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,
@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 string Location { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { 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; }
}
}
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 string Location { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { 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; }
}
}