Resources and events are not aligned correctly

[Alex]

As can be seen from below, the resources and events are not aligned correctly. 

[Vengatesh Maniraj]

Hi Alex,

Greetings from Syncfusion Support.

We suspect that you might be customizing the scheduler work cells height. By default scheduler, it has been working fine. So could you please share all the customization-related changes with us to provide a prompt solution as soon as possible?

Regards,

Vengatesh 

[Alex]

Hi,

We're using 

<SfSchedule @ref="sfSchedule" EventSettings="ScheduleEventSettings" StartHour="@StartWorkingHours" EndHour="@EndWorkingHours"

                                        TValue="Reservation" Width="100%" Height="90vh" @bind-SelectedDate="@tenantReservationService.CurrentDate" WorkDays="WorkingDays" CurrentView="View.TimelineDay" DateFormat="dddd MMM dd, yyyy" ShowHeaderBar="false" CssClass="schedule-cell-dimension">

<style>

    .schedule-cell-dimension.e-schedule .e-timeline-view .e-date-header-wrap table col,

    .schedule-cell-dimension.e-schedule .e-timeline-view .e-content-wrap table col,

    .schedule-cell-dimension.e-schedule .e-timeline-month-view .e-date-header-wrap table col,

    .schedule-cell-dimension.e-schedule .e-timeline-month-view .e-content-wrap table col {

        width: auto !important;

    }

    .e-schedule .e-timeline-view .e-date-header-wrap, .e-schedule .e-timeline-month-view .e-date-header-wrap {

        font-size: 10px;

    }

</style>

[Satheesh Kumar Balasubramanian]

Hi Alex,

Thanks for your update.

We have prepared sample based on your shared details to reproduce the reported issue. But, we were unable to reproduce the reported issue at our end.

Please find the sample which prepared for your issue - https://www.syncfusion.com/downloads/support/forum/171275/ze/Alignment-1136628266

Please find the video reference - https://www.syncfusion.com/downloads/support/forum/171275/ze/Video-737254492

Could you please share the below details to reproduce the issue? This will help to validate the issue and provide prompt solution at earliest. 

• Replicate the issue in above sample
• Share all schedule related code snippets

Regards,

Satheesh Kumar B

[Alex]

Hi,

Our code is shown below.

<SfSchedule @ref="sfSchedule" StartHour="@StartWorkingHours" EndHour="@EndWorkingHours"

                                        TValue="Reservation" Width="100%" Height="90vh" @bind-SelectedDate="@tenantReservationService.CurrentDate" WorkDays="WorkingDays" CurrentView="View.TimelineDay"

                                        DateFormat="dddd MMM dd, yyyy" ShowHeaderBar="false" CssClass="schedule-cell-dimension">

                                <ScheduleGroup EnableCompactView="false" AllowGroupEdit="true" Resources="@Resources"></ScheduleGroup>

                                <ScheduleResources>

                                    <ScheduleResource TItem="Section" TValue="int" DataSource="Sections" Field="SectionIds" Name="Sections" Title="Sections" TextField="Name" IdField="Id" ColorField="Color" AllowMultiple="false"></ScheduleResource>

                                    <ScheduleResource TItem="Table" TValue="int[]" DataSource="@Tables" Field="TableIds" Name="Tables" Title="Tables" TextField="Title" IdField="Id" ColorField="Color" GroupIDField="SectionId" AllowMultiple="true"></ScheduleResource>

                                </ScheduleResources>

                                <ScheduleEvents Created="ScheduleCreated" @ref="sfEvents" OnDragStart="e => OnDragStart(e)" OnEventClick="OnEventClick"

                                                TValue="Reservation" OnCellClick="e => OnCellClick(e)" Resized="e => OnEventResized(e)" Dragged="e => OnEventDragged(e)"></ScheduleEvents>

                                <ScheduleWorkHours Highlight="true" Start="@StartWorkingHours" End="@EndWorkingHours"></ScheduleWorkHours>

                                <ScheduleEventSettings @ref="ScheduleEventSettings" DataSource="@reservations"></ScheduleEventSettings>

                                <ScheduleTimeScale Interval="60" SlotCount="slotCount"></ScheduleTimeScale>

                                <ScheduleViews>

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

                                        <EventTemplate>

                                            @{

                                                var res = (context as Reservation);

                                                <div class='template-wrap'>

                                                    <div class='subject @GetAllergensColur(res.Dietaries.Count) @res.Class @(res.Online? "online-booking" : string.Empty)' style='background: @GetReservationColour(res.ReservationStatus)'>

                                                        @(res.Guests) Guests @(res.Name)

                                                        @(res.StartTime.ToString("h:mm tt")) - @(res.EndTime.ToString("h:mm tt")) 

                                                        @if (!string.IsNullOrEmpty(res.Notes))

                                                        {

                                                            <i class="oi oi-comment-square"></i>

                                                        }

                                                         

                                                        @if (res.Dietaries.Count > 0)

                                                        {

                                                            <i class="oi oi-warning"></i>

                                                        }

                                                    </div>

                                                </div>

                                            }

                                        </EventTemplate>

                                    </ScheduleView>

                                </ScheduleViews>

                            </SfSchedule>

[Hareesh Balasubramanian]

Hi Alex,

Thanks for the update.

We have prepared a sample based on your shared query “Misalignment between the scheduler work cells and the resource cells” at our end, but unfortunately, we were unable to reproduce your reported problem and the sample can be downloaded from the attached link. We have tried the following ways to replicate the issue at our end.

• We have ensured your reported misalignment issue is due to the height is not properly set between the work cells and resource cells.
• You may not properly adjust the height property for resource cells and work cells. And for further reference, we have adjusted the height for scheduler cells in the attached sample.

<style>

    .schedule-cell-dimension.e-schedule .e-timeline-view .e-resource-cells,

    .schedule-cell-dimension.e-schedule .e-timeline-month-view .e-resource-cells {

        height: 50px;

    }

    .schedule-cell-dimension.e-schedule .e-timeline-view .e-work-cells,

    .schedule-cell-dimension.e-schedule .e-timeline-month-view .e-work-cells {

        height: 50px;

    }

</style>

Kindly try the above solution and if the issue persists still share the below details to validate your reported issue and serve you better.

• Confirm the above sample is properly working at your end?
• If possible, replicate the issue in the above sample.
• Share the issue replicating sample (if possible) to validate further at our end.

We will be happy to assist you..!

Regards,

Hareesh

Attachment: SupportSample_d3543591.zip