Change Row height of Resources

[Steve]

Hi Team,

How do I reduce the amount of white space above and below the names of resources in Timeline view of the Scheduler as indicated in the included image?

XAML:

@using Dash.Common.Models
@using Syncfusion.Blazor.Schedule

@inject WorkerRepository _workerDb

<SfSchedule TValue="SupportModel" @bind-SelectedDate="@CurrentDate" >
    <ScheduleGroup Resources="@Resources"></ScheduleGroup>
    <ScheduleResources>
        <ScheduleResource
            TItem="WorkerModel"
            TValue="int"
            DataSource="@Workers"
            Field="OwnerId"
            Title="Owner"
            Name="Workers"
            TextField="WorkerName"
            IdField="Id">
        </ScheduleResource>
    </ScheduleResources>
    <ScheduleEventSettings DataSource="@Appointments">
        <Template>
            <table >
                <tr>
                    <td>Participant: </td>
                    <td>@((context as SupportModel).Subject)</td>
                </tr>
               
            </table>
        </Template>
    </ScheduleEventSettings>


    <ScheduleViews>
        <ScheduleView Option="View.TimelineDay"></ScheduleView>
    </ScheduleViews>
</SfSchedule>

Code behind:

public partial class Cal
{
    public DateTime CurrentDate = DateTime.Today;
    public List<SupportModel> Appointments { get; set; } = new List<SupportModel>();
    public List<WorkerModel> Workers { get; set; } = new List<WorkerModel>();

    public string[] Resources { get; set; } = { "Workers" };

    protected override void OnInitialized()
    {
        Workers = _workerDb.GetAllWorkers();
    }
}

Thanks in advance for your help

[Venkateshwaran Saravanakumar]

Hi Steve,

You can achieve your requirement by overriding the default CSS styles of the scheduler as like the shared code snippet below.

[Index.razor]

<SfSchedule CssClass="timeline-resource-grouping"> </SfSchedule>

 

<style>

    .timeline-resource-grouping.e-schedule .e-timeline-view .e-work-cells,

    .timeline-resource-grouping.e-schedule .e-timeline-view .e-resource-cells {

        height: 40px;

    }

 

    .timeline-resource-grouping.e-schedule .e-appointment,

    .timeline-resource-grouping.e-schedule .e-work-cells .e-appointment,

    .timeline-resource-grouping.e-schedule .e-month-header-wrap .e-day.e-title {

        height: 20px;

    }

 

    .timeline-resource-grouping.e-schedule .e-timeline-view .e-appointment .e-subject,

    .timeline-resource-grouping.e-schedule .e-timeline-month-view .e-appointment .e-subject {

        font-size: 10px;

    }

</style>

Regards,

Venkatesh

[Steve]

Thanks for this... it is exactly what I have been trying to do...

Steve.

[Ashokkumar Karuppasamy]

Hi Steve,

Thank you for the update. We're glad to hear that the provided solution meets your requirements. Please let us know if you need any further assistance.

Regards,
Ashok