Setting custom height for the event cells in SfSchedule

Hello, I have trouble with finding how to set custom height for the cells. Here's my code:


    <SfSchedule @ref=scheduleRef TValue="Pass" Height="95vh" SelectedDateChanged="OnDateChanged" CurrentView="View.Week" CurrentViewChanged="OnViewChanged" FirstDayOfWeek="1" WorkDays="@_workingDays" EnableAutoRowHeight="true">


        <ScheduleTemplates>
        </ScheduleTemplates>


        <ScheduleEventSettings DataSource="@Passes">
            <Template>
                @{
                    var pass = context as Pass;
                }
                <div class="w-100" style="border-left: 5px solid; border-radius: 5px; border-left-color: @pass.StatusColorBg; background-color: white; color: black; padding-left: 5px">
                    <div>@pass.ID</div>
                    <div>textrow1</div>
                    <div>textrow2</div>
                    <div>textrow3</div>
                    <div>textrow4</div>
                    <div>textrow5</div>
                </div>
            </Template>
        </ScheduleEventSettings>
        <ScheduleTimeScale Enable=false></ScheduleTimeScale>


        <ScheduleViews>
            <ScheduleView Option="View.Week" MaxEventsPerRow="10"></ScheduleView>
        </ScheduleViews>
    </SfSchedule>

I have set


<ScheduleTimeScale Enable=false></ScheduleTimeScale>
to false because i don't need to see the exact timing of the events, just their information and that they are assigned for the stated day, however the template i need is larger than the fixed height of the card and the result is this:

Image_6045_1737045814904

How can i change the row height so that all textrows are visible?

Thanks in advance!


1 Reply 1 reply marked as answer

SR Swathi Ravi Syncfusion Team January 17, 2025 11:49 AM UTC

Hi George,

 

Thank you for reaching out!

 

You can resolve the issue by adjusting the height of the appointments, as shown in below shared snippets..

 

<style>

    .e-schedule .e-vertical-view.e-timescale-disable .e-appointment {

        height: 115px;

    }

</style>

 

 

Sample: https://blazorplayground.syncfusion.com/LXByZCMwJhyfxDxm

Regards,

Swathi

 


Marked as answer
Loader.
Up arrow icon