TimelineWeek gap when the width changes and ScheduleViewTimeScale is disabled

[Julien Barach]

Hi,

We use the a scheduler with a TimelineWeek with this settings :

<ScheduleView Option="Syncfusion.Blazor.Schedule.View.TimelineWeek">

<ScheduleViewTimeScale Enable="false" />

</ScheduleView>

But whenever the width of the container changes, all the events have get a gap so they are not correctly placed in the timeline.

This bug does not occur when the ScheduleViewTimeScale is enabled (which is true by default but we need to disable it).

Please see the repro : TimelineWeek works, TimeScale Disabled creates gaps : https://blazorplayground.syncfusion.com/hXVfsirLSJCbUlVc

Regards,

[Vijay Ravi]

Hi Julien Barach,
 

To resolve the mentioned issue, you can call the RefreshEventsAsync method of the SfSchedule component when the toggle button is clicked, you need to get a reference to the SfSchedule component and call the method in the onclick event handler as shown in the below shared code snippet. Refer the modified sample for your reference.

[index.razor]
 

 

<button @onclick="ToggleMenu">Toggle menu</button>

<div style="display:flex;">

    <div style="@($"display:{(isMenuVisible ? "block" : "none")};width:100px;background:purple;")">

        Menu

    </div>

    <div style="width:100%;">

        <SfSchedule @ref="scheduleRef" TValue="AppointmentData" Height="650px" @bind-SelectedDate="@CurrentDate">

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

            <ScheduleViews>

                <ScheduleView Option="Syncfusion.Blazor.Schedule.View.TimelineWeek"></ScheduleView>

                <ScheduleView Option="Syncfusion.Blazor.Schedule.View.TimelineWeek" DisplayName="TimeScale Disabled">

                    <ScheduleViewTimeScale Enable="false" />

                </ScheduleView>

            </ScheduleViews>

        </SfSchedule>

    </div>

</div>

@code {

    private bool isMenuVisible = true;

    private SfSchedule<AppointmentData> scheduleRef;

    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; }

    }

    private async Task ToggleMenu()

    {

        isMenuVisible = !isMenuVisible;

        await scheduleRef.RefreshEventsAsync();

    }

}

Sample link: https://blazorplayground.syncfusion.com/LZBziCByBtjppPOn

RefreshEventsAsync api: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_RefreshEventsAsync

Output screenshot:
 

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay

[Julien Barach]

Thanks for this workaround.

But that's not ideal.

First : It will trigger an unnecessary API call to get the events.

Second : Let's imagine there are some css transitions on the menu, you will need to call RefreshEventsAsync after some delay to wait the definitive width.

Why does it become necessary when ScheduleViewTimeScale is disabled ?

Why can't you make it works the same way when ScheduleViewTimeScale Enable="true" ?

It seems that it's the same use case, you successfully manage events position by default, what prevents you to do the same when ScheduleViewTimeScale Enable="false" ?

If possible please consider make it working the same way as the default settings.

Regards,

Julien

[Vijay Ravi]

Hi Julien Barach,
 

We consider your reported query with "Appointments Render Incorrectly During Dynamic Scheduler Width Changes with ScheduleViewTimeScale Disabled " as a bug and logged the defect report. The fix for this defect will be included in our upcoming weekly patch release, which is expected to be rolled out by the December 10, 2024. You can track the status of the fix at the following link:

Feedback link: https://www.syncfusion.com/feedback/63420/appointments-render-incorrectly-when-timescale-is-disabled-while-dynamically

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

Regards,

Vijay

[Vijay Ravi]

Hi Julien,
 

We are glad to announce that our Essential Studio® 2024 Volume 4 release v28.1.33 is rolled out and is available for download under the following link.

Essential Studio® 2024 Volume 4 Main Release v28.1.33 is available for download | Announcements Forums | Syncfusion

  

Release notes: https://blazor.syncfusion.com/documentation/release-notes/28.1.33?type=all#schedule

Feedback: Appointments render incorrectly when timeScale Is disabled while dynamically adjust scheduler width in Blazor | Feedback Portal

Root cause: We adjusted the appointments position if the browser window is resized. But there is not option to detect the Schedule element width change. So, it's not possible to adjust the position of the appointments if width of the Scheduler is changed based on available width. Upgrade to the latest version to avail this feature.

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Regards,

Vijay