How to display the resource in a vertical manner in Blazor Scheduler

[Syncfusion Support]

Answer:

In Blazor Scheduler to display the resource in a vertical manner, we need to configure the timeline view along with resources like below code snippet.

@using Syncfusion.EJ2.Blazor.Schedule

<EjsSchedule TValue="AppointmentData" Width="100%" Height="650px" SelectedDate="@(new DateTime(2020, 4, 4))">

<ScheduleGroup Resources="@Resources">ScheduleGroup>

<ScheduleResources>

<ScheduleResource DataSource="@DoctorsData" Field="DoctorId" Title="Doctor Name" Name="Doctors" TextField="Text"

IdField="Id" ColorField="Color" TValue="ResourceData">ScheduleResource>

ScheduleResources>

<ScheduleTemplates>

<ResourceHeaderTemplate>

@{

var doctorsData = (context as AppointmentData).ResourceData as ResourceData;

<div class='template-wrap'>

<div class="resource-image"><img src="https://ej2.syncfusion.com/demos/src/schedule/images/@(((context as AppointmentData).ResourceData as ResourceData).Image).png" />div>

<div class="resource-details">

<div class="resource-name">@(doctorsData.Text)div>

<div class="resource-designation">@(doctorsData.Designation)div>

div>

div>

}

ResourceHeaderTemplate>

ScheduleTemplates>

<ScheduleViews>

<ScheduleView Option="View.TimelineDay">ScheduleView>

<ScheduleView Option="View.TimelineMonth">ScheduleView>

ScheduleViews>

EjsSchedule>

// remaining CSS and data code

}