Blazor SfSchedule throws JSException (Cannot read properties of null (reading 'offsetHeight')) when navigating Prev/Next in Day/Week view

[Yongkee Cho]

Hi Syncfusion team,

I am seeing an exception in Blazor Scheduler (SfSchedule) when navigating Previous/Next in Day and Week views. The issue does not occur consistently in Month view.

I am using a custom EditorTemplate and EditorFooterTemplate, along with remote data through SfDataManager and ODataV4Adaptor. The Scheduler supports day/week/workweek/month views, and navigation in day/week appears to trigger a client-side JS error during appointment rendering. Syncfusion’s Scheduler docs show that navigation events such as DateNavigate and ViewNavigate are part of normal Scheduler behavior, and editor customization via EditorTemplate / EditorFooterTemplate is also a supported scenario. 

<SfSchedule @ref="_scheduler"
            @bind-SelectedDate="_selectedDate"
            TValue="Schedule"
            CssClass="mt-2"
            CurrentView="View.Month"
            ShowQuickInfo="true"
            ShowTimeIndicator="false">
    <ScheduleViews>
        <ScheduleView Option="View.Day"></ScheduleView>
        <ScheduleView Option="View.Week"></ScheduleView>
        <ScheduleView Option="View.WorkWeek"></ScheduleView>
        <ScheduleView Option="View.Month" MaxEventsPerRow="4"></ScheduleView>
    </ScheduleViews>
    <ScheduleEventSettings Query="@_gridQuery" TValue="Schedule" IgnoreWhitespace="true">
        <ChildContent>
            <SfDataManager Url="@RegistryApiUrlProvider.OData("schedules")" Adaptor="Adaptors.ODataV4Adaptor"></SfDataManager>
            <ScheduleField>
                <FieldStartTimezone Name="StartTimeZone" Title="Start TimeZone"></FieldStartTimezone>
                <FieldEndTimezone Name="EndTimeZone" Title="End TimeZone"></FieldEndTimezone>
            </ScheduleField>
        </ChildContent>
    </ScheduleEventSettings>
    <ScheduleEvents TValue="Schedule"
                    OnPopupOpen="OnPopupOpen"
                    OnPopupClose="OnPopupClose"
                    OnActionFailure="OnActionFailure" />
    <ScheduleTemplates>
        <EditorTemplate>
            <ScheduleEdit Content="@(context as Schedule)" TimeZoneId="@_timeZoneId" ReadOnly="false" Saved="OnScheduleSaved" />
        </EditorTemplate>
        <EditorFooterTemplate>
            @{
                var schedule = context as Schedule;
                <SfButton IsPrimary="true"
                          IconCss="e-icons e-save"
                          Content="Save"
                          Disabled="@(_isSaving || string.IsNullOrEmpty(schedule.CreatedBy) || !schedule.CreatedBy.Equals(_email, StringComparison.InvariantCultureIgnoreCase))"
                          OnClick="@(() => { _isSaving = true; _editorButton = EditorButtons.Save; _scheduler?.CloseEditor(); })"
                          HtmlAttributes="@(new Dictionary<string, object> { { "form", "scheduleForm" }, { "type", "submit" } })" />
                <SfButton IconCss="e-icons e-close"
                          CssClass="e-secondary"
                          OnClick="@(() => { _editorButton = EditorButtons.Cancel; _scheduler?.CloseEditor(); })">Cancel</SfButton>
            }
        </EditorFooterTemplate>
    </ScheduleTemplates>
</SfSchedule>

Exception

System.InvalidOperationException: Unhandled exception occurred during interop call. 
 ---> Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'offsetHeight')
TypeError: Cannot read properties of null (reading 'offsetHeight')
    at t.renderAppointments (https://localhost:7053/_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js:30:1771396)
    at t.onDataReady (https://localhost:7053/_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js:30:1804900)
    at e.dataReady (https://localhost:7053/_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js:30:1964843)
    at Object.dataReady (https://localhost:7053/_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js:30:1997579)
    at b.processJSCall (https://localhost:7053/_framework/blazor.web.js:1:4448)
    at b.beginInvokeJSFromDotNet (https://localhost:7053/_framework/blazor.web.js:1:4125)
    at kn._invokeClientMethod (https://localhost:7053/_framework/blazor.web.js:1:69241)
    at kn._processIncomingData (https://localhost:7053/_framework/blazor.web.js:1:66606)
    at connection.onreceive (https://localhost:7053/_framework/blazor.web.js:1:60257)
    at i.onmessage (https://localhost:7053/_framework/blazor.web.js:1:84315)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, JSCallType callType, Object[] args)
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at Syncfusion.Blazor.Internal.SfBaseUtils.InvokeMethod(IJSRuntime jsRuntime, String methodName, Object[] methodParams)
   --- End of inner exception stack trace ---
   at Syncfusion.Blazor.Internal.SfBaseUtils.InvokeMethod(IJSRuntime jsRuntime, String methodName, Object[] methodParams)
   at Syncfusion.Blazor.SfBaseComponent.InvokeMethod(String methodName, Object[] methodParams)
   at Syncfusion.Blazor.Schedule.SfSchedule`1.OnDataReady()
   at Syncfusion.Blazor.Schedule.Internal.VerticalView`1.RenderEvents(List`1 alldayCollection, List`1 normalEventCollection)
   at Syncfusion.Blazor.Schedule.Internal.VerticalView`1.DataReady(IEnumerable`1 result, Nullable`1 date)
   at Syncfusion.Blazor.Schedule.Internal.EventBase`1.DataManagerSuccess(IEnumerable`1 result)
   at Syncfusion.Blazor.Schedule.Internal.EventBase`1.RefreshDataManager()
   at Syncfusion.Blazor.Schedule.Internal.EventBase`1.RefreshDataManager()
   at Syncfusion.Blazor.Schedule.Internal.VerticalView`1.OnParametersSetAsync()
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Repro behavior

1. Open the Scheduler.
2. Switch to Day or Week view.
3. Click Prev or Next to navigate dates.
4. Scheduler throws Cannot read properties of null (reading 'offsetHeight') from renderAppointments.

[Vijayakumar Rajasekar]

Hi Youngkee Cho,

 

Thank you for bringing this issue to our attention and for identifying the root cause!

 

Issue Identified:

 

The JSException: Cannot read properties of null (reading 'offsetHeight') occurs due to state desynchronization between the Blazor component and JavaScript rendering engine.

 

Root Cause:

 

When using one-way binding (CurrentView="View.Month"), the component's Blazor state remains fixed even when users switch views through the UI. This creates a mismatch:

 

JavaScript side: Renders Day/Week view DOM structure

Blazor side: Still expects Month view structure

Result: During navigation, JavaScript cannot find the expected DOM container, causing the null reference error

 

Solution:

 

Use two-way binding to keep both sides synchronized:

 

@code {

    private View currentView = View.Month;

}

 

<SfSchedule @bind-CurrentView="currentView" ...>

 

This ensures the component state updates automatically when users switch views, preventing DOM mismatches.

 

Why Day/Week Views Are Affected:

 

Day and Week views require precise height calculations (offsetHeight) for positioning time-based appointments, making them more sensitive to DOM element availability than Month view.

 

We have attached a working sample demonstrating the correct implementation with two-way binding. Please review the sample for reference.

 

We appreciate your patience in troubleshooting this. Please let us know if you have any further questions or need additional assistance.

Regards,

Vijayakumar R

Attachment: BlazorSchedulerODataSample.Server_1f72ec38.zip